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
Decision gist · record as of 2026-06-10
NativeWind lets you style React Native components with Tailwind CSS utilities across web and native platforms. 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.
Use it when
- NativeWind supports responsive design, dark mode, platform-specific variants for iOS and Android, and pseudo-classes like hover and focus.
- NativeWind lets you style React Native components by applying Tailwind CSS utilities via the className prop on native components.
Verify before relying
Read SKILL.md below before installing (22 files). Open directory: indexed for reading, not audited.
Install
hairyf/skills/nativewind · repository language: MDX
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Style React Native components using Tailwind CSS utilities”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Tailwind CSS is a utility-first framework that lets you compose custom designs by applying utility classes directly in your markup instead of writing traditional CSS. It includes responsive design utilities, theme customization via CSS variables, and support for dark mode and interactive states.
Build styled React components using Tailwind's utility-first approach with mobile-first responsive design. Includes patterns for buttons, cards, forms, and layouts alongside dark mode support and custom configuration.
HeroUI Native is a component library for React Native built on Uniwind (Tailwind CSS adapted for mobile) and React Native, delivering accessible, customizable UI components for iOS and Android. Use compound component patterns to compose Buttons, Cards, TextFields, Dialogs, and more with semantic variants and HSL-based theming. Always fetch component documentation before implementing to access complete examples, props, and API references.
TailwindCSS teaches utility-first CSS framework expertise with mobile-first responsive design. Learn to apply Tailwind classes directly in templates, use responsive prefixes, and implement dark mode—all without @apply in production.
This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks.
HeroUI v3 is a React component library built on Tailwind CSS v4 and React Aria, offering accessible, composable UI elements like Buttons, Modals, Forms, and Cards. It uses compound components (dot-notation subcomponents), semantic variants for intent-driven styling, and CSS variable theming with oklch color space—no provider required. Always fetch component docs before implementing to access complete examples and API references.