# nativewind/nativewind

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/nativewind-nativewind).**

7,960 stars · 389 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/nativewind/nativewind
- Homepage: https://nativewind.dev
- awesome-repositories: https://awesome-repositories.com/repository/nativewind-nativewind.md

## Topics

`css` `nativewind` `react` `react-native` `react-native-web` `tailwind` `tailwindcss`

## Description

NativeWind is a utility-first CSS framework that integrates Tailwind CSS design patterns into React Native applications. It functions as a cross-platform styling system and style mapper that translates CSS-based utility classes into native style objects compatible with mobile platforms.

The framework provides a responsive UI engine that implements breakpoints, dark mode management, and platform-specific modifiers. It allows for the definition of custom themes including global colors, fonts, and spacing values to maintain a consistent visual identity across different devices.

The system covers broader capabilities for reactive styling and the mapping of utility classes to the internal properties of both native and third-party components. It supports adjusting application layouts based on screen size, device orientation, and operating system differences.

## Tags

### User Interface & Experience

- [CSS-to-Native Style Translators](https://awesome-repositories.com/f/user-interface-experience/css-to-native-style-translators.md) — Translates Tailwind CSS-like utility strings into native style objects compatible with the React Native styling engine.
- [Utility-First Styling](https://awesome-repositories.com/f/user-interface-experience/utility-first-styling.md) — Implements a utility-first styling system that translates Tailwind CSS design patterns into native style objects. ([source](https://cdn.jsdelivr.net/gh/nativewind/nativewind@main/README.md))
- [Cross-Platform UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-frameworks.md) — Enables the creation of a consistent design system across iOS and Android using a single set of utility styles.
- [Tailwind CSS Integration](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration.md) — Brings Tailwind CSS classes and utility-first design patterns directly into React Native applications.
- [Light and Dark Theme Systems](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/light-and-dark-theme-systems.md) — Implements light and dark mode toggles and custom color palettes that update across the entire mobile interface.
- [Custom Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/custom-theme-definitions.md) — Provides a system for defining global colors, fonts, and spacing values to maintain a consistent visual identity. ([source](https://nativewind.dev/llms.txt#nativewind-v4))
- [Dark Mode Toggles](https://awesome-repositories.com/f/user-interface-experience/dark-mode-toggles.md) — Provides utilities to toggle between light and dark visual themes based on system settings or user preferences. ([source](https://nativewind.dev/llms.txt#nativewind-v4))
- [Design Token Theming](https://awesome-repositories.com/f/user-interface-experience/design-token-theming.md) — Provides a global configuration that maps design tokens to native color and spacing values for runtime theme injection.
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Implements a responsive engine that activates specific styles based on predefined screen width breakpoints.
- [Responsive Breakpoint Mapping](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/constraint-based-layouts/responsive-breakpoint-mapping.md) — Implements a system for applying different style values based on screen width breakpoints using utility classes. ([source](https://nativewind.dev/llms.txt#nativewind-v4))
- [Utility Class Mappings](https://awesome-repositories.com/f/user-interface-experience/component-property-systems/utility-class-mappings.md) — Binds utility classes to component properties to ensure compatibility with external native libraries. ([source](https://cdn.jsdelivr.net/gh/nativewind/nativewind@main/README.md))
- [Responsive Mobile Layouts](https://awesome-repositories.com/f/user-interface-experience/interface-consistency-utilities/native-mobile-design-systems/responsive-mobile-layouts.md) — Adjusts application layouts and styles based on screen size, device orientation, and hardware platform differences.
- [Native UI Component Mappers](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-mappers.md) — Maps utility classes to the internal properties of native and third-party mobile view hierarchies.
- [Platform-Specific Resolutions](https://awesome-repositories.com/f/user-interface-experience/property-systems/platform-specific-resolutions.md) — Evaluates style rules at runtime to apply different visual properties based on the detected mobile operating system.
- [Style Object Interpolations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/runtime-style-updates/style-object-interpolations.md) — Generates final native style objects by merging static utility definitions with dynamic state and theme variables.
- [State-Based Style Application](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/state-based-style-application.md) — Adjusts appearance reactively based on device orientation, theme modes, and parent or child state changes. ([source](https://cdn.jsdelivr.net/gh/nativewind/nativewind@main/README.md))
- [Component Property Mappings](https://awesome-repositories.com/f/user-interface-experience/third-party-client-styling/component-property-mappings.md) — Provides a mechanism to map utility classes to the internal properties of third-party native components. ([source](https://nativewind.dev/llms.txt#nativewind-v4))

### Mobile Development

- [Native Styling Integration](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/native-styling-integration.md) — Integrates Tailwind CSS design patterns into React Native styling primitives for cross-platform mobile deployment.
- [Responsive UI Frameworks](https://awesome-repositories.com/f/mobile-development/responsive-ui-frameworks.md) — Ships a responsive UI engine implementing breakpoints, dark mode, and platform-specific modifiers for native interfaces.

### Web Development

- [Utility-First CSS Frameworks](https://awesome-repositories.com/f/web-development/utility-first-css-frameworks.md) — Provides a utility-first CSS framework for defining a universal design system across multiple mobile platforms.
- [Platform-Specific Styling](https://awesome-repositories.com/f/web-development/cross-platform-styling/platform-specific-styling.md) — Applies specific styles that trigger only on particular mobile operating systems or hardware device types. ([source](https://nativewind.dev/llms.txt#nativewind-v4))

### Programming Languages & Runtimes

- [Babel Transformations](https://awesome-repositories.com/f/programming-languages-runtimes/multi-pass-compiler-pipelines/babel-transformations.md) — Uses Babel transformations to parse styling strings and replace them with optimized runtime calls during build time.