Preflight only within some container

[fehergeri13]

I have an old project, where I want to have the old css untouched, and use the tailwind within some wrapped place. When I disable the preflight entirely, i have to add all the default styles to the ul etc. If I enable, my old style is broken.

What I did, that I copied the generated preflight and added .tw-preflight class before all of the generated styles, to only apply the preflight within that container, and it seems to work for me nicely.

.tw-preflight *,
.tw-preflight ::before,
.tw-preflight ::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: #e5e7eb;
    /* 2 */
}

I had to do it manually, but I think this would be a nice feature.

[Ashish424]

This will be really helpful. I am using tailwind css with a Shopify Theme and don't want to break existing styles of the theme yet get the benefits of writing new styles the tailwind way.

[Ashish424]

I had to setup scoped preflight for a project recently. I have made a repo for anyone who might need this.

[ChristophP]

This would also be helpful for me to adopt tailwind into an existing project

[frankrowe]

I think an easier way to do this is to enable nesting in the postcss config, disable preflight, then copy paste the preflight from node_modules into your main css file nested inside a wrapper class.

Built in functionality for this would be great.

[ChristophP]

That's how I worked around it too. Works but a built-im way would be nice, since I can't get updates to the preflight via npm anymore.

[inxilpro]

Yeah, it'd be really nice if this was baked into Tailwind. We use this same technique for a codebase that's still in transition to Tailwind, but it's also really useful if you want to build embeddable CSS but still use Tailwind.

[Nugorra]

There is already the important option with the selector strategy.
Currently it does not what we want, but this would be where I see this feature.
(would just need to also process preflight)

[silverbackdan]

I'd also like to see this feature. I'm creating a Nuxt Module and I have UI components I am styling with tailwind - and using a prefix so I can compile all the css for my module down and then I wanted an option for the final application to use whatever css framework they choose without conflicts. So I wanted to add an option and then I'd be able to simply add a class to the HTML tag or to my individual components using tailwind depending on the option.
So ideally, there could just be an option such as preflightScopeClass and the preflight would only be applied to elements with, or contained within an element with that class.

[terwer]

Thanks this plugin, it works great. https://www.npmjs.com/package/tailwindcss-scoped-preflight

#10332 (comment)

[ouweiya]

If you're using Tailwind v4, you can check out this discussion.

#15866 (comment)