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