A tool for obfuscating Tailwindcss classes

[sonofmagic]

Preface

tailwindcss is an atomic class-first css framework that is very popular nowadays. Its semantic class names enable front-end developers to intuitively write and maintain styles for elements.

This intuitiveness, however, can sometimes be a bit of a nuisance. Sometimes we don't want users or outside developers to be able to visually observe the style of all elements.

For example, we visit https://tailwindcss.com , then open the developer tools and inspect the elements. Instantly, the layout and style of all those elements on the page can be guessed without even looking at the style panel on the right.

So, for the sake of making it impossible for others to visualize the style of an element in a production environment, we need to obfuscate the atomic classes generated by tailwindcss.

Solution search

When I first looked for a solution on the web, I found mangle-css-class-webpack-plugin, a webpack plugin designed to compress and obfuscate class names in html,js,css.

However, I had trouble trying to use it to obfuscate class names in tailwindcss, at first I couldn't pass in classNameRegExp and other parameters accurately, which led to my webpack build results being either completely wrong or not at all as expected, then I found a issue#10 that seemed to solve the problem. which seemed to solve the problem, but was extremely unmaintainable.

In addition, directly through the regular to modify the js literal amount of the way, it is easy to cause a small range of misunderstanding, resulting in the whole project does not run up to report errors.

So I started to think if there is any way to precisely obfuscate the class name of tailwindcss, and here is my solution.

How to implement obfuscation

First of all, in order to be more precise with the matching, I decided to implement it from the following point of view

1. to find exactly how many classes are generated by tailwindcss, I need to get the context of tailwindcss at runtime.
2. abandon regular matching and use AST across the board, i.e. use prase5 to parse and transform html, babel to parse and transform js, and postcss to parse and transform css.

To achieve the first point, I designed and wrote an npm package: tailwindcss-patch to get all the generated class collections.

To achieve the second point, I wrote a unplugin plugin: unplugin-tailwindcss-mangle, which is a webpack/ vite plugin that modifies html, js, and css to obfuscate all class names during packaging.

How to use them

So how do you use them? It's as simple as the following steps.

1. Install these 2 packages

<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch

2. Execute the script

npx tw-patch

3. Add the prepare script to your package.json

  "scripts": {
    "prepare": "tw-patch"
  }

4. Register this plugin

Here is an example of webpack and vite

webpack

// esm
import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
// or cjs
const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
// use this webpack plugin
// for example next.config.js
/* @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true.
  webpack: (config) => {
    config.plugins.push(utwm())
    return config
  }
}

module.exports = nextConfig

Here I use nextjs as an example, but of course vue.config.js is similar, register utwm() into webpack and then package the build and preview it to see the effect.

vite

// for example: vue vite project
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), utwm()]
})

Then execute the script:

# generate bundle
<npm|yarn|pnpm> run build
# preview
<npm|yarn|pnpm> run preview

Effect Preview

<!-- before -->
<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
<!-- after -->
<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>

Of course, you can also customize the generated class name, check documentation for more configuration options.

Errors and feedback

If you encounter any problems or questions during use, or want to communicate, feel free to raise issue with me.

Thanks.

[maietta]

npx tw-patch

This is terrible. You are suggesting people install and use a tool that introduces vulnerabilities. 7 in fact, as of this writing.

[sonofmagic]

tw-patch is a open-source tool for exposing tailwindcss context at runtime.
Source Code
otherwise, we are not able to get utility class generated by tailwindcss.

I wouldn't be patching it if I didn't find another way...

[sonofmagic]

I have been struggling with how to get the tailwindcss context in the webpack plugin.
After I learned the code and behavior of ts-patch I was inspired to implement tailwindcss-patch.
The behavior of tailwindcss-patch is just to add a few lines to the tailwindcss source code to expose the context. If tailwindcss has a way to directly obtain the runtime context in the future, then this package is naturally unnecessary.

Refers:
https://www.npmjs.com/package/ts-patch

[Jaydeep189]

Not Working

I am using Astro, which is on Vite

It is not working, I have followed the steps you mentioned

vite config

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import preload from 'astro-preload';
import svelte from "@astrojs/svelte";
import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'

import sitemap from "@astrojs/sitemap";


// https://astro.build/config
export default defineConfig({
  site: 'https://speedy-assignment.com/',
  integrations: [preload(), tailwind(), svelte(), utwm(), sitemap()];

package.json

{
  "name": "speedy-assignment",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "prepare": "tw-patch",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/sitemap": "^2.0.1",
    "@astrojs/svelte": "^3.1.0",
    "@astrojs/tailwind": "^4.0.0",
    "@ernane/svelte-star-rating": "^1.1.3",
    "@splidejs/svelte-splide": "^0.2.9",
    "astro": "^2.9.6",
    "astro-preload": "^1.1.2",
    "postcss": "^8.4.27",
    "postcss-obfuscator": "^1.6.0",
    "svelte": "^4.1.1",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "@iconify/svelte": "^3.1.4",
    "astro-icon": "^0.8.1",
    "tailwindcss-patch": "^1.2.7",
    "unplugin-tailwindcss-mangle": "^1.2.7"
  }
}

[sonofmagic]

Yes, there are some issues with SSR apps right now, and it's only working on SPA apps at the moment.

[Jaydeep189]

Are there any workarounds for this using SSR?

[clarkhacks]

I'm currently using the same setup and find this interesting. Following.

[sonofmagic]

Version 2.0 will be released soon, which will fix issues in SSR scenarios.

[cgxxv]

@sonofmagic This is maybe not a good solution. I think the best solution is maybe like classnames. This package works well for custom css (not tailwindcss), because it could generate this, eg: tw-eb1ac3dxd. Like this.

<!-- before -->
<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
<!-- after -->
<div class="tw-eb1ac3dxd"></div>

This solution may need a lot of work. And actually I can't find a solution for converting tailwindcss to the hashed style class.

[sovetski]

This kind of tools should be implemented by default on Tailwind in my opinion, maybe in v4?

[kissu]

There is no point in obfuscation so no, I hope it will not be part of the official package.
Total waste of time and energy.

[Khaledinges]

When performance does not matter, totally agree Otherwise very important !

[kissu]

Nah, still shit IMO. Don't see the point at all.
Web is free mostly, let's not put paywalls and shit on everything come on! 🤷🏻‍♂️

[Strangersknowme]

@kissu Yes I agree that obfuscating is not necessary. But this type of package clearly has a use case when you are building some portable components which can drop into any existing codebase. I am personally facing this problem with my project. Tailwindcss classes are clashing with the existing classes of the codebase.

A real world example would be something like a feature button or support bot or something being added to an ecom store, it is very likely that the store uses some classnames which are exact same as tailwindcss classes but defined completely differently so it is going to mess up the page's layout. I have faced this. This solution is incomplete that the OP has proposed since it only changes the classnames without copying over the functionality of the tailwind classes defeating the entire purpose of the tailwind classes. Atleast this package should be able to change the class names with the tailwind functionality but it only does the name change. or maybe I have setup something wrong in my webpack which is making it behave as only changing the classnames and not have the tailwind functionality.

But yes, this is a much needed package.

[kissu]

@Strangersknowme obfuscation and namespacing are 2 totally different things.

You can totally set a custom prefix to avoid any conflicts.

[sntran]

For example, we visit https://tailwindcss.com/ , then open the developer tools and inspect the elements. Instantly, the layout and style of all those elements on the page can be guessed without even looking at the style panel on the right.

This is a weak argument. You are already looking at the developer tools. The DOM tree and the Styles panel are next to each other. You want to hide the actual class names, but the resulting styles are still there.

Not really sure why you want to hide either. Tailwind class names are pretty much mapped to individual styles.