Svelte component tailwind class does not override scss file

[AntonioVentilii]

I am working on a Svelte/Vite project with SASS and my files are (already in tailwindcss v4):

./global/theme.scss

...
a,
input,
button,
select,
textarea {
	font-family: inherit;
	color: inherit;
}
...

./global.scss

@use 'sass:meta';
@use 'tailwindcss';

@config '../../../../../tailwind.config.ts';

@include meta.load-css('global/theme');

./CustomButtom.svelte

<script lang="ts">
....
</script>

<button
	...
	class="text-brand-primary h-10"
>
	...
</button>

<style lang="scss">
	button {
		&:hover {
			color: inherit;
		}
	}
</style>

It was working well with tailwindcss v3 , meaning that the color of the icon/text of the button was given by text-brand-primary. However, after the update, the color is inherit.

For reference this was before:

It seems somehow the tailwind CSS classes have less priority now. Is that expected? How shall I fix it?

[wongjn]

Consider having the CSS in global/theme.scss in the @layer base like:

@layer base {
  /* Styles here */
}

You may also wish to read the documentation on compatibility with Sass in the docs if you have not already done so.

[AntonioVentilii]

Thank you @wongjn ! That was it!