Scoped TailwindCSS

[smhmd]

We have a React project that uses styled-components that we want to migrate to TailwindCSS. The issue is that our CSS did not have sufficient reset styling, so importing TailwindCSS breaks the styling in a lot of places where our styled-components CSS was dependent on the default user stylesheet. So, we thought we import TailwindCSS in select places.

Having TailwindCSS styles prefixed with an id, we could freely import TailwindCSS but only use it by specifying an id on a given component.

Adding important: '#tailwind' to our tailwind.config.js prefixes all tailwind components and utilities with the #tailwind id, but not base where we actually have a problem. Is there a way to

{
  important: '#tailwind',
}

Is there a way to have all TailwindCSS styles scoped by a selector?

[stefanfisk]

https://github.com/RadValentin/postcss-prefix-selector might be what you need.

[smhmd]

I used just that to have a base.css off of @tailwind base as I'm only interested in that part. It would be nice if important '#id' supported base as well.