Hacker News Reader

Comment by Cu3PO42 | Hacker News Reader

For the longest time I avoided Tailwind because including styles right in the markup seems like insanity to me. However, after using it on a project I can't argue with the results. It's quick to use and the site does look a lot more consistent than other hobby project I've done.

To me, the main benefit of Taiwind is not choosing arbitrary values. Writing everything as classes in the markup is something I deal with. It's ocasionally really convenient, but a distraction most of the time. This seems to solve exactly that problem. I still get a reasonable consistent set of values to choose, but can still write normal CSS. I'm really looking forward to trying it out.

View on HN

IMO the best part of Tailwind (and much like yourself I wasn't sold initially) is working with a bigger team or passing projects around. There's no picking through classes figuring out what's going on; we can literally pass any page to a developer, and assuming they're familiar with Tailwind, they know what's going in the CSS.

Completely. And if I'm working solo, I'm also much faster because I don't need to think about how to name classes and when to create new classes or when to re-use existing ones etc.

> I still get a reasonable consistent set of values to choose

How do you deal with one of those values needing to change? With SASS or css-in-js you can define a variable and then update it everywhere at once by changing a single line. This seems to be the biggest thing you give up with Tailwind.

Use a modular view/component, or a class using tailwind's @apply directive. It's the best of both worlds.

Yeah, using components definitely alleviates this issue somewhat. But in our code base we have some values which are global constants. Things like padding values, colors and fonts. Seems like @apply could work. Essentially falling back to regular CSS, but only for these few global values. I might give this a try next time I start a new project.

I use Tailwind for some projects, BEM for others. For some projects we've built a rough outline using BEM (for quick everywhere changes) and then when we get to the final thing, used Tailwind.

The 'update everywhere' was the biggest hurdle for me, particularly with 'design on the fly' quick pieces. But as per the Tailwind docs, generally you're building reusable parts in Vue or whatever, and you change there. There's a page on it here: https://tailwindcss.com/docs/reusing-styles - which I appreciate is still a bit of a 'really?!' kinda thing if you're used to normal CSS.

But to quote The Office... Different drinks for different needs.

You can modify or extend defaults in your `tailwind.conf.js`, or you can use the arbitrary syntax for "one offs" (`w-[69px]`), or wrap things in components.

If you really want to define some custom "global" variables, you can do that with Tailwind. You are free to add any names to the pool of available values along with a custom value in the Tailwind config. At any point you could adjust such a value.

However, I've found such a thing mostly unnecessary. Even with Tailwind I have some abstractions at the component layer so that I don't need to change values all over the place when I want my buttons to have more padding. I'd just change `px-2` to `px-4` in that one place where I define my button styles, for example.

If you need to change values dynamically with JavaScript such as you can with CSS-in-JS, I'd typically use CSS variables.

Now of course this isn't as powerful a system as SASS variables, but it's good enough. That is to say, I have gripes with Tailwind still, but dealing with variables isn't one of them.

Reply on news.ycombinator.com