High-performance Tailwind CSS v4 engine for React Native. Use for styling React Native apps with Tailwind utility classes, CSS variables, and native-first features like platform selectors, responsive breakpoints, data selectors, and custom themes.
Uniwind is a native-first CSS engine that brings Tailwind CSS v4 to React Native. It uses a custom CSS parser to enable true CSS-based theming, platform-specific styling, and high-performance rendering.
This project heavily relies on Uniwind over previous tooling (like Nativewind).
If you are attempting complex features with Uniwind (like animations, new themes, or refactoring), YOU ABSOLUTELY MUST read the accompanying context files.
To prevent incorrect code generation (such as using web-specific @apply blocks badly, using Platform.select() instead of native selectors, or migrating improperly), please run view_file on the following documents depending on your task:
Read this when: Setting up Global CSS, changing Color Tokens, defining new themes, using light-dark(), or manipulating Uniwind.updateCSSVariables().
Selectors (Platform, Data, Responsive)
Read this when: Making Platform-specific adjustments (
ios:,android:), building React state-driven styles (data-[state=open]:), or making the app Responsive (md:).
Read this when: Dealing with libraries that don't support
classNamenatively. This covers how to wrap components withwithUniwindto map Tailwinds into props likesize={48}. It also explainsuseCSSVariable()anduseResolveClassNames().
Read this when: Building keyframe animations (
animate-spin) or transitions (transition-colors). Note that Uniwind implements pure Tailwind keys translated silently to Reanimated.
Read this when: Refactoring older
nativewindimplementations, fixing broken<ThemeProvider>contexts, removingtailwind.config.js, or migratingcssInterop.
If simply verifying setup:
Uniwind must be the outermost wrapper in metro.config.js.
const { getDefaultConfig } = require("expo/metro-config");
const { withUniwindConfig } = require("uniwind/metro");
const config = getDefaultConfig(__dirname);
module.exports = withUniwindConfig(config, {
cssEntryFile: "./global.css",
polyfills: { rem: 14 },
});
Always use ./global.css. Note that it must be flat to determine correctly the app project root. package.json imports outside this root will fail without @source tags pointing to their directories.