How to override the theme's defaults in plain css or tailwind classes?

[AnatoleLucet]

From a scaffold project generated using the Skeleton CLI, if I try for example to apply a Tailwind class such as font-thin to an h1, the theme's defaults will override it and the style won't apply.

Is there a way to make the default css defined with the [data-theme='skeleton'] selector less preeminent so I can apply Tailwind classes on my elements?

[Sarenor]

The problem is that the Skeleton h1 classes are as specific as tailwind classes, but will always be defined after Tailwind classes in the stylesheet, due to how Tailwind Plugins work.

That means that they will always have a higher specificity, since the class that's defined last will win if there's no other differentiator.

So the only way to override specific parts of Skeleton classes that you're using is by using the Tailwind-! syntax like so !font-thin.

[AnatoleLucet]

I see 😕 and would you say this is a valid way of customizing bits of the theme here and there? or is there a better way to do this with Skeleton?

[Sarenor]

It's definitely valid!
If you want that customization for all <h1 class="h1"> you can also do

.h1 { @font-thin; }

which will then override it for all usages of the .h1 class.
! is mostly for one-offs/exceptions.

There's a whole docs page about how to further customize Skeleton & themes as well.
https://www.skeleton.dev/docs/styling

You can also override specific theme properties if you want to stick with one of the canned Skeleton Themes but tweak it a little: https://www.skeleton.dev/docs/themes

[AnatoleLucet]

Great! Thanks for the help and the clarifications 🙏