Vite Guide

How to set up Tamagui with Vite

Tamagui now has two plugins for Vite: one that sets up everything you need to get going, and a second that adds CSS compilation. Both are included in the @tamagui/vite-plugin package.

Installation

Add @tamagui/vite-plugin and update your vite.config.ts:

import { tamaguiExtractPlugin, tamaguiPlugin } from '@tamagui/vite-plugin'
export default defineConfig({
plugins: [
tamaguiPlugin({
config: './src/tamagui.config.ts',
components: ['tamagui'],
}),
// optional, adds the optimizing compiler:
tamaguiExtractPlugin(tamaguiConfig),
],
})

See the /docs/intro/installation and /docs/core/configuration docs for more on generally setting up Tamagui.

For a full-featured example, you can reference the experimental tamagui.dev site written using vite .