Comment by bhl | Hacker News Reader

Comment by bhl | Hacker News Reader

- tailwindcss

I moved a React side-project from CRA to Next.js for server-side rendering benefits, but the latter doesn't support directly importing css styles in jsx to avoid problems with the global scope.

The two options offered were CSS modules and CSS-in-JS. I didn't like either approaches having hashes in the classname when opening the website in devtools, and both seemed too locked into React/JSX.

Tailwind 1. doesn't have component framework lock-in 2. doesn't make me think of css classnames 3. atomic classnames are readable in dev tools 4. provides default colors and box shadows, etc.

In addition, they're starting to make a render-less component library (https://headlessui.dev/): that means you can customize how components look without having to understand how its javascript internals work, which I'd find a huge plus compared to other libraries like ant design or material-ui.

- vite + react

More beginner friendly than webpack in starting a new project, and faster developer experience: page reloads almost instantly when you're modifying a component.

I really don't get the appeal of tailwindcss, and I feel like I must be missing some obvious benefit of using it vs something like bootstrap. But at first glance, it just looks like the framework recreates css rules with class names. What epiphany am I missing here?

it removes the separation between your structure and your styles so you can style as you go.

this sounds wrong because “separate responsibilities!” but in reality structure and style are so interconnected, for html and css, that you’re often changing one with respect to another so why not colocate the info.

also, managing a large css stylesheet is often terrible and it becomes write only as a result. it is easier to add new styles that override than attempt to find out which styles impact your target elements and change then. this is again due to the way that structure and style are intimately linked for html and css.

its better than writing raw styles on the html because that is rather obtuse, tailwind shortens many of the common style attribute names. e.g background-color: #efefef becomes bg-gray-50. this links into then named color palette that tailwind gives you.

also, *everything* is configurable.

I seldom write CSS. I tried tailwindcss on one of my recent projects that required to closely follow a custom design (a portfolio for a graphic designer friend). I like it, with some caveats.

Main benefit for me is that I don't need to remember how to write css. 95% of what I need is a shortcut away from tailwind docs. The result is "prettier" than any other website-from-scratch I've done (that's purely on me, not much css practice). Now that I've memorised most common tailwind classes, I'm also moving faster than ever.

Main downside is that it's annoying having to modify tailwind's config file to add non-default variations (mostly different heights/widths than what it ships with).

Maybe something like Girouette[0] would be better.

[0] https://github.com/green-coder/girouette

> add non-default variations (mostly different heights/widths than what it ships with).

Check out https://github.com/tailwindlabs/tailwindcss-jit. It got released 3 weeks ago, and supports variable variables in width and height now.

Ah thanks! Will check out.

By the way, the project I linked is actually the same idea as tailwindcss-jit, but made from scratch, and in Clojure.

I'm not sure how easily I'll be able to use tailwindcss-jit since my projects are in clojure (it won't be able to automatically pick up the classes I use), but I might be able to feed them to it somehow.

> framework recreates css rules with class names

Pretty much, but that concept by itself is underrated. By having all of the CSS inline on your components, the developer doesn't have to click on a class name and find the css file associated with producing that class.

Tailwind is also a design system, so some non-obvious rules like box-shadows, colors, font-sizes are pre-picked. That means instead of remembering what font-size to use for a figure caption, "was it 0.85rem or 0.75rem", you can just use `text-xs`. Design constraint is good here because you get a consistent look throughout your app. It's kind of like having global css variables: by modifying your tailwind.config.js, you can change all `text-xs` to a different font-size now.

And then when you want to break out of that design system, "I need something smaller than a caption, say text-2xs", you can extend tailwind by defining your own atomic class names.

> benefit of using it vs something like bootstrap

Haven't used bootstrap since my first basic website years ago, but it seems like a vanilla js component + css library. Tailwind is primarily a css library, so you can use it with React and Vue as well. The way you install Tailwind is different too: Bootstrap you put into the head of your document and no build step is required; however, with a build step, you can remove unused css to get the minimal working spreadsheet.

There's a few major benefits with Utility CSS.

1. You don't have a dependency on raw CSS which is inherently nested and globally changeable. Instead you depend on tailwind.css and all your HTML describes the styling. This also means you can reliably copy chunks of HTML with tailwind classes.

2. Composition over inheritance. CSS is based around the idea of classes and selectors inheriting each other, which makes the style brittle and hard to follow and copy. Tailwind is composed of completely separate classes, which don't affect each other.

3. You actually learn CSS!! Other frameworks like bootstrap hide a lot of CSS features behind classes intended to simplify development. But this actually obscures what's going on with the CSS. Tailwind actually helps you understand how CSS works by having them easily accessible by utility classes.

    class="flex flex-col"

Is the same as

    style="display: flex; flex-direction: column;"

So you learn how to write better raw CSS too!

Reply on news.ycombinator.com