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