3 ms·
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
by 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 agoThat 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" />