4 ms·

> “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; m

> “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.

nwienert 4y ago
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.
- dmitriid 4y ago
  > 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.
  - nwienert 4y ago
    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" />
    - dmitriid 4y ago
      My hunch is that the author of the article wouldn't like these shortcuts either :)
      - nwienert 4y ago
        He proposed exactly them as the solution!

nwienert 4y ago

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.

dmitriid 4y ago
> 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.
- nwienert 4y ago
  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" />
  - dmitriid 4y ago
    My hunch is that the author of the article wouldn't like these shortcuts either :)
    - nwienert 4y ago
      He proposed exactly them as the solution!