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:
     • e.g. 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 (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?

Clarethaclaretta

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

Saponify

This isn't OP's question, OP's question was a way to not have to write a prefix like that themself – Monanthous

Answer 2

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

Mcabee

Thanks for the hint. But lack of maintenance, especially in a babel plugin, is too scary. We are now using twin.macro instead. – Clarethaclaretta

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Faculty

Answer 3

You could try using a hyphen to prevent long classnames

module.export = {
  prefix: "-"
}

For a project of mine it looks more aesthetic

Graviton

Answer 4

You can use tailwind prefix without requiring to use the prefixes in your source code.

1. First modify tailwind's class extractor:

const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor')
const { default: resolveConfig } = require('tailwindcss/lib/util/resolveConfig')

const defaultExtractor = createDefaultExtractor({
  tailwindConfig: resolveConfig([{ content: [''] }])
})

const extractor = (content) => {
  return defaultExtractor(content).map((cls) => 'tw-' + cls)
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    extract: {
      ts: extractor,
      tsx: extractor
    }
  }
}

2. Use react-beyond, a higher-order higher-order-component lib to append the prefixes to all classnames in the entire react tree (not just for a specific component). You can have inspiration from the gallery source code: https://react-beyond.github.io/docs/gallery/classfor (Disclaimer: this is my lib.)

Exhibition