You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Styles may be applied in the wrong order. In the example below, the button may still remain white, despite the fact that I have specified another class that sets the background color to red.
If you remove the sorting step in this line, the styles are applied in the correct order.
Reproduction
Create project using command: ns create myAwesomeApp --template @nativescript-vue/template-blank@rc
Add the custom color to tailwing.config.js
/** @type {import('tailwindcss').Config} */module.exports={content: ['./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'],// use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.darkMode: ['class','.ns-dark'],theme: {extend: {colors: {primary: "#F4BB46"}}},plugins: [],corePlugins: {preflight: false,// disables browser-specific resets},};
Sorting is intended since selector specificity and order matters in CSS.
This might be a scoped css thing if you declare styles in Vue templates, but this is just a speculation without reproducible information.
Ordering should match with how it's defined in the CSS files. To avoid this, I would recommend using a tailwind specific library like https://www.tailwind-variants.org/ to apply overrides.
Uh oh!
There was an error while loading. Please reload this page.
Issue Description
Styles may be applied in the wrong order. In the example below, the button may still remain white, despite the fact that I have specified another class that sets the background color to red.
I debugged the NativeScript code and found out that the sorting of applying styles changes here:
NativeScript/packages/core/ui/styling/css-selector.ts
Line 1111 in dca7718
If you remove the sorting step in this line, the styles are applied in the correct order.
Reproduction
Create project using command:
ns create myAwesomeApp --template @nativescript-vue/template-blank@rc
Add the custom color to tailwing.config.js
Create the custom button component with:
Use a custom button and set a CSS class with an added custom color that overwrites the root style. In the current example "bg-primary"
Relevant log output (if applicable)
No response
Environment
No response
Please accept these terms
The text was updated successfully, but these errors were encountered: