Item classes do not accept Tailwind classes

[kevinstory]

I am able to apply custom styles and classes to an item. The styles work as expected but it doesn't seem to work with Tailwind classes.

You can see the classes are applied but the defined Tailwind classes are not applied.

[richardtallent]

Hi,

The cv-item class already has a background color and padding in the component CSS -- this is needed to create a reasonable default, so items don't show up transparent or clinging to the borders.

To override a CSS rule, you need a CSS rule with a higher selectivity. For rules with the same selectivity, the one declared first on the page (not first in the class attribute list) "wins."

Theoretically, you should be able to override this component's .cv-item rule with a simple Tailwind class, since both have the same selectivity, but it would require that Tailwind's class be declared first. I'm not sure you can guarantee that. You can certainly import the @tailwind base, etc. before importing this component, but considering Tailwind uses PostCSS, that probably isn't good enough.

The most predictable way to use Tailwind classes in this case (or in any case where you're trying to use Tailwind to override another CSS rule, which it really isn't intended to do) is to use @apply so you have a rule with a higher selectivity. For example:

.cv-wrapper .cv-item {
    @apply bg-gray-400 px-3 font-bold shadow-md
}

Another option: I actually made and maintain a Tailwind CSS plugin that makes it easier to use Tailwind classes to override other Tailwind classes by bumping up their selectivity (using an optional o: variant). You can find it here:

https://github.com/richardtallent/tailwindcss-override

This only raises the selectivity a bit, but that should also be good enough to override cv-item here.

Finally, I'm considering going back and adding :where() selectors to some rules within this component and the "default" theme specifically for anything that I'm setting as a "reasonable default" but that isn't critical for positioning, etc. That lowers the selectivity, which will make those specific styles overridable with normal Tailwind classes (or other custom stylesheets with simple class selectors). But that won't happen until iOS Safari 12-13 virtually go away, since they don't support that selector.

Hope that helps!