Live data from Hacker News

CSS's problems are Tailwind's problems

colton.dev

21–30 of 179 posts

Re: CSS's problems are Tailwind's problems

#21
I recently started using it for a SPA I'm building and quickly realized, I don't care if it's the worst, or not. It works, and it works well.

The best part? I can just tell AI what I want, and it spits out exactly what I want, even all the goofy framer-motion animations. If something's off, I can tweak it without ever opening a CSS file.

Massive respect to the devs behind tailwind. I don't care what your blog post says, you'll have to pry it from my cold, dead hands.

Re: CSS's problems are Tailwind's problems

#22
post #4

If you go even minimally outside the beaten path, the tailwind CSS declarations can mutate into a frankenstein monster that makes regular CSS look like a friendly, cute koala Example: https://www.nikolailehbr.ink/blog/realistic-button-design-cs... shows an "old fashioned", 90's are back-in-vogue, 3d button. Tailwind CSS for it becomes After I got eye-strain and headaches after taking over maintenance of a tailwind ba…

Is that more or less verbose than

  button {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0.375rem;
    border: 1px solid #0a0a0a;
    background-color: #171717;
    padding: 6px 12px;
    color: #f5f5f5;
    box-shadow:
      inset 0 1px #525252,
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
  }
  button:hover {
    background-color: #262626;
  }
  button:active {
    background-color: #0a0a0a;
    box-shadow:
      inset 0 1px #262626,
      0 0 #0000;
  }
Sure, separating the code into a CSS file means it's not in your HTML but that doesn't mean it doesn't exist. Similarly you can move the button out to a component and reference that if you want to hide the code.

I find it easier to locate things in the HTML broken into components because the style is co located with the object being styled. I find it much more difficult to navigate through CSS and find out what classes are doing what exactly. Especially when a project grows over a long period of time and different people write CSS differently (and throw a few !important's in to make sure they can meet a deadline).

Each to their own though.

Re: CSS's problems are Tailwind's problems

#23
Tailwind was better for me before AI, and it’s WAY better for me with AI.

Claude can write CSS and HTML together in my templates, without needing to reference back and forth. It’s very, very good at writing tailwind.

Perhaps Tailwind is the worst of all your worlds, but it’s better than Bootstrap and Bulma and all the other stuff I genuinely tried.

I don’t get why people can’t just let Tailwind users be happy. Like, I’m not writing blog posts about how terrible it is to write HTML in JavaScript for React…I just don’t use it. Live and let live!

Re: CSS's problems are Tailwind's problems

#24
I'm surprised that the official Tailwind docs recommend putting the `font-medium` class (i.e. `font-weight: medium` in CSS) on every child element of that and using multi-cursor editing to change them all simultaneously. `font-weight` is inherited, meaning that they could just add it once to the element.

I dislike Tailwind and don't use it, but I wonder how many papercuts like this come down to just not knowing CSS very well.

Re: CSS's problems are Tailwind's problems

#25
post #10

Earlier quoted context omitted.

I used to be against Tailwind. Now that I've used long enough I can tell you that code is perfectly fine. I can read it and easily modify it. You can comment it out if you care After

Reading though this, I really have to wonder how this is better than After Why make a bunch of css classes when it looks to me like the "style" will be roughly the same amount of code and readability.

You can override classes, not so much inline css.

Re: CSS's problems are Tailwind's problems

#26
Tailwind is magical to me for one reason alone:

I can now design.

As someone who spent 20+ years as a jack-of-all-trades / full-stack developer, specialising in back-end and database skills, this has largely been... confusing.

Before, I couldn't even make plain text work. Totally hopeless, I didn't have the eye for things.

Now though, now I help my kids lay out their homework to be more visually pleasing. It's bizarre.

(caveats: while I can put together a visually pleasing and consistent websites, I'm not saying that design is easy, nor that designers don't have talents way above my own. I view this more like an enthusiastic amateur at the piano rather than having become a concert pianist.)

I know of one other dev who's experienced the same. I'm keen to learn if there are more of us out there.

Re: CSS's problems are Tailwind's problems

#27
post #12

Earlier quoted context omitted.

I can't believe people find even half of this acceptable, do they never use a browser inspector in their work?

I do, and it’s great having the styles right there and hackable.

How can styles ever not be hackable? Inline styles always take precedence. What can ever stop you from slapping in more inline styles?

Re: CSS's problems are Tailwind's problems

#28
post #12

Earlier quoted context omitted.

I can't believe people find even half of this acceptable, do they never use a browser inspector in their work?

I do, and it’s great having the styles right there and hackable.

To be fair, this is the case with any styling approach; if the style is applied to the element, it's there for you to toy with in the inspector.

Re: CSS's problems are Tailwind's problems

#29

Tailwind was better for me before AI, and it’s WAY better for me with AI. Claude can write CSS and HTML together in my templates, without needing to reference back and forth. It’s very, very good at writing tailwind. Perhaps Tailwind is the worst of all your worlds, but it’s better than Bootstrap and Bulma and all the other stuff I genuinely tried. I don’t get why people can’t just let Tailwind users be happy. Like,…

yeah I was going to say this. AI is incredibly good at writing tailwind. Part of it is probably exactly the colocation issue. Context windows are precious.

Re: CSS's problems are Tailwind's problems

#30
post #17
post #2

I used to be a naysayer of tailwind. However after getting practically forced into it I'm now drinking the koolaid. Yes things like having to duplicate styles using multi cursor is kind of silly, however for the vast majority of the time, having the styles written clearly each time, for me, makes it worth it. There is also nothing stopping you mixing and matching.

> There is also nothing stopping you mixing and matching. Yes, common sense. Having multiple approaches to solve the same thing tends to be a bad idea.

This is an extremely limiting view. They are both CSS at the end of the day. If extracting the complicated inline TailwindCSS class to its own vanilla CSS class makes sense for readability then what's the harm? You could also just define your own variables. Tailwind gives you full control to do this.
Post reply on HN