Hacker News Reader

Comment by hnrodey | Hacker News Reader

Adopting any system of coding design whether it be Bootstarp, Tailwind, Rails, Express, etc. is overall meant to reduce the cognitive complexity of the group working on your solution.

If most people have exposure/understanding to the Boostrap way of doing things, or the Rails way of doing things, then we as a system/company/team/organization benefit when new people join the team. There's already a well established way of getting stuff done.

If we forgo the use of a system, we will end up building one anyways. But this time, it will be known ONLY to your existing team members. It could/will buck convention and established best practices, it will grow to develop the bloat and technical debt for which the existing systems were rejected.

Software engineering is about trade-offs. This is just another trade-off.

View on HN

But one of the major pitfalls of tailwind is that it gives the illusion of a system, but isn't actually a consistent system. `m-2` can mean entirely different things, depending on how your configuration is set.

With a really good design team, this isn't a problem, as the numbers are just pointing to something in a design document, but I've yet to see something that well done in the wild. And its not really that hard to make such a design system using css or preprocessor variables

Just because a 2 can represent different values doesn’t mean there’s not a system, it just means the system is configurable. This is a good thing, you just have to know how the tool works.

Even if I don’t know what specific values m-2 may hold for a given project, I certainly know a lot more about it right off the bat than whatever .class-name you may have come up with from scratch, and can reference the config to know the rest.

> `m-2` can mean entirely different things, depending on how your configuration is set

Does it matter? Putting aside that anecdotally it seems very rare to override the default values for spacing anyway, m-2 is twice as much as m-1, which is whatever the baseline spacing for your project is.

Sure it can vary from project to project (though again, it doesn't seem awfully common for folks to do), but the config file is in your source control so m-2 is always consistent for the project you're working on.

It is super common things to do when you actually adopt it as system. People choose either -4 or -8 to be 1x measure of space and setup the size in config.

Of course there is a big group of devs who use tailwind for easy copy paste templates that never change the config. But those who use as system use config a lot.

I'd argue that if you use Tailwind as is, without creating a system of configuration around it, you're team issue isn't Tailwind. I fully understand what it's like to have a team that doesn't understand build tools, but you really shouldn't be allowing these people to prepare deployments by themselves. I think that's totally "ok" in our current web culture, there's no more looking at source code on a website and figuring things out that easily. It can become annoying to have someone come to you for something that should be so basic (in our minds), but I guarantee it's way less annoying that being called upon to fix production! I'm not even a front-end developer, I just kind of fell into the role because I know code and started in the late 1990's, and then picked it back up in the early 2000's. I get why CSS is difficult, but I think the patches over the language by libraries is still not making things easier.

The thing is you have to use build tools to use Tailwind. It doesn't work (well) without it being able to search your templates to generate css for the classes you use.

So anyone using Tailwind already has the setup to add tailwind.config.js into their project. They make it as easy as it can possibly be.

The reason why people don't change the config is that you need the default tailwind config for all the copy-paste-able snippets to work. People buy something like TailwindUI and copy what they find around. Including things like colors (which i find super stupid that the TailwindUI team didn't you know... use their own config OR css variables to be able to change brand colors).

And that kind of usage of Tailwind is lazy and you won't learn anything. But that's up to people. It doesn't mean Tailwind is bad abstraction or not possible to use for efficient design systems.

You can configure it to use names like `m-xs`, `m-sm`, `m-md`, `m-lg`, etc if you want, that's the beauty of it. It lets you create your own design system.

That's true, but I don't the author is saying that Tailwind isn't a trade-off — just that it's a bad trade-off.

How do you guys feel about tailwind? I’ve been using it on some side projects. It feels ok, but I’m constantly looking up stuff in the tailwind docs. CSS I already am pretty confortable with. I think it’s an improvement, but not by as much as I thought.

I've been using it at work for just over a year. I don't like it. I still need to constantly reference the Tailwind docs for most non-trivial properties. It flat-out doesn't support some things I need. It produces giant blocks of difficult-to-scan HTML. Chunks of common styles end up repeated. The problems it purports to solve are better solved in other ways, such as CSS modules.

Ultimately, I don't begrudge people for using whatever tool they find best. But I try to avoid Tailwind when given the choice.

> It flat-out doesn't support some things I need

Can you share some of those? I don't do much raw CSS so have no idea where it has gaps.

One example is rotation along axes other than Z, which is required for 3D transforms. Here's a two year old issue on it: https://github.com/tailwindlabs/tailwindcss/discussions/3521

Another is attribute selector support. They have many common ones, but to do anything more complex you need to add support to your configuration. https://tailwindcss.com/docs/hover-focus-and-other-states#at...

I don't want to oversell this; I think Tailwind does a pretty good job covering the "happy path", and if you haven't run into any gaps I wouldn't worry about it too much. But you'll encounter its limits well before you encounter the limits of CSS.

Nah, it's not an improvement for me.

It's an abstraction, but a poor one. It's too low-level to be truly useful, and it's also confusing as some properties doesn't mean the same as in CSS.

You end up with huge unreadable blobs, reminding me of the "write-only" label that Perl once used to have.

And the answer to avoid that unreadable blob is to include CSS, defeating the point.

I prefer CSS/SASS with variables for customization (so you don't have to repeat the blobs) and well-chosen class names (so you can actually read and modify existing code).

I was quite hesitant to jump into Tailwind. I've tried it in the past few months and quite like using it. I do have to refer to the docs a lot but that is okay because I think they're docs are quite usable.

I miss some of the already established components from Bootstrap, but whatever. Bootstrap is always kind of a pain in the butt to integrate into a project.

Reply on news.ycombinator.com