nativewind
NativeWind brings Tailwind CSS styling to React Native, compiling utilities for both web and native platforms. It supports responsive design, dark mode, platform-specific variants, and pseudo-classes like hover and focus. Configure via CSS-first setup with custom themes and utilities.
NativeWind lets you style React Native components with Tailwind CSS utilities across web and native platforms.
AI-generated summary based on this skill's SKILL.md
Install
hairyf/skills/nativewind · repository language: MDX
git clone https://github.com/hairyf/skills
cp -r skills/skills/nativewind ~/.claude/skills/nativewindnpx skillfed install hairyf/skills/nativewindFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you use Tailwind in React Native with NativeWind?
NativeWind brings Tailwind CSS styling to React Native by compiling utilities for both web and native platforms. You apply Tailwind classes directly to React Native components using the className prop, just as you would on web. NativeWind handles the compilation and platform-specific rendering, allowing you to write consistent styles that work across iOS, Android, and web without duplicating your design system.
What styling features does NativeWind support for React Native?
NativeWind supports responsive design, dark mode, platform-specific variants for iOS and Android, and pseudo-classes like hover and focus. You can use Tailwind utilities directly in your components, configure custom themes, and define additional utilities through CSS-first setup. This enables you to build consistent designs across web and native platforms while maintaining a single source of truth for your styling.
How can you style React Native components with Tailwind utilities?
NativeWind lets you style React Native components by applying Tailwind CSS utilities via the className prop on native components. The framework compiles these utilities into platform-specific styles that work on both native and web. You can combine utilities for responsive behavior, dark mode support, and platform variants, enabling you to create cohesive designs without writing platform-specific stylesheets.
What breaking changes occur when migrating NativeWind v4 to v5?
NativeWind v5 introduces breaking changes from v4 that require migration updates. The shift emphasizes CSS-first configuration and improved compilation. Review the official migration guide to understand changes to setup, theming, and utility definitions. Most projects can migrate by updating configuration files and ensuring custom themes align with the new structure.
How do you configure NativeWind theming and customize Tailwind?
NativeWind uses CSS-first configuration for theming and customization. Define your theme in the Tailwind config file, specifying colors, spacing, typography, and other design tokens. You can extend the default Tailwind theme with custom utilities and variants. NativeWind compiles these configurations for both web and native platforms, ensuring your design system remains consistent across all targets.
Does NativeWind support responsive and platform-specific styling?
Yes, NativeWind supports responsive design patterns and platform-specific variants for iOS and Android. Use responsive prefixes like md: and lg: to adapt layouts across screen sizes, and platform variants to apply styles conditionally based on the target platform. This allows you to build adaptive interfaces that work seamlessly on mobile devices and web while maintaining a single codebase.
SKILL.md
rendered from the published skill — quoted content, verbatim
> 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 |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/nativewind/GENERATION.md
skills/nativewind/SKILL.md
skills/nativewind/references/advanced-migrate-v4.md
skills/nativewind/references/advanced-theme.md
skills/nativewind/references/api-css-interop-remap.md
skills/nativewind/references/api-styled.md
skills/nativewind/references/api-vars-runtime.md
skills/nativewind/references/api-with-nativewind.md
skills/nativewind/references/best-practices-performance.md
skills/nativewind/references/best-practices-v5-deprecations.md
skills/nativewind/references/core-config.md
skills/nativewind/references/core-setup.md
skills/nativewind/references/core-v5-functions-directives.md
skills/nativewind/references/core-v5-style-specificity.md
skills/nativewind/references/core-v5-tailwind-foundation.md