Why not use custom attribute rather than class?

[J-Cake]

Just a quick thought, In order to specify a list of utilities on an element, why not use a custom attribute instead of classes, they are just as easy to use in CSS (maybe they require a few more characters but that's why there's JS under the hood, right?)

So for example if I wanted an element with a 2nd degree border radius, I would specify it like this:

<div class="rounded">Hi</div>

If I now know that I need to select that element in JS later, I can add another class or ID to it.

<div class="rounded sample-div">Hi</div>

But as is the nature of Tailwind, the classlist quickly gets long. Is it possible for me to compile TailWind to allow me to use a different attribute?

<div class="sample-div" tailwind="rounded">Hi</div>

The only thing that would stop is the ability to use JS's HTMLElement.classList. But TailWind can create a custom function to extend the HTMLElement with a function to add tailwind classes

HTMLElement.tailwindStyle

It would be used in the same way the classList would be.

Just curious. Thanks for any input

[PositiveUser]

TailWind can create a custom function to extend the HTMLElement with a function to add tailwind classes

Do not change native JS object.

[J-Cake]

If Tailwind is installed and available, what's the issue with it?

[PositiveUser]

“The native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.”

- MDN

[merchako]

Even if the community thinks this is a bad idea, I'm thankful that @J-Cake posted it because I had the same question. Especially since I'm adding Tailwind to a pre-existing project, it would have been useful to mentally separate traditional classes from Tailwind classes.

The Tailwind plugin for Prettier will sort the non-Tailwind classes to the front of the class string, making them easier to identify.

- <div class="p-3 shadow-xl select2-dropdown">
+ <div class="select2-dropdown p-3 shadow-xl">
  <!-- ... -->
</div>

Any custom classes that don’t come from Tailwind plugins (like classes for targeting a third-party library) are always sorted to the front, so it’s easy to see when an element is using them: