> ## 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.

# Vite

> Use Uniwind with Vite and React Native Web

## 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 version | Uniwind version | Uniwind Pro version |
| ------------ | --------------- | ------------------- |
| Vite 7       | Uniwind 1.2.0+  | Uniwind Pro 1.0.0+  |
| Vite 8       | Uniwind 1.8.0+  | Uniwind Pro 1.3.0+  |

## Setup

Create `vite.config.ts` in your project root:

```ts lines vite.config.ts theme={null}
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'],
        }),
    ],
})
```

<Info>
  Point `cssEntryFile` to the CSS file where you import `tailwindcss` and `uniwind`. Keep it at your app root for accurate class scanning.
</Info>

<Tip>
  Restart Vite after changing your CSS entry or adding new themes.
</Tip>

## 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](https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite).

This gives you the web Storybook UI for visual and interaction testing.

## Related

<CardGroup cols={2}>
  <Card title="Quickstart" icon="laptop" href="/quickstart">
    Set up Uniwind in your React Native project
  </Card>

  <Card title="Global CSS" icon="css3" href="/theming/global-css">
    Learn more about configuring your CSS entry file
  </Card>

  <Card title="Custom Themes" icon="swatchbook" href="/theming/custom-themes">
    Create and register extra themes
  </Card>
</CardGroup>