nativewind
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 |
More from hairyf/skills
tailwindcss
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
1.6Khairy-utils
Comprehensive skills for working with @hairy/utils core utilities
868motion
Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.
745next
Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications.
696react-use
Collection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management
668valtio
Valtio proxy state management for React and vanilla JavaScript. Use when creating reactive state, managing application state, or working with proxy-based state management.
613