NextJS/React: Is there way/tool to combine classes into single obfuscated after build?

[fakeman2332]

I want to combine all classes into obfuscated like mt-4 flex flex-col sm:flex-row gap-4 to asdfg123 after build.
I'm using Next 15 (app router).

[fakeman2332]

I've tried https://github.com/soranoo/next-css-obfuscator, but it obfuscating every class and not merge them after all

[BenjaminGrayDev]

You can define a custom class in your CSS file and include all these Tailwind classes:

.asdfg123{
@apply mt-4 flex flex-col sm:flex-row gap-4;
}

[fakeman2332]

I don't want do it manually.

[fakeman2332]

I need to clarify what I’m looking for. After the build process, I want all classes to be merged into a single one.

During development, I use a class like mt4 flex flex-column sm:flex-row <etc>. But once I run npm run build, the element should retain only one class that combines the properties of all the original ones.
For example, flex flex-column sm:flex-row should transform into asdf123:

.asdf123 {
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  .asdf123 {
    flex-direction: row;
  }
}

[dvzrd]

If you have scoped styles using css/sass modules you can achieve this pretty easily just by enabling style modules during your build process using postcss (or a similar build tool) - this would require you to have a separate stylesheet and you will need to create classes to apply those utilities to (which you probably don't want). If you're talking about inline html classes then you will need to create your own build script that processes the tailwind utility classes into unique class ids. You won't get this out the box with next and tailwind, need to go low level with your build scripts and use a combination of build tools.

I guess I would have to ask what reason do you have for doing this and is it worth your time?

By default, your dev and build scripts will either run a next build command or a tailwind command so you will need to replace those with custom build scripts that can point to a scripts dir file(s) that you can chain together into your own build command/process. Basically you will need a script to process tailwind utilities inside each of your classNames into class ids in a similar way that css/sass modules handles it, except you will be sorting through jsx/tsx files, looking for className attributes inside each html/react element.

It's a good use case for a minification plugin that can be useful for prod builds - I wouldn't want this in my dev build because it would make it hard to know which tailwind util I need to remove/replace. I don't really see a point to it unless the issue is when you look at the css in dev tools you get a long list of utilities for each style rule instead of it being nested inside a single class. If that's the case, I think it would be easier and more useful to just use tailwind layers to create your own components and utilities instead.

Maybe this will help with your question: https://medium.com/@qq1324318532/a-tool-for-obfuscating-tailwindcss-classes-d1fec1c1ad1b

[fakeman2332]

@dvzrd very good point and explanation. thanks