How do I install the Nativewind skill?

Run npx skillmds@latest add hairyf-skills/nativewind in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Nativewind skill do?

Use Tailwind CSS to style React Native components across web and native It is listed under Web & Frontend on SkillMD.

Is Nativewind safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nativewind?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nativewind free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nativewind?

hairyf (@hairyf-skills) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nativewind by hairyf-skills — Agent Skill

Name: Nativewind
Rating: 4.2 (5 reviews)
Author: hairyf

File contents

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

---name: nativewinddescription: Use Tailwind CSS to style React Native components across web and native--- > 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](references/core-setup.md) | | Configuration | CSS-first config, @theme, @source, nativewind/theme, custom utilities/variants | [core-config](references/core-config.md) | | v5 Tailwind foundation | Built on Tailwind v4, CSS-first, web vs native support | [core-v5-tailwind-foundation](references/core-v5-tailwind-foundation.md) | | v5 Units | px, %, vw/vh, rem, em on native; dp vs px; rem sizing | [core-v5-units](references/core-v5-units.md) | | v5 Functions & directives | @import, @theme, @utility; var(), calc(), env(), color-mix(); RN functions | [core-v5-functions-directives](references/core-v5-functions-directives.md) | | v5 Style specificity | Order of precedence, !important, merging className and style | [core-v5-style-specificity](references/core-v5-style-specificity.md) | ## Features | Topic | Description | Reference | |-------|-------------|-----------| | Styling components | className usage, custom vs third-party, styled() / cssInterop / remapProps, nativeStyleToProp | [features-styling](references/features-styling.md) | | Platform & responsive | Platform variants, units, breakpoints, safe-area utilities | [features-platform](references/features-platform.md) | | v5 Responsive | Breakpoints on native, media queries, platform media, reactive updates | [features-v5-responsive](references/features-v5-responsive.md) | | States & dark mode | hover/focus/active, disabled/empty, group modifiers, dark:, data attributes | [features-states](references/features-states.md) | | v5 States & pseudo-classes | Detailed pseudo-class table, selection/placeholder, group, ltr/rtl | [features-v5-states-pseudo](references/features-v5-states-pseudo.md) | | v5 Third-party guide | When className isn't passed, multiple style props, dynamic mapping @prop | [features-v5-third-party-guide](references/features-v5-third-party-guide.md) | | Theming & colors | @theme tokens, vars() for runtime CSS variables, color behavior | [advanced-theme](references/advanced-theme.md) | ## API (v5) | Topic | Description | Reference | |-------|-------------|-----------| | withNativewind | Metro wrapper options (globalClassNamePolyfill, typescriptEnvPath) | [api-with-nativewind](references/api-with-nativewind.md) | | styled | Third-party components, nativeStyleToProp, multiple className props | [api-styled](references/api-styled.md) | | vars & runtime variables | vars(), VariableContextProvider, useUnstableNativeVariable | [api-vars-runtime](references/api-vars-runtime.md) | | cssInterop / remapProps | Legacy API (deprecated; use styled) — migration reference | [api-css-interop-remap](references/api-css-interop-remap.md) | ## Advanced | Topic | Description | Reference | |-------|-------------|-----------| | Migrate v4 → v5 | Steps, breaking changes, deprecations | [advanced-migrate-v4](references/advanced-migrate-v4.md) | ## Best Practices | Topic | Description | Reference | |-------|-------------|-----------| | Correctness & debugging | Explicit light/dark, colors on Text not View, cache, DEBUG, verifyInstallation | [best-practices-performance](references/best-practices-performance.md) | | v5 Deprecations | useColorScheme → RN, cssInterop/remapProps → styled, @prop modifier | [best-practices-v5-deprecations](references/best-practices-v5-deprecations.md) |

Frequently asked questions

Nativewind