How can I remove all tailwind utility classnames after building with vite?

Question

I am building standalone components into umd.js files which I use in a different project. When developing the components everything looks just fine, but after building, when injected into my "mother project" some UI stuff aren't as intended. After some investigating I found that the issue is that the tailwind classNames are still present in the built js file. If I manually removed them, the UI looked fine.

I think it might have to do with the tailwind classnames converting to css and then in my mother project getting "treated" again as it also uses tailwind, and the classnames are still there.

I've tried to not compile the tailwind maybe so the classnames so they would only be prcessed once, but that that didn't seems to work so maybe I'm wrong, it's just the ony thing I'm able to think about.

Ideally, I'd like to completely remove all tailwind classnames after building and processing them.

I'm using vite-plugin-css-injected-by-js to compile everything into that one js file which works fine, in case any solution needs to take that into considration.

Answer 1

I don't think you can remove classes completely, though you can try this - uou can prefix all tailwind CSS classes to remove naming conflicts, build your UI components and then inject into mother project.

// tailwind.config.js

module.exports = {
  prefix: 'ui-tw-',
}

you can also purge unused classes.

// tailwind.config.js
module.exports = {
  // other configurations...
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    // Add paths to your component files
  ],
};