Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Uniwind works with Vite through React Native Web, Tailwind, and the Uniwind Vite plugin. Use this setup when you build a web target with Vite instead of Metro.

​
Version Support

Vite versionUniwind versionUniwind Pro version
Vite 7Uniwind 1.2.0+Uniwind Pro 1.0.0+
Vite 8Uniwind 1.8.0+Uniwind Pro 1.3.0+

​
Setup

Create vite.config.ts in your project root:
vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { uniwind } from 'uniwind/vite'
import { defineConfig } from 'vite'
import { rnw } from 'vite-plugin-rnw'

export default defineConfig({
    plugins: [
        rnw(),
        tailwindcss(),
        uniwind({
            // support same configuration as Metro plugin
            cssEntryFile: './src/App.css',
            extraThemes: ['premium'],
        }),
    ],
})
Point cssEntryFile to the CSS file where you import tailwindcss and uniwind. Keep it at your app root for accurate class scanning.
Restart Vite after changing your CSS entry or adding new themes.

​
Storybook

Storybook works via Vite too. Use the same uniwind/vite plugin in your Storybook Vite config and follow the React Native Web + Vite guide. This gives you the web Storybook UI for visual and interaction testing.

Quickstart

Set up Uniwind in your React Native project

Global CSS

Learn more about configuring your CSS entry file

Custom Themes

Create and register extra themes