[Guide] Setting up Tauri + React + Tailwind CSS v4 + shadcn/ui

pnpm add -D tailwindcss@latest @tailwindcss/vite@latest

npm install -D tailwindcss@latest @tailwindcss/vite@latest

pnpm add class-variance-authority clsx tailwind-merge lucide-react

npm install class-variance-authority clsx tailwind-merge lucide-react

pnpm add -D @types/node

npm install -D @types/node

@import "tailwindcss";

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1450 0 0);
  /* ... Other CSS variables */
}

.dark {
  --background: oklch(0.1450 0 0);
  --foreground: oklch(0.9850 0 0);
  /* ... Dark mode variables */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... Theme variable mapping */
}

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

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

const host = process.env.TAURI_DEV_HOST;

export default defineConfig(async () => ({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  // ... Remaining Tauri configurations
}));

{
  "compilerOptions": {
    // ... Existing settings
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css"; // or "./globals.css"

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

function App() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold">Hello, Tauri + React</h1>
    </div>
  );
}

export default App;

npx shadcn@latest add button
npx shadcn@latest add card
# Add more components as needed...