[v4] preflight removed margins conflicts with web-component :host styles

[nilshelmig]

What version of Tailwind CSS are you using?

v4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

@tailwindcss/[email protected], [email protected], @material/[email protected]

What version of Node.js are you using?

v22.9.0

What browser are you using?

Firefox 134.0.2, Chromium 132.0.6834.83

What operating system are you using?

Kubuntu 24.10.

Reproduction URL
https://github.com/nilshelmig/tailwindcss-4-webcomponents-bug

npm ci
npm start

Describe your issue

We use material web-components in our project. While upgrading to tailwindcss-v4 we encountered wrong paddings of buttons and wrong position and size of dialog boxes.

It seems because of preflight setting padding and margin for every element * to zero, it overrides the styling rules from :host of the custom-web-elements.

Currently, the only workaround I see is to create a custom preflight, so that setting padding and margin won't apply to :host elements, or set the padding and margin for the custom element with tailwindcss. The later one would mean more control on our side, but we have to reapply every sizing of material web-components 😕

With preflight enabled

With preflight disabled

[Wrufesh]

I am migrating my existing v3 project to v4 and facing similar issue. Even explicitly defined margin and padding on elements <div class="mx-4 my-2"></div> is not working until i disable margin:0; padding:0 defined in preflight.css from chrome style inspector.

May be applying custom preflight.css without normalizing padding and margin would work but not sure if there is something else I can do as it seems intensional and might be working for everyone else.

[Archors]

I am experiencing the same issue mentioned here, but in my case, it’s even more complicated because the reset using * { margin: 0; padding: 0; } is part of a theme imported from another project (a library). Modifying this reset is challenging as it risks breaking multiple projects that rely on this theme.
I’d like to prioritize Tailwind’s utility classes over the CSS classes applied in my theme. However, due to the * reset, the utility classes (like mx-4, py-2) are overridden, which breaks the intended Tailwind styling.

My app is wrapped in my theme :

import './theme.scss';

const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  return <>{children}</>;
};

export default ThemeProvider;

[Archors]

I found a workaround for the issue. Instead of importing Tailwind CSS with the default:

@import 'tailwindcss';

I switched to importing only the specific layers I need, like this:

@import 'tailwindcss/theme.css';
@import 'tailwindcss/preflight.css';
@import 'tailwindcss/utilities.css';

This approach might not be ideal for every use case, but it avoids some of the conflicts caused by the * reset in preflight while still leveraging Tailwind’s utilities.
While this workaround works for now, I’m still looking for a better solution that can resolve this issue without breaking tailwind layer system.

[Wrufesh]

I just replaced its preflight with copy of its preflight without margin and padding applied and it solved padding and margin issue.

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@import "./preflight.css" layer(base);

With this I have started to discover that everything in the preflight gets priority, for example:
With this in preflight:

img,
video {
  max-width: 100%;
  height: auto;
}

I was not able to apply height on <img class="h-[8rem]">, as soon as I removed height: auto; for img on preflight.css it worked.

I think somehow utility class are not prioritized against preflight.css which I think should not be the case.

[Wrufesh]

I manage to fix the issue in my case. Somehow I was messing with the priority with my main.css code. It was last two lines which was carried over with project and commenting out those fixed the issue.

/* @import 'tailwindcss'; */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap')
layer(utilities);

[AlexPoker]

Even without material web-components or any other third-party library preflight's margin setting seems to break the native dialog modal.

[nilshelmig]

Even without material web-components or any other third-party library preflight's margin setting seems to break the native dialog modal.

I would suggest, that you create a new issue for that. Because the title of this issue is focused on web-components 🙂