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! 👍

[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!

[SySagar]

hey , as per my knowlege the prefix doesn't get added automatically. So is there a way to auto add it?

[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'
  ]
 }

[tejas-1206]

@unional Found any solution? I'm in a similar situation as yours.

[unional]

Not really, we include the full css of the library as a workaround.

[tejas-1206]

Not really, we include the full css of the library as a workaround.

As in the full CSS file generated by tailwind ?

[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.

[aryomuzakki]

Some of the tools in this discussion or other just don't active anymore or not covering some cases, here i just made one that work for v3.4.4.

https://tw-prefixer.vercel.app/

This works for negative classes, arbitrary classes, variants/modifiers, and !important classes in html or jsx.
Classnames are crawled from tailwind docs with a few addition.

Still have some flaws cause tailwind is just that great and flexible in providing more arbitrary values / selectors, and modifiers.
Your feedback will be very appreciated

[kyr0]

Could you maybe offer the algo as an NPM package? A simple function being exported allowing to pass in code just as with the UI and having the post-processed text returned would allow for a postcss plugin to be written :)

[SySagar]

@aryomuzakki why not package this into a npm module and then we can use this my just runnning a pre script before building tailwind classess?

[nehallsharma]

This doesn't work for dynamic classes

[JeremieLevain]

I wrote a script to add prefix to all my classes of my React TypeScript project but actually it was useless because I used NextUi which does not support tailwind prefix. So, to not waste my work and my time, I prefer to share my script. I hope it will help you. The script is here if you need:

https://github.com/JeremieLevain/addTailwindPrefix/blob/f4bb0675b898509370b34102a1918b491ac1e599/addTailwindPrefix.js

I used the package "classnames" imported as "cn", so my RegExp takes it in account.