Hacker News Reader

Comment by have_faith | Hacker News Reader

What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly front-end dev but I've met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I've gotten on board with yet and trying to understand.

View on HN

I use tailwind with frontend components. I don't think you're actually supposed to keep the atrocious classes as-is all the way to the end. Or for rapid browser prototyping if I want to get a layout up quickly.

For example, my component uses something like this:

.btn-indigo { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; }

In the end, I get a <button class="_1aZeRTY"> or similar and that's it, no mess. All of it gets compiled down, and any Tailwind classes I don't use don't make it into the final .js file

We use it for a large enterprise webapp. We have a component library that uses react and applies the correct classes to the component there. I came from mostly using styled-components (CSS-in-JS) and tailwind has worked pretty well for us. The benefit of tailwind over css-in-js is primarily one of performance.

The downside is all styling gets shoved into the `className` prop which isn't great. If I had full automonomy to choose the css "framework" I would probably opt for something like `rebass` https://rebassjs.org/

I built a simple macro/postcss plugin to give tailwind more structure, but preserve runtime performance. https://github.com/fleck/class-types.macro#why-use-this-libr...

I've been using Linaria recently as a zero-runtime css-in-js library. You get a lot of benefits of css-in-js except it compiles it out of the js and into regular css class names and native css perf. Enjoying it so far as I was always cautious of the unneeded overhead of normal css-in-js solutions.

I don't find plain CSS harder to write. It's a bit more verbose and unintuitive to think about sometimes with long-ass property names, too many ways to do the same thing, a bit too low level etc.

Tailwind simplifies them and make those things more readable as well as visible. Combine that with postcss, you get ton of functionality via plugins.

You can use tailwind in any project. The end result is pretty minimal after purging unlike bootstrap or traditional CSS frameworks. Think of tailwind as high level styling framework that simplifies many common scenarios you tackle with writing few lines of CSS.

Any type of project. Before Tailwind existed, I used a similar system but Tailwind is obviously more complete than what I'd roll in a week. I really don't think of it as a framework since you're still specifying which CSS properties you want to apply, just indirectly via classes.

I used it for my site here: https://www.listenaddict.com/

I've also used it for other various sites in the past.

Makes it trivial to add / change / design things quickly, which for me as a non-designer, is great. Also, works well to make things look good on mobile/tablet/desktop sizes, light and dark mode.

If you were instead given a specifc design by a designer, would you be able to use Tailwind only or would there be custom CSS mixed in there to finess it to match the designs?

I would 100% be able to use Tailwind only. And in fact, that would be my preference.

In the past, a lot of projects I've seen started with Bootstrap + maybe some theme. Then they slowly add custom stuff that ended up being horribly bloated and impossible to refactor well. With Tailwind, so long as you're using @apply properly, or a decent component system (I prefer Svelte), then it's very easy to keep things in a nicely updated, non-custom design.

That's really cool to hear, that's something I've been a bit confused about since I have to actually dive in to Tailwind. I was unsure how much control you could have from pre-defined classes, but it sounds like it's enough.

Very interesting. As a Svelte user I find Tailwind counter-intuitive, as the CSS is already scoped to the component. I also found the added build step slows down the otherwise snappy dev server. I had purchased Tailwind UI but got a refund after I ended up needing to write custom CSS on top of the Tailwind classes.

I would be interested in your setup (I generally use sapper).

As an aside, can Svelte reactivity add Tailwind classes? For instance class={`color-blue-${someNum}`} or does all that need to be available at build time (I'm assuming the latter).

For whatever reason, the homepage flashes dark mode, switches to light, but the icon stays a sun. I have to click that twice to get to dark mode and then it works as expected.

Thanks, added an issue to my board to check it out!

You answered your own question, "devs less comfortable writing plain css without a framework"

Nah, I'm very confident with CSS and I prefer functional classes. It's just a far more efficient use of my time to not have to write CSS when there's no need.

Reply on news.ycombinator.com