Penataan gaya

Atur gaya komponen dengan utilitas className atau prop bertipe. Aplikasi Text.js tidak memiliki stylesheet.

#Utilitas

className menerima utilitas bergaya Tailwind. Satu unit setara dengan satu sel.

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

Setiap utilitas memiliki prop. Prop lebih diutamakan daripada className.

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

#Warna

Gunakan hex, nama Tailwind, atau token tema seperti fg, muted, surface, accent, success, dan danger. Token mengikuti tema aktif.

#Tema

Lima preset tersedia sebagai bawaan: geistDark, geistLight, opencodeDark, tokyoNight, dan 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 responsif

Secara default, aplikasi memenuhi konsol DevTools yang terpasang di jendela browser (viewport.responsive), dan menyesuaikan ukurannya saat Anda menyeret panel. Atur layout dengan flex dan baca ukurannya saat diperlukan:

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

Halaman hanya dapat melihat panel yang terpasang di jendela browser. DevTools di jendela terpisah, zoom DevTools, dan bilah sisi Konsol tidak terlihat oleh halaman, sehingga aplikasi menggunakan viewport.width × viewport.height (default 120×36) atau ukuran yang Anda tetapkan:

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