Posted by mpweiher 1 day ago
My favorite is when colleague A broke something from colleague B, who fixed it but broke sometimes from me, and I fixed that and broke what colleague A did. The process repeated once more and it landed again on my desk, where I said wait a minute, I've been here already. We were than able to fix all three things at the same time.
So it's difficult to keep track of everything.
next thread
<button class="bg-blue-600 text-white px-4 py-2 rounded">
<button style="background-color: var(--color-blue-600); color: white; padding: 8px 16px; border-radius: 4px; border: none;">
<button class="bg-blue-600 hover:bg-blue-500 active:bg-blue-700
text-white px-4 py-2 rounded transition-colors
focus:outline-none focus:ring-2 focus:ring-blue-400">
Even more interesting with Tailwind, a div with dark mode and responsive styles:
<div class="
bg-white dark:bg-zinc-900
p-4 md:p-8
rounded-xl
shadow-sm dark:shadow-none
border border-zinc-200 dark:border-zinc-700
">
Now your first instinct might be to "that’s unreadable", but keep in mind HOW you actually read and write this code. You’re not actually reading it to understand what it does like you do with iterative code. You see how the browser renders it, and you just adapt the code. Tailwind code is mostly write-only and maintained by viewing what the component looks like. This code doesn’t need to be reusable either, the whole component needs to be. The Tailwind code inside is unique.
I think this helped me finally understand the chasm between tailwind proponents and me. I just don't think I'll ever be part of the "keep painting each room a slightly different shade until it looks right" camp, when there's the "you can buy all the same color paint ahead of time, and even have some left over for the next five rooms you build" option right there.
Yeah, tailwind as write-only code definitely tracks. I guess some people like that. Not my bag though.
You’re still not getting it. That’s NOT what Tailwind is, because Tailwind works in a design system way, so when you use text-sm or bg-sky-400, you’re using variables that can be configured to suit your needs and keep a consistent design everywhere. Tailwind defaults and configurability played a huge part in its success.
E.g. how do you style a child on parent hover with the style attribute?
How I refactored my rats nest of CSS back to tailwind.
Separating HTML and CSS into different files is just like separating a bunch of methods/functions into different files, or splitting one monorepo into git submodules. Yeah, it sometimes makes sense, but if you're doing it for the sake of separating things then just stop.
I think the only point of Tailwind is to make front end devs realizing how much separation of concerns is misunderstood and misused as a dogma. Once you realize that you can ditch Tailwind if you like.
What you see in reader mode is the content layer. HTML is a part of the presentation layer.
Building an application you use this as your utility layer that gets you 80% and for the rest you use an application specific custom css to write the parts where css is the best.