Feat: Optionally allow and generate Random classnames for Production Build

[IamManchanda]

Can't we have this Optional Feature: Allow and Generate Random classnames for Production Build

In Development we have the usual

<ul role="list" class="p-6 divide-y divide-slate-200">
  {#each people as person}
    <li class="flex py-4 first:pt-0 last:pb-0">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

whereas in Production build can't we have like this?

<ul role="list" class="jm7ct51ou84u oxn21y8yteqq x90jgrvn91n8">
  {#each people as person}
    <li class="z102js2o097j sksr9040oeme smj3ou1zrnho md7minrps0gd">
      <img class="ngovjgj6iv13 hgyl5wejmcnt adargtpr8728" src="{person.imageUrl}" alt="" />
      <div class="ckg6nujjhvcr jpqhasdgidpb">
        <p class="ykfxtnjih53x q6ae5ay2kmfv luqlvwbjl9ra">{person.name}</p>
        <p class="ykfxtnjih53x vm4f07xb333x qzwohco75cca">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

Basically, text-sm becomes ykfxtnjih53x and so on...

By the way,
If prefix configuration added

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

then

<ul role="list" class="tw-p-6 tw-divide-y tw-divide-slate-200">

becomes

<ul role="list" class="tw-jm7ct51ou84u tw-oxn21y8yteqq tw-x90jgrvn91n8">

---

Tool to generate random classNames: https://github.com/paralleldrive/cuid2 by @ericelliott

• Generates valid CSS classname with an initial character always a letter
• URL and name-friendly: No special characters
• Other Features like Security, Collision resistant, Deterministic Length, Fast and convenient "but not too fast instead secure"

---

Code Suggestion to generate Random Classnames to replace with explicit css Classnames, handles guaranteed uniqueness with Set besides being quite Collision resistant already.

import { init } from '@paralleldrive/cuid2';

// calculation for 50% odds of collision: sqrt(36^(n-1) * 26) where n is the length of the cuid
// if n = 12, then calculation for 50% odds of collision: 1,849,909,268
const length = 12; // 50% odds of collision after ~1,849,909,268 Random Classnames generation
const cuid = init({ length });
// Note: odds of collision fixed later in the code via guaranteed uniqueness with Set

function dataExplicitTailwindCssClassNamesInBuild() {
   // some logic that returns the total count and list of all tailwind classNames within the build
   // Totally dependent on this, if we can't build this function, this Idea Suggestion not much of value
  return {
     list,
     count
  };
}

function cssReplacement(explicit, random) {
  // some logic that replaces Explicit CSS Classname to Random CSS Classname
  // `divide-slate-200` => `x90jgrvn91n8`, and so on!
}

const { list, count } = dataExplicitTailwindCssClassNamesInBuild();

// O(n) 

// prefix = 'tw';

// Set for guaranteed uniqueness
const classNamesSet = new Set();
while (classNamesSet.size < count) {
   const cuidItem = cuid();
   classNamesSet.add(prefix ? prefix + cuidItem : cuidItem);
}

// CSS ClassNames Replacement
let i = 0;
for (const entry of classNamesSet.entries()) {
  cssReplacement(list[i], entry);
  i++;
}

---

Inspiration:

1. Facebook.com (Inspect Element - View Source)

2. Emotion.sh (Inspect Element - View Source)

3. Adam Wathan's Tweet, Creator of Tailwind CSS

Naming things that don’t deserve to be named is the source of virtually all CSS maintenance issues. The rest come from writing selectors that mimic your DOM structure.

~ @adamwathan https://twitter.com/adamwathan/status/1613719057014063104

[Kaikeplatinium]

This will be great for secure code

[schardev]

How does it contribute to security of the site?

[IamManchanda]

I will be honest I don't think it will help security but atleast will help to make less people copy your production code (component copy paste)

Example: anybody who is using tailwind css can currently copy my component and just add it in it's project which is so wrong ethically and also as copyright.

[KDKHD]

It can making scraping websites harder and prevent style conflicts when using a component library for example.

[tryoxiss]

I will be honest I don't think it will help security but atleast will help to make less people copy your production code (component copy paste)

Example: anybody who is using tailwind css can currently copy my component and just add it in it's project which is so wrong ethically and also as copyright.

It would be trivially easy to find the styles applied to each element and find+replace with the tailwind class, or even just copy+paste the stylesheet along with it.

[IamManchanda]

@tryoxiss - I never said it won't be possible.
I said "It will help to make less people copy your production code"
I said that it will make things harder to copy paste but I concur that it won't help security.

[Ali-TM-original]

This is a great idea hope the team looks into it

[polidario]

This is one of the things I'd also like Tailwind to include.

[lucazsunion]

upvote

[IamManchanda]

Thank you guys for the upvotes, I think that this feature will help us to make less people copy our production code (component copy paste)

Example: anybody who is using tailwind css can currently copy my component or scrape my page altogether and just add it in it's project which is so wrong ethically and also as copyright.

This shouldn't be happening and we need to do something about it and this feature request according to me makes sense, I rest my case and will let @adamwathan @tailwindlabs decide 😃

[danieloprado]

I think this is not only for copy/past. I'm building a lib with tailwind and during the build time I discovery that I need to add prefix on tailwind otherwise if the consumer has tailwind too it will override my lib's css, now I have to redo all my classes because prefix affect dev too.

[mybearworld]

This is something that should probably be a PostCSS plugin, not implemented in Tailwind directly. There's https://www.npmjs.com/package/postcss-obfuscator?activeTab=readme, but I haven't tried it.

[drakgons]

n4j1Br4ch1D/postcss-obfuscator#15

For those who are looking for an alternative here in this thread, leave a temporary solution

[viniciusgrando]

Hey guys! Any new alternative for generating these random classes?

[imkarthikk]

Unfortunately, nothing yet I guess. I'm planning to build my own thing here. :/

[AleksIralda]

Are you planning build your own Tailwind plugins to "obfuscate" classes? Where we can follow this build? Any ETA?

[igoyalsamarth]

I made something for this, although still new and kinda, raw should be able to get your basic jobs done

RANTAIL

[igoyalsamarth]

I made something to solve this issue, although is kinda new and raw, I'm sure will get better and more firm with time,

presenting, RANTAIL

[Red-Killer]

Do not use this tool, it will destroy your entire codebase. I had to recover mine using backups!

[sovetski]

Do not use this tool, it will destroy your entire codebase. I had to recover mine using backups!

I hope that you are using GIT...

[Red-Killer]

Do not use this tool, it will destroy your entire codebase. I had to recover mine using backups!

I hope that you are using GIT...

Yeah

[igoyalsamarth]

Do not use this tool, it will destroy your entire codebase. I had to recover mine using backups!

Hey! @Red-Killer Thank you for trying Rantail!

In case you missed it, I mentioned in the docs that it is preferred to be used in a cloned environment. I hope you will read through the documents and give it another try.

I am still working on fixing/skipping this formality anyway, thank you!

[sovetski]

Hi there, any updates please? Maybe it is something which can be included in v4?

[JacobAlexander]

I'm interested too. Any updates?

[pavelbe]

I'd like to know as well. Are there any updates?

[abdullah-al-mridul]

very good idea

[asotog]

this is really helpful in case of some injected scripts for plugins that can overwrite the website css accidentally e.g contact center chats, lead forms ...

[Mardoxx]

TailwindUI does this to "protect" their components https://tailwindui.com/components/ecommerce/components/order-history so the workflow exists.