installation-vite.md

Vite Setup

1. Install the dependencies

npm install @react-zero-ui/core

npm install @tailwindcss/postcss

---

Setup

Vite

2. Add the plugin to your vite.config.ts

// vite.config.*
import zeroUI from "@react-zero-ui/core/vite";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindCss from "@tailwindcss/postcss";

export default defineConfig({
	// Remove the default `tailwindcss()` plugin - and pass it into the `zeroUI` plugin
	plugins: [zeroUI({ tailwind: tailwindCss }), react()],
});

3. Import Tailwind CSS

// global.css
@import "tailwindcss";

Thats it.

The plugin will add the data-* attributes to the body tag (no FOUC) and the CSS will be injected and transformed by tailwind.