ClassNames not consistently applied across components.

[willbreitkreutz]

Describe the bug

There are cases where groundwork does not honor className props correctly allowing the consuming app to override / add css classes.

If you run across examples where this is happening, please add a note here so we can track down the offending components.

REDACTED relevant log output

Steps to Reproduce

No response

[krowvin]

@jbkolze Do you have examples of what you were seeing?

[jbkolze]

Turns out my recall was slightly off -- it's not so much a tailwind compilation issue as a CSS specificity issue. The Batch UI has two CSS files being loaded -- groundwork's style.css and a local index.css that only contains @import "tailwindcss".

If I try to use a border on any component anywhere in the app using, for example, classname="border-2 border-solid border-black" the "local" tailwind CSS is generated but is overridden by groundwork's CSS. This happens regardless of the order of the CSS imports.

I can force the local classnames to take precedence by using classname="!border-2 !border-solid !border-black", but it seems like this shouldn't be required.

---

And I think I figured out what the issue is. My app is using Tailwind v4 whereas groundwork still uses Tailwind v3. Tailwind v4 uses native CSS cascade layers, which means all tailwind classes are layered by default, e.g. border-solid is in the "utilities" layer. Groundwork's tailwind v3 classes are unlayered, and unlayered classes generally take priority.

So, basically a versioning issue -- probably wouldn't be noticed with any apps created prior to Tailwind v4. I can revert to v3 or, ideally, once groundwork fully incorporates v4 it should be a moot point.

Can probably close this unless you all want to do more investigation or leave it open for any tailwind versioning fixes.