Use with Astro + Tailwind ?

[Veen Zhao]

I'm using Astro + TailwindCSS to build a website,how could I use this plugin to obfuscate Tailwindcss class names?

[Najib Rachid]

Hi, Thanks for Asking.

I got it running with Astro + TailwindCSS :

Fork this Replit:

https://replit.com/@n4j1Br4ch1D/postcss-obfuscator-astro-tailwindcss

How it's done:

1- install postcss-obfuscator:

# npm
npm install postcss-obfuscator --save-dev
# yarn
yarn add postcss-obfuscator --dev

2- add tailwindcss:

# Using NPM
npx astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind

3- create src/css/input.css and import tailwindcss

@tailwind base;
@tailwind components;
@tailwind utilities;

4- create postcss.config.cjs (Astro already comes with PostCSS included as part of Vite). put this minimal configuration used in my demo or go to the readme for more:

//postcss.config.js 
module.exports = {
  plugins: [
    require('postcss-obfuscator')({
    /* options */
    srcPath: "src", // Source of your files.
    desPath: "out", // Destination for obfuscated html/js/.. files.
    extensions: ['.astro'],
    cssExcludes: ['css/input.css'], // Files and paths to exclude from css obfuscation.
    formatJson: true, // Format obfuscation data JSON file.
    })
  ]
}

5- add this npm script's to package.json

   "tailwindcss": "npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css",
   "postcss": "postcss src/**/*.css  --dir out/css",
   "obfuscate": "npm run tailwindcss && npm run postcss"

6- Install postcss-cli:

npm i -D postcss postcss-cli

7- now to obfuscate, in your console run :

 npm run obfuscate 

which will first run Tailwindcss to generate an output.css for all classes used in your project.
then it runs Postcss to generate obfuscated JSON file, with obfuscated files in an output folder.

Note: postcss is automatically run with Astro so stop Astro first then run the obfuscation command, otherwise it's preferred to create a customer postcss script to run only when you want to obfuscate in production see the readme for more details. and feel free to contact me again.

[Veen Zhao]

Thank you for your detailed answer, I tried it and it worked fine, thank you for such a great tool.👏

[Gaurav Khanna]

Hi, super huge thanks for making this and supporting Astro!!

Question: How does this work with different astro modes and related to hashed style files. I will test this further but i wanted to start a conversation about this. You’ve selected out as the destination dir but it’s typically dist.

That’s making me think this creates separate files and im curious how you get astro to point to those files or maybe i’m misunderstanding.

Unrelated Q: How difficult would it be to hash class names with a seed value in a .env, and then shorten down to the lowest length possible. Google does this, as in, the out put starts with a,b,c, etc, eventually getting to aB, etc. Just reduces the size a bit and if it’s a lot of work not worth it. But looking at the code with a simple hash it looks like it should be do relatively straight forward. When i get a chance i’ll take a closer look. 🙏