Tailwind v4 has no important option support

[martin-dimi]

I tried updating tailwind to v4 today, but I noticed there is no support for the important config. Specifically this config.

In my case, I have a chrome extension which injects dom onto some pages. I use the important cause like this "important": "#my-extension" which forces all tailwind classes to have higher specificity over the original website's css.

[wongjn]

You'd replace the @import "tailwindcss"; with:

@layer theme, base, components, utilities;

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

@theme {
  /* ... */
}

@layer utilities {
  #my-extension {
    @tailwind utilities;
  }
}

[wongjn]

Will i break something or lose funcitonality in tailwind if I remove all the layers?

You may do. Tailwind has been built with the intention that layers are used.

can I scope all the other tailwind styles (theme, base) as well?

You can try it, but I'm not sure that works. Also as an aside, the base layer is different to preflight.

[martin-dimi]

Appologies, I meant preflight (have edited my comment). I need to have that scoped too as it affects the origin site, otherwise.
Having the import within the id selector seems to work (honestly, I didn't expect it to work..).

You may do. Tailwind has been built with the intention that layers are used.

Interesting. Is there an official solution / planned feature to cover such use cases? Again, that's when tailwind is used a on scoped section of an existing site. To recap:

1. Tailwind styles need to be scoped. (so they don't affect the whole site, e.g. no margins with prelight)
2. Tailwind styles need to take precedence over the global (non-layerd) styles.

I've tried using shadow dom for this, but unfortunately that doesn't work either (suspect its because the theme is using :root
which doesn't play nicely with shadow dom)

[wongjn]

Is there an official solution / planned feature to cover such use cases?

Not that I've seen.

[michaeltravan]

Hello @wongjn and @martin-dimi, apologies for resuming this thread but this is the closest I could find to my current situation. I'm using tailwind cli version 4 on a WordPress plugin, which as you surely know, has various scope-related issues. I thought I might add my experience.

What I'm trying to do is keeping all my utilities under a common Id (say #plugin) and following @wongjn directions I managed to do that by removing @layer utilities {}. But preflight styles are still leaking on the WordPress backend, causing various layout issues. I could of course remove preflight styles but since they're there for a reason, I'd like to keep them and scope them as well under the same Id. This is where I get lost. I've tried something like this, but it doesn't work.

@theme {
 ...
}

#youmini-panel {
  @import "tailwindcss/theme.css";
  @import "tailwindcss/preflight.css";

  @tailwind utilities;
}

Have you folks come up to anything working? Thanks!

[wongjn]

For scoping preflight.css like that, you'd need to reintroduce this rule, since its selectors are for html, :host:

tailwindcss/packages/tailwindcss/preflight.css

Lines 28 to 46 in c45616f

	html,
	:host {
	line-height: 1.5; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	tab-size: 4; /* 3 */
	font-family: --theme(
	--default-font-family,
	ui-sans-serif,
	system-ui,
	sans-serif,
	'Apple Color Emoji',
	'Segoe UI Emoji',
	'Segoe UI Symbol',
	'Noto Color Emoji'
	); /* 4 */
	font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
	font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
	-webkit-tap-highlight-color: transparent; /* 7 */
	}

Probably copy-pasting is the easiest way.

For theme.css, I don't believe there is any sure fire way in Tailwind alone, since its content is generated dynamically with the :root, :host selector. You'd need some post processor on the resultant CSS to change the selector for this rule.

https://play.tailwindcss.com/7be8xnDVt3?file=css

[ouweiya]

After several attempts, I discovered that using the postcss-nested plugin makes it easy to solve this problem.

.app {
    @import 'tailwindcss' source('../src');
}

Compiled result:

@layer theme, base, components, utilities;
@layer theme {
  .app :root, .app :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      ...
  }
}

@layer base {
  .app *, .app ::after, .app ::before, .app ::backdrop, .app ::file-selector-button {
    box-sizing: border-box;
    ...
  }

  .app html, .app :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    ...
  }
  ...
}

@layer utilities {
  .app .text-red-500 {
    color: var(--color-red-500);
  }
  ...
}

Soon, I realized that selectors like .app :root and .app html don't actually exist. As a result, the defined CSS variables and properties had no effect. I initially planned to write a simple plugin to replace html and :root selectors with .app, but I discovered that the community already offers a well-made plugin: postcss-prefix-selector.

In the end, I didn’t need to modify the input.css file at all — simply adding the plugin resolved the problem.

My configuration:

/* input.css */
@import 'tailwindcss' source('../src');

/* postcss.config.mjs */
export default {
    plugins: {
        '@tailwindcss/postcss': {},
        'postcss-nested': {},
        'postcss-prefix-selector': { prefix: '.app' },
    },
}

The postcss-prefix-selector plugin adds the specified prefix and also replaces html, body, and :root selectors with .app.

If you don't need to transform CSS Nesting syntax for legacy browser compatibility, you can remove the postcss-nested plugin and instead add a custom transform function. This function will apply the prefix only to the top-level selectors, preserving the nested structure.

'postcss-prefix-selector': {
    prefix: '.app',
    transform: (prefix, selector, prefixedSelector, filePath, rule) => {
        // Skip nested rules — only apply prefix to root-level rules
        if (rule.parent && rule.parent.type === 'rule') {
            return selector;
        }

        // Apply prefix to top-level selector only
        return prefixedSelector;
    },
},

Compiled result:

.app .a {
  .b {  
    ...
  } 
}