Stili

Definisci lo stile dei componenti con le utility di className o con prop tipizzate. Le app Text.js non hanno fogli di stile.

#Utility

className accetta utility in stile Tailwind. Un’unità corrisponde a una cella.

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#Prop tipizzate

Ogni utility ha una prop. Le prop hanno la precedenza su className.

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#Colori

Usa valori esadecimali, nomi Tailwind o token del tema come fg, muted, surface, accent, success e danger. I token seguono il tema attivo.

#Temi

Sono inclusi cinque preset: geistDark, geistLight, opencodeDark, tokyoNight e amberCrt.

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#Viewport adattivi

Per impostazione predefinita, le app riempiono la console DevTools ancorata (viewport.responsive) e si ridimensionano quando trascini il pannello. Organizza il layout con flex e leggi le dimensioni quando ti servono:

const { cols } = useViewport();const sidebar = cols >= 90;

La pagina può vedere solo un pannello ancorato. I DevTools non ancorati, lo zoom dei DevTools e la barra laterale di «Console» sono invisibili alla pagina, quindi l’app usa viewport.width × viewport.height (valore predefinito 120×36) o le dimensioni che fissi:

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again