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

<Note>
  **Recommended for Vite 8:** Uniwind 1.10.1+ or Uniwind Pro 1.5.1+, which fix Vite 8 not prebundling `react-native-web`. Uniwind Pro 1.8.0+ also removes the deprecated `customResolver` alias option, which logs a deprecation warning on Vite 8.
</Note>

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.