스타일링

className 유틸리티나 타입이 지정된 props로 컴포넌트 스타일을 설정하세요. Text.js 앱에는 스타일시트가 없어요.

#유틸리티

className은 Tailwind 스타일 유틸리티를 받아요. 1단위는 1개 셀이에요.

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

#타입이 지정된 props

모든 유틸리티에는 대응하는 prop이 있어요. props는 className보다 우선해요.

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

#색상

16진수 색상, Tailwind 이름 또는 fg, muted, surface, accent, success, danger 같은 테마 토큰을 사용하세요. 토큰은 활성 테마를 따라요.

#테마

프리셋 5개가 기본으로 제공돼요: geistDark, geistLight, opencodeDark, tokyoNight, 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");

#반응형 뷰포트

앱은 기본적으로 도킹된 DevTools 콘솔을 채우고(viewport.responsive), 패널을 드래그하면 크기가 바뀌어요. flex로 레이아웃을 구성하고 필요할 때 크기를 읽으세요:

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

페이지는 도킹된 패널만 감지할 수 있어요. 도킹 해제된 DevTools, DevTools 확대/축소, 콘솔 사이드바는 감지할 수 없어서 앱은 viewport.width × viewport.height(기본값 120×36) 또는 직접 고정한 크기를 사용해요:

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