nativewind

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill is based on NativeWind v5 (Tailwind CSS v4), generated at 2026-02-26.

NativeWind compiles Tailwind CSS for React Native:

className

on components, StyleSheet.create on native and reuse of the Tailwind stylesheet on web. It supports media/container queries, pseudo-classes (hover, focus, active), platform variants (ios:, android:, native:, web:), dark mode, and custom theme/utilities via CSS-first config.

本Skill基于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优先配置实现自定义主题/工具类。

Core References

核心参考

Topic	Description	Reference
Setup	CSS file, Metro withNativewind, PostCSS, app entry, optional lightningcss pin	core-setup
Configuration	CSS-first config, @theme, @source, nativewind/theme, custom utilities/variants	core-config
v5 Tailwind foundation	Built on Tailwind v4, CSS-first, web vs native support	core-v5-tailwind-foundation
v5 Units	px, %, vw/vh, rem, em on native; dp vs px; rem sizing	core-v5-units
v5 Functions & directives	@import, @theme, @utility; var(), calc(), env(), color-mix(); RN functions	core-v5-functions-directives
v5 Style specificity	Order of precedence, !important, merging className and style	core-v5-style-specificity

主题	说明	参考链接
配置	CSS文件、Metro withNativeWind、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

Features

功能特性

Topic	Description	Reference
Styling components	className usage, custom vs third-party, styled() / cssInterop / remapProps, nativeStyleToProp	features-styling
Platform & responsive	Platform variants, units, breakpoints, safe-area utilities	features-platform
v5 Responsive	Breakpoints on native, media queries, platform media, reactive updates	features-v5-responsive
States & dark mode	hover/focus/active, disabled/empty, group modifiers, dark:, data attributes	features-states
v5 States & pseudo-classes	Detailed pseudo-class table, selection/placeholder, group, ltr/rtl	features-v5-states-pseudo
v5 Third-party guide	When className isn't passed, multiple style props, dynamic mapping @prop	features-v5-third-party-guide
Theming & colors	@theme tokens, vars() for runtime CSS variables, color behavior	advanced-theme

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

API (v5)

API（v5版本）

Topic	Description	Reference
withNativewind	Metro wrapper options (globalClassNamePolyfill, typescriptEnvPath)	api-with-nativewind
styled	Third-party components, nativeStyleToProp, multiple className props	api-styled
vars & runtime variables	vars(), VariableContextProvider, useUnstableNativeVariable	api-vars-runtime
cssInterop / remapProps	Legacy API (deprecated; use styled) — migration reference	api-css-interop-remap

主题	说明	参考链接
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

Advanced

进阶内容

Topic	Description	Reference
Migrate v4 → v5	Steps, breaking changes, deprecations	advanced-migrate-v4

主题	说明	参考链接
从v4迁移至v5	步骤、破坏性变更、废弃项	advanced-migrate-v4

Best Practices

最佳实践

Topic	Description	Reference
Correctness & debugging	Explicit light/dark, colors on Text not View, cache, DEBUG, verifyInstallation	best-practices-performance
v5 Deprecations	useColorScheme → RN, cssInterop/remapProps → styled, @prop modifier	best-practices-v5-deprecations

主题	说明	参考链接
正确性与调试	显式设置亮色/深色模式、在Text而非View上设置颜色、缓存、DEBUG、verifyInstallation	best-practices-performance
v5 废弃项	useColorScheme → RN、cssInterop/remapProps → styled、@prop修饰符	best-practices-v5-deprecations