wwwwwwwwwwwwwwwwwww

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:

npm create vite@latest
  • Remove "type": "module" from your package.json if you have it. (The type module support was removed because it was breaking metro, webpack or something).

Add @tamagui/vite-plugin

yarn add @tamagui/vite-plugin

Configuration

Update your vite.config.ts:

import { tamaguiExtractPlugin, tamaguiPlugin } from '@tamagui/vite-plugin'
import react from '@vitejs/plugin-react-swc' // or @vitejs/plugin-react
import tamaguiConfig from './src/tamagui.config.ts'
export default {
plugins: [
react(),
tamaguiPlugin(tamaguiConfig),
// optional, adds the optimizing compiler:
process.env.NODE_ENV === 'production' ? tamaguiExtractPlugin(tamaguiConfig) : null,
].filter(Boolean),
}

Or a minimal manual setup:

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',
},
}

Previous

Expo

Next

Webpack