This is a really cool idea. The use of custom attributes without `data-` before it makes me a little nervous. Is that a concern here? I saw `project` being used on elements and if that's officially used for something eventually can it muddy things up?
This takes away so many of the criticisms I see in this thread. The issue with Tailwind, and my only minor criticism, is just long, unreadable, not easy to deliminate lists of classes. This very easily takes care of that (and I use it for more complex class lists daily)
If you want to change the padding in a project that's using Tailwind you only need to look for classes that begin with `p` followed by a letter for a side or x and y for an axis (same is true for margins). Those are by far the most cryptic classnames and by the time you finish reading this sentence you got it.
In a project where you have to name everything semantically you don't know where the hell the padding is going to be.
It's amazing for long term maintainability and quick prototyping. There is a lot of value in classes that does one thing well.
Been wrinting CSS for 15 years, switched to Tailwind 2 years ago, just for reference.
I'm just saying if you want to target something on an element it needs to be set in an attribute and classList takes care of this.
I use classes strictly for styling. I change these styles by adding and removing class names and classList handles it very well without me needing to read the data attribute, make it an array, manipulate it, join it and update the attribute.
I wasn’t aware of the tilde attribute selector. Still a lot more characters, though.
The classList api is still a lot more suited for this than dataset. None of the modifications done through the dataset api would reflect in the DOM and be readable by CSS unless you were to convert the list to a space separated string and explicitly set the attribute. classList handles all of this for you.