Hacker News Reader

Comment by danielvaughn | Hacker News Reader

The author makes a couple of valid points, although these aren’t reasons to not use Tailwind. Rather, they’re just the trade-offs you have to sacrifice for the benefits that Tailwind provides. Whether the trade-offs are worth it depend on your use case and your professional opinion.

That being said, when looking at Tailwinds problems, you have to ask yourself “compared to what?” Especially that first complaint - Tailwind is hard to change compared to…Bootstrap? Foundation? BEM? MUI? It’s vastly, vastly easier to change Tailwind code than any of those frameworks (IMO).

I’m a Tailwind champion not because it’s the perfect solution, but because I’ve found it to be better overall than anything that came before it.

View on HN

Agreed. For me an increasingly important factor is documentation. Good documentation can save so MUCH time and headaches, and tailwind's is so good that I have an easier time accepting its defects and trade-offs on that basis alone.

The tooling around Tailwind is so good. The VSCode intellisense plugin auto-suggests tailwind classes for me, which means I don’t even need to reference the docs unless I’m looking for obscure functionality. It’s amazing.

I've found VS Code's Tailwind intellisense to be unreliable. Half the time it just doesn't generate anything.

Press Ctrl+spacebar when typing to explicitly invoke it

Yes!, Jetbrains works very well to.

> “compared to what?” Especially that first complaint - Tailwind is hard to change compared to…

The author compared it to Chakra UI (in the last code sample; misspelled Charkra).

He recommends ThemeUI, Rebass, Stitches and Radix for a design systems, specifically. A recent and very powerful alternative is Tamagui which takes inspiration from all of those.

Tamagui actually does solve all four of the mentioned problems in the article.

One nice thing is that it does so in a way that allows for avoiding doubling the depth of your component tree by having to do HOC type solutions as many seem to do to work around them.

> Tamagui actually does solve all four of the mentioned problems in the article.

How?

The very first example in Tamagui docs is this:

  export const Circle = styled(Stack, {
    backgroundColor: '$background',
    color: '$color9',
    borderRadius: 100_000_000,

    variants: {
      pin: {
        top: {
          position: 'absolute',
          top: 0,
        },
      },

      size: {
        '...size': (size, { tokens }) => {
          return {
            width: tokens.size[size] ?? size,
            height: tokens.size[size] ?? size,
          }
        },
      },
    } as const,
  })

It's already worse than Tailwind. And the rest is just a bunch of predefined components that you can do with any library/framework/vanilla CSS.

That example doesn't use shorthands to be more clear, and shows the styled utility function which is a more advanced case of wanting to define a group of styles nicely. Which is incidentally fixing a couple of the problems in TFA.

If you just want the simple Tailwind experience you can use shorthands only in those, or even closer just import <Stack /> or <Text /> directly and use shorthands with typed tokens. It's there in a few of the first examples.

The upside there is they are just regular props that are typed and have object de-structure and re-structure.

  import { Stack } from 'tamagui'

  <Stack p="$2" mx="$1" bc="red" />

My hunch is that the author of the article wouldn't like these shortcuts either :)

He proposed exactly them as the solution!

Reply on news.ycombinator.com