Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From hairyf-skills-4
Styles React Native components with Tailwind CSS via NativeWind v5, supporting className, media queries, pseudo-classes, platform variants, dark mode, and CSS-first config.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hairyf-skills-4:nativewindThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Skill is based on NativeWind v5 (Tailwind CSS v4), generated at 2026-02-26.
GENERATION.mdreferences/advanced-migrate-v4.mdreferences/advanced-theme.mdreferences/api-css-interop-remap.mdreferences/api-styled.mdreferences/api-vars-runtime.mdreferences/api-with-nativewind.mdreferences/best-practices-performance.mdreferences/best-practices-v5-deprecations.mdreferences/core-config.mdreferences/core-setup.mdreferences/core-v5-functions-directives.mdreferences/core-v5-style-specificity.mdreferences/core-v5-tailwind-foundation.mdreferences/core-v5-units.mdreferences/features-platform.mdreferences/features-states.mdreferences/features-styling.mdreferences/features-v5-responsive.mdreferences/features-v5-states-pseudo.mdSkill 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.
| 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 |
| 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 |
| 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 |
| Topic | Description | Reference |
|---|---|---|
| Migrate v4 → v5 | Steps, breaking changes, deprecations | advanced-migrate-v4 |
| 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 |
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin hairyf-skills-4Provides best practices for React Native styling with Uniwind and Tailwind CSS, covering build-time config, theme architecture, performance optimization, and NativeWind migration.
Guides styling React Native components using StyleSheet API, Flexbox layouts, responsive Dimensions, platform-specific styles, and theming.
Provides patterns for React Native styling (StyleSheet, Flexbox), React Navigation setup, and Reanimated animations for performant cross-platform mobile app development.