Installation & Configuration

Tailwind with Vite + React

Install Tailwind v4

npm create vite@latest my-app -- --template react
cd my-app
npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

src/index.css

@import "tailwindcss";

tailwind.config (optional customization)

Extend theme colors and fonts

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { cyan: "#06b6d4", violet: "#8b5cf6" },
      },
      fontFamily: {
        display: ["Outfit", "sans-serif"],
      },
    },
  },
};