auto add prefix

[IRediTOTO]

Hi, I love Tailwind 💯
Is there any tool can help us add prefix to class name Tw?
I just add a prefix tw- to use with a webpack plugin (it need to find classname by regex)
I tried to search in my html code and there are >800 class attr :D that mean i must add thousand of tw- to class.

[simonswiss]

Hello @IRediTOTO 👋

If I understand your question correctly, the prefix option in the Tailwind config file is exactly what you're looking for!

In your config file, define a string you want to prefix all Tailwind generated classes with:

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

This will prefix all Tailwind classes with tw-.

bg-red-100 will become tw-bg-red-100, etc.

Hope this helps! 👍

[PositiveUser]

cool, you can try this too https://github.vue.tailwind-prefix.cbass.dev/

Thank you very much. Unfortunately, this did not work for classes with arbitrary value.

[Folyd]

cool, you can try this too https://github.vue.tailwind-prefix.cbass.dev/

Great tool! Can you also support arbitrary values? Thanks.

[Parth909]

cool, you can try this too https://github.vue.tailwind-prefix.cbass.dev/

Great tool ! Thank you for making it.

[Parth909]

cool, you can try this too https://github.vue.tailwind-prefix.cbass.dev/

Great tool! Can you also support arbitrary values? Thanks.

You can do Search (Ctrl + F) in your editor -> turn on Regex Option -> use this Regex [\w]*-\[[\w|.]*\]. This will search for JIT styles (arbitrary values)

[nischalj10]

Lifesaver!

[simonswiss]

If you define a prefix: 'tw-' in the config file, and use the Tailwind Intellisense vscode extension, you'll have autocomplete suggestion for each class with the prefix applied 👍

But like you said, there are probably situations where this is not helpful (classes are already written in the HTML/JSX), and in that case you need to come up with a clever approach like your changeForm transform function.

[m-ostadi]

You can use a regex like the one I wrote in this gist to find and replace all existing class with prefixed version.

[Parth909]

You can use a regex like the one I wrote in this gist to find and replace all existing class with prefixed version.

This doesn't exist anymore

[IRediTOTO]

prefix
You want this?

[Parth909]

prefix You want this?

Yep this is what I'm using now

[m-ostadi]

You can use a regex like the one I wrote in this gist to find and replace all existing class with prefixed version.

This doesn't exist anymore

Sorry i changed my username on github, this is the correct link:

https://gist.github.com/m-ostadi/489408713b60561a2f3e92acb1c0c191

[restieauxbro]

When I wanted to add a prefix inav- to all of my classes in the markup, I used this node script.

const fs = require('fs');
const path = require('path');
const glob = require("glob");

const rootDir = "path/to/your/repo";
const classNameRegex = /className=["']([\w\s-]+)["']/g;

glob("**/*.{js,jsx,tsx}", {cwd: rootDir}, (er, files) => {
  files.forEach((file) => {
    const filePath = path.join(rootDir, file);
    fs.readFile(filePath, 'utf-8', (err, data) => {
      if (err) {
        console.error(err);
        return;
      }
      const result = data.replace(classNameRegex, (match, p1) => {
        const classNames = p1.split(" ");
        const prefixedClassNames = classNames.map((className) => {
          if (className.startsWith("inav-")) {
            return className;
          } else {
            return `inav-${className}`;
          }
        });
        return `className="${prefixedClassNames.join(" ")}"`;
      });
      fs.writeFile(filePath, result, 'utf-8', (err) => {
        if (err) console.error(err);
      });
    });
  });
});

This will allow you to change all of your already written classes to give them the tailwind prefix you want.

[mnzsss]

Great tool ! Thank you for making it.

[hereisfahad]

@restieauxbro Thanks for this solution 🙌 but this does not work for conditional classes. Is it possible to update all the strings within the JSX or, even better, update the classes by checking if they are valid Tailwind CSS classes, like performing some form of parsing on the JSX?

[juliushuck]

Worked for me with the following glob version

"glob": "^7.2.3",

[pedroapfilho]

It would be nice to add this to the prettier plugin, or add it to a library that we can use to auto-add the prefixes

[unional]

The prefix config doesn't work when it involves shared libraries.

I have a MFEs project which each MFEs has their own prefix. The shared library can't define a prefix that works for every MFEs.

That's why a bundle-time plugin with webpack, rollup, or even ttypescript would help.

Also, another thing is about tree-shaking, which can only take effect during bundling.

I don't know if there is a way to make it work in Tailwind config:

module.exports = {
  // this doesn't work when `some-shared-library` not using the same prefix
  prefix: 'abc-',
  content: [
    './src/**/*.tsx',
    // this will get all css classes used in the library, not tree shaked.
    './node_modules/some-shared-library/dist/**/*.js'
  ]
 }

[nabeel-shakeel]

You can use this tool to covert your classes into prefixed ones. Covers all the cases of latest tailwind
https://tailwind-prefix-tool.netlify.app/

[kyr0]

Thank you, great tool!

[pedroapfilho]

It would be great to have it as a prettier plugin!

[otherperspectives]

Is this still working? I have tried using it and it did not work as expected..

[pedroapfilho]

It doesn't have some new properties, but it still works

[kaminskypavel]

it would be nice if can have a codemod for that

[pedroapfilho]

codemod, or a prettier autofix

[spa5k]

A build time codemod will be very good and necessary.