[Crazyontap]

I really was hoping that tailwind was a fad which died but like everything JavaScript it's here to stay sadly

I recently found myself staring at a button element with more classes than I have ever seen like <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md shadow-md">Click me!</button>.

It’s like the eccentric artist who insists on using every color in the palette. After been forced to use it for almost 2 years I still don't see the point. Your HTML files? Bloated. Your sanity? Questionable. And those cryptic class names? Why God did we have to do this.

[llamaimperative]

The point is that it’s ridiculously fast to build and extremely easy to maintain. It’s also not hard to read after, idk, a week of working in it? The only people I’ve seen struggle beyond that are people who dug in their heels and dogmatically decided to struggle with it.

FWIW for a Button, your engineer should just encapsulate all the “ridiculous” styling into a <Button /> element.

[orangepanda]

I strongly disagree on the maintainability. Mistakes are easy to make and have been made when comparing a list of 20 class names across a dozen elements. Its only "maintainable" if you ignore the class list when reading. I review my local evangelists' tailwind code and from their mistakes its clear they're not reading the class list.

It reminds me of how some people claim they're great at multitasking and can text & drive with no issues - meanwhile not even being aware of what they're missing.

Tailwind has its uses, but it should not be the default choice.

[azangru]

> FWIW for a Button, your engineer should just encapsulate all the “ridiculous” styling into a <Button /> element.

Sure thing.

What I don't understand though is why not put a Button.css file next to the Button element file, and describe all the button styles in there. What's so hard about building or maintaining that?

[pupppet]

You lost me at ‘maintain’. It’s definitely not easier than just updating a single .button class, and I’m not going to create reusable components out of everything in my project, the <Button /> approach doesn’t work for everything.

[danielvaughn]

After writing Tailwind for a few years, I've kinda shifted position on the maintainability of it.

It's definitely easier than any alternative, but it's also painful to read through a giant list of classes. There's no getting around that.

I think a better way to put it is that Tailwind optimizes for writes vs reads. It sacrifices the readability of HTML for the writability of CSS.

I still think that's a worthwhile tradeoff, but it's definitely a tradeoff.

[lawn]

> FWIW for a Button, your engineer should just encapsulate all the “ridiculous” styling into a <Button /> element.

And pray you never have to tweak or debug that element.

Hiding away bad code where you don't have to look at it doesn't stop it from being bad.

[jacobyoder]

It's adequate for some folks who work in the same codebase, and define their own style of work. It's been a real pain for me who comes in to various codebases for short periods of time and have to read/digest/learn every single project's unique take on buttons.

class="btn btn-primary" is also pretty easy to read. But in the last couple weeks I've have to deal with both class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md shadow-md" style buttons and <LinkButton4 /> and <LinkButton7 /> components, both of which still seemed to be affected by another wrapping container that decided to "text-xs" everything below it, but which wasn't obvious. Trying to simply add a 'button' that had the same styles around it was far more work than it should have been.

No doubt, I'm somehow in a minority of switching between projects/codebases more often than other people. But this was much less of a problem with bootstrap and related definitions.

> your engineer should just encapsulate all the “ridiculous” styling into a <Button /> element.

When you want, say, most things to share some common color/style definitions, you will still end up repeating a lot of stuff (same long string for buttons, and for headers, etc). The tailwind system gives you the option of @apply, but the tw docs are also relatively strongly against it, for ... I can't really understand the reason why.

https://tailwindcss.com/docs/reusing-styles

> If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

There's some reasons listed on that page justifying "don't use @apply!" but... they don't ring all that useful to me. They do say "well, you could do it for reusable things like buttons", but those are the very things that most tailwind examples use longhand examples for.

> Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

There's a balance between the 'ugly' (their words) and 'tons of custom css'. Everyone's balance is different, I get it, but I'm usually having to come in after someone who was jazzed about tailwind has moved on and left me the 'ugly' (their words) mess. If every link should have "text-dark font-bold font-xs"... @apply that with an understandable name. Or document your design decisions...? But that conflicts with "ridiculously fast to build". Documenting them in an '@apply' way would let me see how you want some styles grouped together without having to scan through dozens of your components looking for a pattern.

[blorenz]

Every time something with tailwind is posted there is always a rehash of this response. I believe most of this frustration comes from using tailwind in the raw. There are a few essential libraries available that amplify the power of tailwind by magnitudes: tailwind-merge for last-specified wins, and class-variance-authority to reduce your class declarations in coherent reusable variants.

Tailwind empowers the expressiveness of styling. I steadfastly counter that the statement that it is the eccentric artist who insists on using every color in the palette. By design, tailwind implements constraints on what can be utilized by it's configuration file. Sure, you can absolutely break out with arbitrary classes but the spirit is akin to a Crayola box of 64 crayons and you have to work with what you have in front of you.

The largest benefit is that I can read my JSX/HTML and understand the presentation of the elements. Nothing is cryptic. I don't have to dive into another file where I can lose cognitive load. DX is enhanced. Critically stated: tailwind has been nothing but a massive boon for web dev since its inception.

[ramon156]

Your last argument is a perfect reason why tailwind isn't a fad. Its a standard where, if you've worked with it, you know exactly what these classes will do. Saying "the classlist becomes long" is not an argument to avoid using tailwind, especially if you already have a component based framework. I'd rather read a tailwind classlist than having to spend time setting up my own half-arsed class list.

[hu3]

Interesting response.

I'm in this war against build steps.

Is there a way to 80/20 Tailwind without the build steps?

I mean, get 80% of the benefits with 20% of the work.

[klabb3]

> And those cryptic class names?

They’re as cryptic as ls, cat, pwd. They have well defined semantics, sensible default, and tooling that can warn if your properties are conflicting.

In fact, with regular css you need to target elements by coming up with arbitrary class names, like .banner-main-content. Those are more cryptic imo, and completely arbitrary. (Naming things is problem #2, remember)

Do I wish there was a better way than space-separated attrs inside the human hostile xml-like format that is html? Yes. Do I want to go back to having to write custom selectors? No. 80-95% of the time utility classes is a better fit, especially with component based frameworks.

[lobsterthief]

Have you used MUI before? No need for utility classes, no need for writing custom selectors, everything ties back to the theme, and everything is consistent. I don’t believe that “80-95% of the time utility classes are better” when super popular alternatives like MUI exist.

Tailwind introduces some solutions while introducing other problems. It has its place when used correctly, but I’ve never seen a single TW codebase implemented properly.

I’ve been writing CSS for 25 years and have gone through just about everything at this point—inline/attribute styles, CSS, SCSS/SASS, LESS, stylus, Bourbon, Tailwind, Bootstrap, Ant, Semantic UI, MUI, etc. And tbh, MUI is the closest I think we’ve gotten towards rapid iteration while solving specificity issues, the problem of selector generation, proper a11y and state styling (e.g. button focus styling), and inconsistency issues, but again—only when architectured correctly.

[simonbarker87]

So that’s a mid blue button that gets slightly darker on hover, with bold white text, it’s got a little more horizontal padding than vertical padding and has slight corner rounding and a slight drop shadow.

And I can see all of that in context where the button is declared rather than having to go look at another file and see what everything is. Oh and I know that none of those TW classes conflict or over write any properties, unlike two in house styles.

[nprateem]

Good luck changing the style site-wide.

[matt_s]

Having just dipped my toes into tailwind and getting back up to speed on CSS, its shortcut syntax to base CSS. Putting all of that right on the element makes it easy for anyone to understand what is going on.

After seeing web tech come and go over the years, I have a distaste for most tech that transpiles or similar things. In my experience, transpiling increases the likelihood of painting yourself into a corner eventually. It complicates the tech stack by adding more dependencies and it appears a goal with a lot of frameworks is to avoid actually writing HTML and CSS. Sure the goal of using techniques so you don't have to repeat code is there too but how many abstractions are actually necessary to achieve that?

[progx]

Some time ago i thought the same, but using it a while change my mind. You can create and edit quick things, especially if some elements should have another styling. I don't miss the times when you specify every elements styling, especially nested components where you have to be carefull.

Whether web-app or website, nobody create them in 2024 from scratch without any tools. And these tools can render your HTML with minimal classnames and optimize you css-file with needed tailwind styles.

Primary i use it in web-app, and i don't care about dozens of classnames. The tools optimize it.

[azangru]

> I really was hoping that tailwind was a fad which died but like everything JavaScript it's here to stay sadly

I feel with Tailwind it's worse somehow.

At least heavy javascript frameworks are commonly ridiculed by back-end or full-stack developers here on HackerNews; but with Tailwind, they embraced it just as firmly as front-end developers have. It is common to hear from back-end or full-stack dev that all they need is just jQuery or plain vanilla; but far more rare to hear same sentiment expressed about plain old (or rather plain new) CSS.

[smatija]

Agreed, I find tailwind defaults sensible, but it tends to make templates quite unreadable.

My compromise with it is just using @apply in css files:

styles.css:

.button { @apply px-2 py-1 rounded-sm shadow-md hover:shadow-lg font-bold cursor-pointer block; height: 32px; }

.button.create { @apply bg-green-700 text-white; }

template.html:

<button class="button create">...</button>

[nprateem]

Ah the dream. Only now it takes my django project 45s to rebuild the tailwind any time I change those styles (and I only have about 30).

[NeutralForest]

I have used tailwind on and off and I still find this pretty easy to read tbf.

[liampulles]

Different strokes I guess.

I would say I have basic skills (and interest frankly) in web dev, and I find all the HTML and CSS to look pretty messy anyway. At least with Tailwind I can have the mess in one place and try and understand it there, rather than needing to track down and interpret which CSS class is causing what and how to modify it without breaking something else.

[iamsaitam]

Ever heard of CSS files? No one forces you to bloat your html.