Is there a conventional way to increase the specificity of a component's style?

[jusko]

I'm trying to use WA with Tailwindcss but TW seems to win specificity in corner cases (see image: wa-divider's border-top loses out to tailwind's global resets). Ideally it'd be nice to just add !important to the affected component's style. Is there a conventional way to do that?

[KonnorRogers]

Not really. Unfortunately this is what happens when people set global styles.

Best you can do is to manually add these back. We can't control what other people set in their global styles, and the :host selector has lower specificity than the * selector.

wa-divider:not([vertical]) {
  border-top: solid var(--width) var(--color);
}

[KonnorRogers]

There is technically an easier fix using revert-layer, but the browser support is basically non-existent.

https://caniuse.com/?search=revert-layer

wa-divider {
  border-top: revert-layer;
}

There does appear to be a polyfill available:

https://www.oddbird.net/2022/06/21/cascade-layers-polyfill/

[jusko]

Thanks for your help. I think because Tailwind causes the conflict, explicitly redefining the style using their custom directives works best (as you suggested):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  wa-divider:not([vertical]) {
    border-top: solid var(--width) var(--color)
  }
}

[KonnorRogers]

@jusko I'm going to open an issue see if Tailwind would consider targeting only specific elements that are affected by border issues, as opposed to using a * selector.

[davekaro]

I'm seeing the same problem for wa-menu. I looked up the CSS on the docs site and also added this fix:

wa-menu {
  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}

It's worrisome this is happening, and I didn't even notice my menu was missing the border at first. I found tailwindlabs/tailwindcss#13189 which reveals that more styles will be applied via * selector in tailwind v4. Unsure if that will cause more issues or not.

It's starting to feel like using tailwind with web awesome may be more trouble than it's worth, or am I blowing this out of proportion?

[b-d-m-p]

@davekaro I just did my site with Tailwind and Shoelace and it was a bit annoying, but just fixing those outliers I think is a fine a approach. Nothing is perfect in general, so another way could be as equally annoying. If we use it and get these things fixed over time, we can make it better for everyone. 😃

Maybe we could make a list of all these fixes we make for tailwind users to add into their projects, since it is a popular library. 🤔

[marcomuser]

I have a feeling that using Tailwind with a component library like Web Awesome is a bit of an antipattern. As I see it, Tailwind has two key features: a token system and utility classes that make the tokens usable when defining your CSS classes in HTML. The utility classes are basically just a system for organizing one's CSS. Of course, this also combines wonderfully with Web Awesome if you like. However, the token system clashes a little with Web Awesome's design system. Web Awesome defines its own tokens (as CSS Custom Properties) for all kinds of scales, color system etc. When using Web Awesome for your own apps, I would think that you would also want to adopt its tokens in order to achieve as homogeneous a result as possible. This is where the Tailwind tokens are unfortunately not helpful. If utility classes are your cup of tea (not mine.. I'm more in favor of coffee), UnoCSS could be a good companion for Web Awesome. Maybe someone would like to create a community preset that translates Web Awesome's CSS custom properties into utility classes.

[timsnadden]

I've found that tailwind can integrate with Shoelace/Web Awesome if the tailwind config references the theme's CSS variables. e.g. Something like this:

    boxShadow: {
      DEFAULT: 'var(--sl-shadow-medium)',
      none: 'none',
      small: 'var(--sl-shadow-small)',
      medium: 'var(--sl-shadow-medium)',
      large: 'var(--sl-shadow-large)',
      xlarge: 'var(--sl-shadow-x-large)',
    },