How to scope Tailwind Css

Question

I cannot find a good way to scope tailwind CSS when including it in a system where I don't want it to apply globally that works with custom build options.

Essentially I want to do this:

.tailwind{
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
}

But PostCSS importer doesn't like this due to the fact it imports before the tailwind placeholders are replaced. So the only way to make it work is to break the build into 2 stages then import the compiled css like:

.tailwind{
    @import "tailwindcss.css";
}

It works but it breaks some of the css rules which show up in dev tools.

Is there a better way to scope tailwind to stop it interfering with other systems?

Answer 1

I've found that you can use postcss-nested for this. Install the plugin, add it as the first plugin to your PostCSS config file and this should work:

.tailwind {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @tailwind screens;
}

Answer 2

From the docs...

The prefix option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.

For example, you could add a tw- prefix by setting the prefix option like so:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

Answer 3

You will achieve this by setting important in the tailwind config to your parent class or id. See docs.

// tailwind.config.js
module.exports = {
  important: '.tailwind',
}

Unfortunately, this seems to only be affecting the components and utilities styles... the base styles will remain unaffected.