[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/vite@4.0.0, vite@6.0.11, @material/web@2.2.0

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 🙂

[riicodespretty]

I recently experienced a similar issue from a freshly created Nuxt project, wherein @layer base was overriding @layer utilities no matter how I specified the layer order in my main.css entrypoint nor changing the @import order.

Weirdly enough, nesting together all the layers with a common parent fixed the problem.

Here's my workaround with a tailwind parent layer:

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

This workaround also seems to work seamlessly with the @theme and @utility directives.

[riicodespretty]

@layer base was overriding @layer utilities no matter how I specified the layer order in my main.css entrypoint

Investigating further, a Nuxt module @nuxt/icon was actually inserting an inline css in the <head> tag higher in order than the main.css entrypoint, and if it was configured like so:

export default defineNuxtConfig({
  // ...
  icon: {
    cssLayer: 'utilities',
  },
})

It would make it so that @layer utilities appears first and therefore all the other layers that are later declared in main.css would take precedence (see order-setting), including @layer base which is the preflights. To visualize, the order would then be as follows:

/* inline css by @nuxt/icon higher up in <head> */
@layer utilities;

/* main.css entrypoint */
@layer theme, base, components, utilities /* <- ignored, as it was already declared earlier */;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

A suggestion would be:

• Do not use a layer name used by tailwind, or else it would ruin layer orders.
• External modules that insert inline CSS higher than the main.css entrypoint should use CSS layers but differently named to ensure it is properly overridden by later declared tailwind CSS layers

[CodingCookiee]

I was facing similar problem with utility classes for margin and padding mostly ; Here is what worked for me ; its a comboination of different solution(Combining Custom Preflight with Selective Layer Importing) but mostly realible instead of shortterm:

Follow this sequence :
2. Explicitly defining layer order to ensure utilities override base
3. Custom Preflight to remove default margins and paddings
4. In the global css or index.css; i.e, the main css file :

• Define layer order explicitly
• Import Tailwind as a whole first
• Custom preflight instead of default

Here are snippet to help out:

• tailwind-config:

`/* eslint-disable import/no-anonymous-default-export */

/** @type {import('tailwindcss').Config} /
export default {
content: [
"./src/app/**/.{js,ts,jsx,tsx,mdx}",
"./src/components//*.{js,ts,jsx,tsx,mdx}",
"./src/context//*.{js,ts,jsx,tsx,mdx}",
],
// Explicitly defining layer order to ensure utilities override base
layers: {
theme: {},
base: {},
components: {},
utilities: {},
},
theme: {
extend: {
},
plugins: [],
};`

• global.css for next ; for vite it is index.css:

`/* Define layer order explicitly */
@layer tw, tw.theme, tw.base, tw.components, tw.utilities, custom;

/* Import Tailwind as a whole first /
@import "tailwindcss" layer(tw);
/ Custom preflight instead of default */
@import "./styles/custom-preflight.css" layer(tw.base);
@plugin "tailwindcss-animate";

/* Custom utilities in the custom layer */
@layer custom {
}

/* Web component compatibility fix /
:host {
/ Ensuring web components can receive their own margin/padding */
margin: initial;
padding: initial;
}`

• custom-preflight.css
  `
  @layer tw.base {
  /* Base font styles */
  html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: theme('fontFamily.sans');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  }

  /* Box sizing rules */
  *,
  *::before,
  *::after {
  box-sizing: border-box;
  }

  /* Reset margins for specific elements only (not universal) */
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  }

  /* Typography */
  body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  }

  /* Media Defaults */
  img,
  picture,
  video,
  canvas,
  svg {
  display: block;
  max-width: 100%;
  }

  img {
  max-inline-size: 100%;
  }

  /* Form Elements */
  input,
  button,
  textarea,
  select {
  font: inherit;
  }

  /* Text Overflow */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  overflow-wrap: break-word;
  font-size: inherit;
  font-weight: inherit;
  }

  /* List styling */
  ol[role="list"],
  ul[role="list"] {
  list-style: none;
  padding-inline: 0;
  }
  }`

I hope this would help