Tailwind Classnames Optimizer

[qqiwi92]

Goals

1. Optimize all the tailwind classes in production
2. Enhance the performance of nextjs app
3. Make a great DX by integrating this feature to nextjs compiler as a plugin

Non-Goals

Note that this is a request for a feature that simply renames classes. That is all.

Background

Recently, while checking my website in production, I noticed that the full class names were being sent to the client. I immediately remembered a section from the @daisyui website, which showed how these CSS classes can clutter the code. I decided to investigate what could be done about it and found that it was only happening in the Uglify.js tool. Variable names were being shortened, but this was happening in JavaScript, not CSS.

optimizer.1.mp4

TODO:

• Add support for all Tailwind CSS classes and arbitrary values.
• Optimize the generation process to improve performance.
• Integrate this feature into the Next.js compiler.

Proposal

Make a feature in Next.js compiler that will be:

1. Finding tailwind utility classes in the production CSS file. (I had to refrain from shortening some classes due to their consistency with variables in Next.js.)
2. Creating a hashmap of all main classes with their frequencies and generating the shortest possible code for each one.
3. Replacing the old classes with the new codes, one by one, while walking through the code.

As I am learning Rust, I hope to contribute to the development of this feature. Let's improve Next.js together!

[c0b41]

how can i try this?

[qqiwi92]

Hello, I'm sorry for the long response time. So far, I can't reveal my code, since it works unstable and often breaks styles and it's just a concept feature for now, but I'm glad that you showed interest and I'll start working on a new version of the project. The approach of "going through the final bundle and replacing styles" turned out to be unsuccessful, and therefore in the next version I will analyze JSX, add styles to the CSS file and then build.

[c0b41]

I'm currently using this next-css-obfuscator package for similar thing, but i love the try your tool and no worries