styling-nativewind-v4-expo

SKILL.md

Accept className, merge defaults, and optionally use a class-variance helper.

Use remapProps (multiple style props) or cssInterop (map a class prop to a style prop).

On Expo Router, do not add your own SafeAreaProvider (Router already does). Use p-safe, pt-safe, etc.

Expo Router를 포함한 Expo React Native 앱에서 NativeWind v4(Tailwind CSS v3)를 설정하고 사용합니다. tailwind.config.js, global.css, babel.config.js(jsxImportSource + Nativewind/babel), Metro.config.js(withNativeWind + input) 및 app.json(웹 번들러 메트로)을 구성합니다. 'className이 적용되지 않음', Tailwind CLI 컴파일 및 Metro 캐시 문제를 해결합니다. 재사용 가능한 구성 요소/변형, 어두운 모드 + CSS 변수(vars/useColorScheme)를 통한 테마 지정 및 타사 구성 요소 스타일 지정(remapProps/cssInterop)을 구현합니다. NativeWind v4, Tailwind 스타일 className 유틸리티를 사용하여 Expo 프로젝트를 작업할 때 또는 NativeWind 구성을 디버깅할 때 사용합니다. 출처: tristanmanchester/agent-skills.

원본 보기