Make Tailwind Classes non-Global (automatically!)

Question

I have an application made up of two parts:

• ( A ) legacy application (AngularJs) with its own CSS classes.
• ( B ) div containing a completely new application (React). B is built with webpack, postcss and Tailwind.

Can I make sure that B 's Tailwind classes are not affected by A 's stylesheets and vice versa, without any significant changes to the codebase?

Bad Solutions

I currently found two possible solutions that require big changes:

1. I understand that Tailwind has a prefix config option , but I'd prefer not to prefix literally thousands of classes (especially considering that the prefix is longer than the class name itself).
2. Use css-modules with local imports. I also don't like this approach, since:
   • (i) I'm not sure how well that works with Tailwind, and
   • (ii) even if it works, I would prefer not having to locally import from all kinds of places since it makes things a lot more verbose:
     • eg className="x"... className="y" becomes:
       • import s1 from 's1'; import s2 from 's2'; ... className="s1.x"... className="s2.y"

More Relevant Approaches

I found two other relevant postcss plugins, but they fall short:

1. postcss-rename is great, but it does not fix the names in *.js files.
2. purgecss can find classes based on their presence in *.js files and then remove them from the output class list, but they do not allow renaming.

I specifically found that the most crucial missing feature seems to be the *.js file parser of purgecss . No other solution seems to have that quite yet.

Unsolved Problem

Or am I wrong? Is there any solution to apply a custom transform (eg rename) to all postcss classes, that are also applied to the output class names of HTML/JSX elements? Or is there any other way to have webpack automatically make my CSS classes non-conflicting for me?

Answer 1

You can use tailwind's prefix options

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-',
}

tailwind docs here

Answer 2

You may want to try this loader along with the tailwind prefix config tailwind-classname-prefix-loader

Answer 3

You could try using a hyphen to prevent long classnames

module.export = {
  prefix: "-"
}

For a project of mine it looks more aesthetic