Skip to main content

​
Step 1: Install Uniwind and Tailwind

Uniwind only supports Tailwind 4.

Installation

npm install uniwind@beta tailwindcss

yarn add uniwind@beta tailwindcss

bun add uniwind@beta tailwindcss

Create global.css file

This file will serve as your CSS entry point.
@import 'tailwindcss';
@import 'uniwind';
We recommend keeping this file in the root of your project or in the app/src directory.

Import global.css file

Import the CSS file in your App.tsx (main component).
import './global.css' // <-- file from previous step

// other imports

export const App = () => {} // <-- your app's main component
Don’t import global.css in the root index.ts/index.js file where you register the Root Component, as any change will trigger a full reload instead of hot reload.
// ‼️ Don't do that
import './global.css';

import { registerRootComponent } from 'expo';
import { App } from './src';  // <- ✅ import it somewhere in the src folder

registerRootComponent(App);

​
Step 2: Configure metro

  • Expo
  • Bare React Native

Modify metro.config.js

If you don’t see a metro.config.js file in your project, you can create it with npx expo customize metro.config.js.
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro'); 

const config = getDefaultConfig(__dirname);

// your metro modifications

module.exports = withUniwindConfig(config, {  
  // relative path to your global.css file (from previous step)
  cssEntryFile: './src/global.css',
  // (optional) path where we gonna auto-generate typings
  // defaults to project's root
  dtsFile: './src/uniwind-types.d.ts'
});
We recommend placing the uniwind-types.d.ts file in the src or app directory, as it will be automatically included by TypeScript. For custom paths (e.g., root of your project), please include it in your tsconfig.json.

​
Step 3: (Optional) Enable Tailwind IntelliSense for Uniwind in VSCode

  1. Open the VSCode (Windsurf/Cursor) settings.json file in your editor.
  2. Add the following configuration:
{
    "tailwindCSS.classAttributes": [
        "class",
        "className",
        "headerClassName",
        "contentContainerClassName",
        "columnWrapperClassName",
        "endFillColorClassName",
        "imageClassName",
        "tintColorClassName",
        "ios_backgroundColorClassName",
        "thumbColorClassName",
        "trackColorOnClassName",
        "trackColorOffClassName",
        "selectionColorClassName",
        "cursorColorClassName",
        "underlineColorAndroidClassName",
        "placeholderTextColorClassName",
        "selectionHandleColorClassName",
        "colorsClassName",
        "progressBackgroundColorClassName",
        "titleColorClassName",
        "underlayColorClassName",
        "colorClassName",
        "drawerBackgroundColorClassName",
        "statusBarBackgroundColorClassName",
        "backdropColorClassName",
        "backgroundColorClassName",
        "ListFooterComponentClassName",
        "ListHeaderComponentClassName"
    ],
    "tailwindCSS.classFunctions": [
        "useResolveClassNames"
    ]
}

​
Next steps

Now that you have your Uniwind project running, explore these key features:

API documentation

Explore the complete API reference for Uniwind hooks and utilities.

Theming

Customize themes, colors, and design tokens for your React Native app.

React Native components

Style built-in React Native components with Tailwind classes.

3rd party components

Integrate Uniwind with third-party component libraries.
Need help? Start a discussion on GitHub.
⌘I