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.

Install

For a full-featured example, you can create a new app using npm create tamagui@latest and select the 'Simple Web' option which includes a Vite setup.

Create a new Vite project:


yarn create vite@latest

Add @tamagui/vite-plugin:


yarn add @tamagui/vite-plugin

Configuration

Update your vite.config.ts:

vite.config.ts
import react from '@vitejs/plugin-react-swc'
import { tamaguiPlugin } from '@tamagui/vite-plugin'

export default {
  plugins: [
    react(),
    tamaguiPlugin({
      // points to your tamagui config file
      config: 'src/tamagui.config.ts',
      // points to any linked packages or node_modules
      // that have tamagui components to optimize
      components: ['tamagui'],
      // turns on the optimizing compiler
      optimize: true,
    }),
  ].filter(Boolean),
}

Or a minimal manual setup for Vite that just adds some compatibility for react-native-web and react-native extensions:

config.define = {
  DEV: `${process.env.NODE_ENV === 'development' ? true : false}`,
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}

config.resolve.alias['react-native'] = 'react-native-web'

// set up web extensions
config.optimizeDeps.esbuildOptions = {
  ...config.optimizeDeps.esbuildOptions,
  resolveExtensions: [
    '.web.js',
    '.web.jsx',
    '.web.ts',
    '.web.tsx',
    '.mjs',
    '.js',
    '.mts',
    '.ts',
    '.jsx',
    '.tsx',
    '.json',
  ],
  loader: {
    '.js': 'jsx',
  },
}

Expo

One

Edit this page on GitHub.