4 ms·
It's different because it's not actually setting a specific style, it's still a semantic description. You would never need to update all the "text-sm text-gray-
by tomtheelder 7y ago
It's different because it's not actually setting a specific style, it's still a semantic description. You would never need to update all the "text-sm text-gray-700" in your project to something else, that just wouldn't make any sense. You might change what "text-sm" and "text-gray-700" (I'd probably go with a more meaningful name for colors, "text-gray-primary" or whatever, but hey) actually do, but you wouldn't want to actually modify all of those to be new classes at once.
In fact, I think this scheme is a whole lot closer to what most developers actually want, which is to have composable classes that actually represent something semantic. "text-sm" is your small text. That should be consistent around your application. If you change what some of that looks like, you probably ought to be changing all of it. If you want a few elements to use a different text size, then go change the classes on those.
I really encourage you to try this out. I was somewhat skeptical, but it truly feels like a huge step forward. Going back to something like Bootstrap/Foundation or- God forbid- BEM feels incredibly painful to me now.
I also don't think separation-of-concerns is a reasonable goal. I read this article [1] after using tailwind for a while, and I agree with almost the entirety of it.
[1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
- ivanhoe 7y agoClassic question is what happens if you decide to change all gray text with the blue one? Do you end up having the class named text-gray that is setting text to blue, or you search & replace class names...
- graydsl 7y agoIMHO search & replace would be the way to go here. Otherwise no one will understand it later on. But you could also define a color called text-primary, if you are concerned that something like this would happen.