Why is this line text red and not blue?

[frederikhors]

Reproduction URL

https://github.com/frederikhors/iss-tailwind-priority-color

Describe your issue

Steps:

1. git clone https://github.com/frederikhors/iss-tailwind-priority-color
2. npm install
3. npm run dev
4. open http://localhost:3000

The line should be blue, not red.

The final html is:

<span class="text-red-500 text-blue-600">I should be BLUE!</span>

[CaptainCodeman]

Most likely, the style for text-blue-600 has been purged from the CSS (or rather, not included by the JIT engine of Tailwind) due to the convoluted way the styles are defined. I am pretty sure it looks for class="" attributes in the content, so className is probably throwing it off (same as if you concatenate strings to form class names - it won't recognize those).

You either need to alter how you define classes (you can use class with components) or whitelist the entries.

[frederikhors]

Thanks for the answer but I don't think this is the case. You can change the name and it works.

[munaja]

seems it's on tailwind part, would be wiser to ask on tailwind repo instead of sveltekit

[bill-kerr]

@frederikhors

The reason the text is red is because text-red-500 is defined later in the stylesheet, and because both those classes have the same specificity and target the same property, the class that is defined last prevails. This is not a Svelte-specific issue...you'll run into this whenever you use atomic classes like this and need to override default styles you've applied.

With SvelteKit and TailwindCSS, I usually deal with it like this:

<script lang="ts">
	let klass = '';
	export { klass as class };
</script>

<span class={`defaults ${klass}`}>
	<slot />
</span>

<style lang="postcss">
	.defaults {
		@apply text-red-500;
	}
</style>

There may be a more elegant way, but I've spent quite a bit of time searching for a good answer and this ^^ is the best I've found.