nativewind by hairyf/skills

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.

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

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

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

Advanced

Topic	Description	Reference
Migrate v4 → v5	Steps, breaking changes, deprecations	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