Is There a Way To Use a "wrapper" Selector Class In V4?

[LearnWebCode]

Hi, I'm loving v4! Thank you for all the amazing hard work.

In v3 I would often use code like this in my CSS file:

.my-unique-wrapper-class {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

Which allowed me to have a perfect developer experience using Tailwind on projects / sites where I don't want any of the Tailwind classes to "leak outside" of the specific area I'm working on. This way I didn't have to prefix all of my classes and type out things like "my-prefix-py-4" etc...

Is there a way to achieve something similar in v4?

[wongjn]

You could do something like:

@layer theme, base, components, utilities;

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

.my-unique-wrapper-class {
  @import 'tailwindcss/preflight.css' layer(base);
  @import 'tailwindcss/utilities.css' layer(utilities);
}

https://play.tailwindcss.com/cg3yy1nteV?file=css

Note, some CSS rules target :root, html, body, etc. which won't target anything most likely (such as some rules in preflight). You may find you need to copy some of these unapplicable CSS into your own rule(s).

[LearnWebCode]

Thank you very much! I'll look into the :root, html, body etc... but this works very nicely and gets me 99% of the way there. Really appreciate it!