Open
Description
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.
<!-- CustomButton.vue -->
<template>
<Button class="bg-white" />
</template>
<!-- Home.vue -->
<template>
<CustomButton class="bg-red" text="Hello" />
</template>
I debugged the NativeScript code and found out that the sorting of applying styles changes here:
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
},
};
Create the custom button component with:
<!-- CustomButton.vue -->
<template>
<Button class="bg-white" >
<slot />
</Button>
</template>
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"
<!-- Home.vue -->
<script lang="ts" setup>
import CustomButton from './CustomButton.vue';
</script>
<template>
<Frame>
<Page>
<CustomButton
class="rounded-lg p-5 bg-primary align-middle"
horizontalAlignment="center"
>
View Details
</CustomButton>
</Page>
</Frame>
</template>
Relevant log output (if applicable)
No response
Environment
No response
Please accept these terms
- I have searched the existing issues as well as StackOverflow and this has not been posted before
- This is a bug report
- I agree to follow this project's Code of Conduct