Tailwind v4 Preflight overrides :host selectors in web components

[emfax]

I'm using Tailwind v4 in a project that also uses some web components. The web components are based on Lit, so use adoptedStyleSheet for styling the shadow DOM.

Any :host rules define anything related to border, margin, padding or box-sizing are overrode by this rule from Tailwind's preflight,

*, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

Any information I can find says that, :host rules should have higher precedence than the universal selector. If you manually turn off these rules in the web inspector, then the expected :host styles appear.

I have included a repro here,

Run the dev server,

pnpm run dev

And see what's happening. The element should be centered and have a red border, but the preflight resets override it.

What is happening here? How can we have Tailwind in a project with web components and not have it interfere with :host rules?

[crswll]

Started playing with web components a bit myself recently and found myself with similar confusion (and it's likely still there).

The :host selector does have a higher specificity than * but only in the web component itself. The following will give you a red border in the web component.

:host { border: 3px solid red; }
* { border: 3px solid blue; }

The * from the document wins in your example because the web component root belongs to the document itself.

I believe if you want some sure styles on the "component" you'd be better off styling a child of the web component. You'll have full encapsulation there. I think I'd limit what styles I set via host pretty strictly though.

You currently have this:

:host {
  display: flex;
  justify-content: center;
  border: 3px solid red;
  width: 20rem;
  margin-inline: auto;
}

I think width, margin-inline and border are likely better off styled from the document itself and not inside the component via :host.

If you definitely want all of them set on :host though and don't want to worry about the document you can use all: unset as well but this seems nuclear.

Curious to hear what others say, though.

[emfax]

Just to add a bit more context, I'm writing a component library for user defined interfaces, so the goal is to have a set of web components that don't require any external styling. It's all done through the elements and their attributes. The framework is somewhat inspired by the types in SwiftUI, so there are layout/structural components that help with some styling.

Most of the time, the styling is internal and not a problem, but there are some cases where you want to control the border or margins of the host, like with the aforementioned structural components like containers that center content with margins and breakpoints.

As much as I hate !important and believe it should never be used, maybe this is a case where it is actually appropriate.

@crswll Just agree with me on the !important thing so I feel better about it.

[crswll]

Yeah, !important might be the safest bet since sadly you won't even know what styles the document is setting. I wonder how some web component libraries handle that aside from being explicit about properties you can't set.

[crswll]

It almost seems like you'd want to use your own preflight that's a little less invasive and more explicit if you're using web components, like an explcit list of elements to reset instead of *.