[V4] Is this the correct way to add element root specificity ?

[AsadGG]

I'm trying to achieve root element specificity for Tailwind CSS classes in v4, similar to how important: '#root' works in v3. but the output CSS from Tailwind Intellisense doesn't seem to apply the #root specificity as expected.

Attempted Tailwind CSS v4 Configuration:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
@import 'tailwindcss/preflight.css' layer(base);
#root {
  @import 'tailwindcss/utilities.css' layer(utilities);
}

Equivalent Tailwind CSS v3 Configuration:

/** @type {import('tailwindcss').Config} */
export default {
  prefix: 'tw-',
  important: '#root'
}

Output from Tailwind Intellisense in V4:

.tw\:text-red-500 {
    color: var(--tw-color-red-500) /* oklch(63.7% 0.237 25.331) = #fb2c36 */;
}

Output from Tailwind Intellisense in V3:

#root .tw-text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1)) /* #ef4444 */;
}

[AsadGG]

Generated CSS from dev tools

Tailwind Intellisence

[wongjn]

Yes that's should be fine. I expect Tailwind intellisense doesn't emit the prefix because intellisense doesn't bother taking into account any native CSS nesting.

[AsadGG]

yeah i was checking the intellisence and didn't bother to check generated CSS wasted half an hour.

cause in V3 intellisence does show the #root