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.
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.
Installation
- Remove
"type": "module"
from yourpackage.json
if you have it. (The type module support was removed because it was breaking metro, webpack or something). - 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 Installation and Configuration docs for more on generally setting up Tamagui.
Previous
Expo
Next
create-tamagui