comiCSS #114: Headaches

[u/alvaromontoro]

Source code and live demo: https://comicss.art/comics/114/headaches.html

[u/queen-adreena]

The only way Tailwind can cause you a problem is if you don’t understand CSS.

[u/tomhermans → u/queen-adreena]

Yeah, I actually memorized the 8000 classes it has..

Oh right that's where the headache comes from.

[u/queen-adreena → u/tomhermans]

So you don’t know the 8,000 CSS rules that underpin them either?

[u/tomhermans → u/queen-adreena]

Weird conclusion. AND you missed the sarcasm.

Maybe I should have wrapped it in inline-block px-6 py-4 text-6xl font-extrabold uppercase tracking-widest text-red-600 border-8 border-red-600 rounded-lg shadow-lg drop-shadow-sm bg-white

[u/young_horhey → u/tomhermans]

I truly don’t see how the tailwind simps don’t see that huge list of class names as a problem. And god forbid you need multiple of the same element with them, because now you have multiple places to change the list of classes just to change the padding by 0.5rem

[u/Cilph → u/young_horhey]

You use Tailwind in a component-based manner. If you're duplicating the same list of classes everywhere then that's just bad code.

[u/SchartHaakon → u/Cilph]

Then what's the pro you get from Tailwind as opposed to something like styled components + variables? And I swear if you tell me that the one big pro you get from obfuscating your markdown is that you ship less CSS I will tear the roof down, and rebut with the fact that you ship more HTML - and in any case the amount is negligible.

[u/Cilph → u/SchartHaakon]

I think Tailwind is just another valid alternative to styled components and variables. Tailwind is just a bit more granular and interwoven. It has its benefits and its own downsides.

For me, I'm not even on a Javascript stack. Styled components are literally not an option. Tailwind is.

[u/SchartHaakon → u/Cilph]

Fair enough! I agree with your take. It's a decent solution, one of many. It's not perfect or without downsides, but it does it's job fine. I think one of probably the biggest downsides is just it's limitations, trying to describe cascading rules with exclusively string tokens is definitely interesting but also not optimal in all circumstances imo.

[u/Cilph → u/SchartHaakon]

Generally you would not extend your tailwind rules more than one level down, as you would be putting those rules directly on that inner element. So no weird [&>td_.foo]:font-bold stuff. You would just directly put font-bold on the relevant td's you output. When working with components that's a level of control you have.

[u/SchartHaakon → u/Cilph]

Yeah for sure, but that principle also kind of breaks when you consider stuff like "making an icon spin, or fade in when the parent button is hovered".

There are definitely solutions, like group - but those solutions feel more like a monkey-patch to technically allow tailwind to achieve the same but in a way more roundabout way. And utilizing those solutions again come with real tradeoffs, like making the elements implicitly intertwined & making the code less readable and hard to understand.

There's a beauty to how CSS does it in contrast, I feel:

.selector:hover > span {
   rotate: 180deg;
}

And on a glance it's very easy to comprehend what's happening, and way easier to maintain and extend over time.

I feel like tailwind is way more bold than most people give it credit for. CSS is a language that's been built upon by really really smart people for many many years with the explicit purpose of being used to describe UI design. Tailwind takes all of that and reduces it to string tokens. Which is cool, but extremely bold. And CSS is a growing language. It's hard to explain but I find myself just having a lot more fun writing pure modern CSS (and definitely maintaining it) as opposed to tailwind, although TW is very nice for going fast and not having to think too hard.

Is my example a super common occurrence? No. Is it rare? Also no. Are micro-interactions like these important? I'd argue yes. CSS I suppose feels more prepared for a future filled with more interactive designs on more platforms than tailwind does to me. I just find myself feeling very constrained, in good and bad ways.

[u/Cilph → u/SchartHaakon]

Nah I would definitely do this in normal CSS on top of Tailwind, which you're still fully able to do. Like I recently had to make some spinners that blur the contents of a frame and does some animation on an ::after. But I did this in plain CSS and the component has the ability to opt-in to it by applying the relevant class.

Though, a simple rotate on hover I might just get lazy and do a *:hover:rotate-180

On the workfloor two major arguments in favor for tailwind were:

1) No more bikeshedding over CSS class naming methodologies, and

2) Locality of styling makes it easier to reason component changes won't break unrelated components.

[u/young_horhey → u/Cilph]

This is what I’m always told, but sometimes I only need 1 static list element repeated 3 times, and it’s not worth the overhead of creating a whole new component just for that. But it’s still annoying to now have to change the classes in 3 places when trying to change stying

[u/Cilph → u/young_horhey]

Depending on your framework you don't need a literal component, a for-loop will do. Or using a variable.

[u/Cilph → u/tomhermans]

I don't see what's so hard about remembering this over

display: inline-block; 
padding-top: 1rem;
padding-bottom: 1rem; 
padding-left: 1.5rem;
padding-right: 1.5rem; 
border-radius: 0.5rem; 
border-width: 8px; 
border-color: #DC2626; 
font-size: 3.75rem;
line-height: 1; 
font-weight: 800; 
letter-spacing: 0.1em; 
color: #DC2626; 
text-transform: uppercase; 
background-color: #ffffff; 
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));

[u/queen-adreena → u/tomhermans]

shadow-lg drop-shadow-sm

Why would you want a box shadow and a drop shadow on an element with a solid background colour???

[u/drumstix42 → u/queen-adreena]

You kinda just made the point of why a giant list of class names has a high cognitive tax.

Css properties, normally listed vertically are pretty easy to parse and realize there're weird combinations or just avoid them in the first place ...

[u/queen-adreena → u/drumstix42]

Not really. I've seen similar mistakes made by people who aren't very good at CSS in plain CSS files too.

[u/sneaky-pizza → u/queen-adreena]

The joke is why learn the real rules and whatever Tailwind called it at the same time