Tailwind v4: Global reset affecting main project when importing a library

[amendezm]

Problem Description:

Since upgrading from Tailwind v3 to v4, I've encountered an issue where the global reset rules defined by

*:not(#\#), 
:not(#\#):after, 
:not(#\#):before, 
:not(#\#)::backdrop { 
    box-sizing: border-box; 
    border: 0 solid; 
    margin: 0; 
    padding: 0; 
} 

are being applied to my entire project, including elements I do not intend to affect. This was not a problem when using Tailwind v3.

The issue arises when importing my custom library (which uses Tailwind v4) into my main project. The styles are overriding the intended layout and design in my main project, even though the reset should ideally only affect elements within the library itself.

Steps to Reproduce:

• Create a project using Tailwind v4.
• Import a library that uses Tailwind v4.
• Observe the global reset being applied to the entire project, which was not the case in Tailwind v3.

Expected Behavior:

The *:not(##) rule (or any other global reset) should only affect elements within the library and not the entire project. This behavior was present in Tailwind v3, but now it is impacting the broader scope of my project in v4.

Additional Context:

• Tailwind v3 did not exhibit this behavior.
• I expect the reset to be scoped more narrowly or configurable to avoid side effects in the main project.

Environment:

• Tailwind version: v4
• Node version: 22.13.1
• React version: 19
• Vite version: 2.7.3

[amendezm]

this is my index.css file

@import 'tailwindcss';

@config '../../tailwind.config.cjs';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer components {

  input {
    color-scheme: light;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    width: 18px;
    margin-top: -10px;
    cursor: pointer;
  }
}

[philipp-spiess]

Hey! Mind sharing your v3 config? I suspect that you disabled preflight. In v4 you can disable the resets by doing this: https://tailwindcss.com/docs/preflight#disabling-preflight

[alinaMihai]

Hi, I have a similar problem. I am also using Emotion and Elastic UI. From what I noticed the difference between v4 and v3, is the order in which the global emotion styles and the tailwind utilities styles get applied. Now the global emotion styles take precedence.
I've imported just these from tailwind:

 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        'caret-blink': {
          '0%,70%,100%': { opacity: '1' },
          '20%,50%': { opacity: '0' },
        },
      },
      animation: {
        'caret-blink': 'caret-blink 1.2s ease-out infinite',
      },
    },
    spacing: {
      // had to update the spacing to custom values since by default rem is 14px for our project
      0: '0px',
      px: '1px',
      0.5: '2px',
      1: '4px',
      1.5: '6px',
      2: '8px',
      2.5: '10px',
      3: '12px',
      3.5: '14px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      9: '36px',
      10: '40px',
      11: '44px',
      12: '48px',
      14: '56px',
      16: '64px',
      20: '80px',
      24: '96px',
      28: '112px',
      32: '128px',
      36: '144px',
      40: '160px',
      44: '176px',
      48: '192px',
      52: '208px',
      56: '224px',
      60: '240px',
      64: '256px',
      72: '288px',
      80: '320px',
      96: '384px',
      auto: 'auto',
    },
  },
  plugins: [],
};

[philipp-spiess]

@alinaMihai The order in which CSS takes presedenc in v4 is based on the CSS layers spec: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

If you want specific styles to have a lower priority compared to tailwind utilities, you'll need to import these third-party styles into the base layer or have the utilities generated outside of a layer (which can cause other ordering issues though). I don't know how Motion attaches the stylesheets into the website though so I'm not sure how this would look like in your config.

[alinaMihai]

got it, thank you!

[amendezm]

I discovered this is caused by using postcsss-preset-env

this is my config from the NextJs project I'm importing my lib into

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      stage: 1,
      autoprefixer: {
        grid: true,
      },
    },
  },
};

somehow this is adding

*:not(#\#), 
:not(#\#):after, 
:not(#\#):before, 
:not(#\#)::backdrop { 
    box-sizing: border-box; 
    border: 0 solid; 
    margin: 0; 
    padding: 0; 
} 

[amendezm]

@philipp-spiess any ideas on this?

[Nam278z01]

Incase it help you. I change @import "tailwindcss" to
@import "tailwindcss/theme.css";
@import "tailwindcss/preflight.css";
@import "tailwindcss/utilities.css";

[vytaux]

So why change names? Components -> theme? Base -> preflight?
Was there any other significant changes or is it only naming?

[udittyagi]

@layer theme, customBase, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@layer customBase {
.someParentClass {
@import 'tailwindcss/preflight.css';
}
}

This helped me from my leaking preflight css