Implement attribute selectors in Tailwind

[deslunes]

Hello, I do love Tailwind and its concept because it feels more straightforward to style components directly on the DOM rather than naming classes and writing selectors that may not be valid when you refactor the structure of the DOM.

My issue is that, in a lot of cases, I come up with 20 to 30 classes per DOM. It's not a problem when it comes to performance because the classes are reusable, but it becomes hard to maintain this kind of cases. DOM contains now the layout structure, the data in it, and the style; so the whole thing becomes cluttered/bloated.

I like inline style, but dislike how every classes I use are unorganized in a single attribute. So I searched for alternatives and found that there are CSS selectors for targeting attributes with specific values, it's even possible to mimic the class attribute's behavior for other attribute.

For example, this selector [flex="flex-col"] would target DOMs that have the attribute flex with a value of "flex-col" but if you add other "classes" to it, it won't be targeted. So we have the ~= syntax. This means that `[flex~="flex-col"] will target every DOM that has an attribute flex that has in one of its keywords "flex-col", just like the class attribute.

This code:

<button
   class="relative after:font-Inter bg-amber-50 text-amber-500 py-1 px-2 rounded-lg transition-all hover:bg-amber-100 hover:text-amber-600 hover:rounded after:content-['_↗'] after:relative after:left-0 after:bottom-0 after:text-amber-500 after:transition-all hover:after:bottom-0.5 hover:after:left-0.5 hover:after:text-amber-600">
Click me!
</button>

becomes this:

<button
   class="relative after:font-Inter bg-amber-50 text-amber-500 py-1 px-2 rounded-lg transition-all"
   hover="bg-amber-100 text-amber-600 rounded"
   after="content-['_↗'] relative left-0 bottom-0 text-amber-500 transition-all"
   hover_after="bottom-0.5 left-0.5 text-amber-600"
>
Click me!
</button>

The great thing is that, as long as you tell React or any framework what attributes are allowed, this code is valid and does not cause errors. It will be shipped to the browser successfully.

From my testings, Tailwind does detect the classes in other attributes and will ship the code related to the classes detected in the DOM, even if they are not in the class attribute. But it won't work, because Tailwind classes are not thought for that, their selector is still .whatever not [whatever~="whatever"].

I think it's great that CSS has a native feature to select DOM for their attributes, and has a syntax to mimic the class attribute's keyword behavior for other attributes, and I think it's a great idea because it's a non-breaking change, it adds a new way to write tailwind code without making the older code obsolete.

I'm a junior and I never looked in the Tailwind codebase so I can't understand how much effort it would require, but it makes the code so much more readable.

Sorry for my bad english. Thanks for reading, have a nice day.