Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

> 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!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: