GUIDE
런타임 테마에서 유틸리티 preset 파생하기
GJ Kit는 NativeWind를 런타임 의존성으로 요구하지 않지만 className을 호환 컴포넌트에 전달합니다. preset은 실제 Theme에서 색상, 간격, 라운드, 타이포그래피, 그림자와 breakpoint를 파생해 두 개의 디자인 진실이 생기지 않게 합니다.
Node 안전 엔트리 사용
tailwind.config가 읽는 앱 테마 모듈은 패키지 루트가 아니라 @gj-kit/expo-ui/theme에서 생성기를 가져와야 합니다.
TypeScript
import { createTailwindPreset } from '@gj-kit/expo-ui/tailwind';
import { themes } from './src/theme';
export const preset = createTailwindPreset(themes.light);생성되는 유틸리티
기본 ui 접두사로 의미 있는 토큰 이름을 노출합니다. prefix 옵션을 바꾸면 프로젝트 네이밍 규칙에 맞출 수 있습니다.
- bg-ui-primary와 text-ui-title
- p-ui-lg와 rounded-ui-pill
- shadow-ui-sm, tablet과 desktop 화면
className과 style의 역할
className은 NativeWind가 설치된 소비 앱에서 해석되고 GJ Kit는 이를 패스스루합니다. 컴포넌트 토큰 스타일 뒤에 className 브리지와 style을 적용하므로 화면별 조정이 가능합니다.