nativewind

此技能基于 NativeWind v5（Tailwind CSS v4），生成于 2026-02-26。

NativeWind 会为 React Native 编译 Tailwind CSS：在组件上使用 className，在原生端使用 StyleSheet.create，并在 Web 端复用 Tailwind 样式表。它支持媒体/容器查询、伪类（hover、focus、active）、平台变体（ios:、android:、native:、web:）、深色模式，以及通过 CSS 优先配置自定义主题/工具类。

核心参考

主题	描述	参考
设置	CSS 文件、带有 withNativewind 的 Metro、PostCSS、应用入口、可选的 lightningcss 版本固定	core-setup
配置	CSS 优先配置、@theme、@source、nativewind/theme、自定义工具类/变体	core-config
v5 Tailwind 基础	基于 Tailwind v4 构建，CSS 优先，支持 Web 与原生端	core-v5-tailwind-foundation
v5 单位	原生端的 px、%、vw/vh、rem、em；dp 与 px；rem 尺寸	core-v5-units
v5 函数与指令	@import、@theme、@utility；var()、calc()、env()、color-mix()；RN 函数	core-v5-functions-directives
v5 样式优先级	优先顺序、!important、合并 className 和 style	core-v5-style-specificity

功能

主题	描述	参考
组件样式设置	className 用法、自定义组件与第三方组件、styled() / cssInterop / remapProps、nativeStyleToProp	features-styling
平台与响应式	平台变体、单位、断点、安全区域工具类	features-platform
v5 响应式	原生端断点、媒体查询、平台媒体查询、响应式更新	features-v5-responsive
状态与深色模式	hover/focus/active、disabled/empty、group 修饰符、dark:、data 属性	features-states
v5 状态与伪类	详细的伪类表、selection/placeholder、group、ltr/rtl	features-v5-states-pseudo
v5 第三方组件指南	未传入 className 时、多种样式属性、动态映射 @prop	features-v5-third-party-guide
主题与颜色	@theme 令牌、用于运行时 CSS 变量的 vars()、颜色行为	advanced-theme

API（v5）

主题	描述	参考
withNativewind	Metro 包装器选项（globalClassNamePolyfill、typescriptEnvPath）	api-with-nativewind
styled	第三方组件、nativeStyleToProp、多个 className 属性	api-styled
vars 与运行时变量	vars()、VariableContextProvider、useUnstableNativeVariable	api-vars-runtime
cssInterop / remapProps	旧版 API（已弃用；请使用 styled）——迁移参考	api-css-interop-remap

高级主题

主题	描述	参考
从 v4 迁移到 v5	步骤、破坏性变更、弃用项	advanced-migrate-v4

最佳实践

主题	描述	参考
正确性与调试	明确指定浅色/深色、在 Text 而非 View 上设置颜色、缓存、DEBUG、verifyInstallation	best-practices-performance
v5 弃用项	useColorScheme → RN、cssInterop/remapProps → styled、@prop 修饰符	best-practices-v5-deprecations