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?
I currently found two possible solutions that require big changes:
className="x" ... className="y" becomes:
import s1 from 's1'; import s2 from 's2'; ... className="s1.x" ... className="s2.y"I found two other relevant postcss plugins, but they fall short:
postcss-rename is great, but it does not fix the names in *.js files.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.
Or am I wrong? Is there any solution to apply a custom transform (e.g. 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?
You may want to try this loader along with the tailwind prefix config tailwind-classname-prefix-loader
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-',
}