SkillsAdd

hairyf/skills

nativewind

Use Tailwind CSS to style React Native components across web and native

First seen Feb 26, 2026

Installation

$ npx skills add hairyf/skills --skill nativewind
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
react-native-best-practices Shared topics
callstackincubator/agent-skills

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory lea…

25K installs
expo-brownfield Shared topics
expo/skills

Framework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Us…

18.7K installs
migrate-nativewind-to-uniwind Similar name
uni-stack/uniwind

Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace N…

1.9K installs
styling-nativewind-v4-expo Similar name
tristanmanchester/agent-skills

>- Sets up and uses NativeWind v4 (Tailwind CSS v3) in Expo React Native apps, including Expo R…

385 installs

Also in this package

Other skills from hairyf/skills · top by installs.

npx skills add hairyf/skills
tailwindcss 3K motion 1.1K hairy-utils 1.1K next 809 react-use 807 valtio 743 valtio-define 714 openapi-specification-v3.2 713 hairy-react-lib 713 vitest 646

Browse all from hairyf/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 25
License LICENSE.md
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version2026-02-26
More metadata
author
Hairy
version
2026-02-26
source
Generated from https://github.com/nativewind/website, scripts located at https://github.com/hairyf/skills

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,179 B
  • docs SUMMARY.md 89 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 269 installs

SKILL.md

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)