Search code examples
typescripttailwind-cssvitetaurishadcnui

Integrating shadcn/ui with Tailwind CSS v4 in a Tauri Application Using Vite and React

I'm developing a Tauri application with Vite and React and aim to integrate shadcn/ui using Tailwind CSS version 4. However, I'm encountering the following error during setup:

command used:

pnpm dlx shadcn@latest init

Progress: resolved 168, reused 96, downloaded 72, added 168, done
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✖ Validating import alias.

Current Configuration:

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["vite.config.ts"]
}

vite.config.ts:

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"),
    },
  },
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
    watch: {
      ignored: ["**/src-tauri/**"],
    },
  },
}));

Assumptions and Issues:

  1. Tailwind CSS Configuration:
    I assumed that with Tailwind CSS version 4, a separate tailwind.config.js file might not be necessary. However, the error suggests that the absence of this configuration is causing issues.

  2. Import Alias:
    The shadcn/ui installation guide mentions setting an import alias. Despite configuring aliases in tsconfig.json and tsconfig.node.json, the validation fails, indicating that the alias might not be recognized.

Request for Assistance:

Could someone provide guidance on the following:

  1. Is a tailwind.config.js file required with Tailwind CSS version 4?
    If so, what should it include to ensure proper configuration?

  2. How can I correctly set up the import alias to be compatible with shadcn/ui?
    Are there specific configurations needed in the tsconfig files or elsewhere?

  3. Are there additional steps or configurations necessary to integrate shadcn/ui with a Tauri application using Vite and React?

Any insights, examples, or resources would be greatly appreciated.

Solution

  • TL;DR: The Shadcn installation guide is incorrect. Using npm install tailwindcss installs TailwindCSS v4 by default, but the guide references the v3 installation. To install v3, you can use npm install tailwindcss@3 until Shadcn officially supports TailwindCSS v4. Aside from this, I believe you should be able to overcome the issue by reviewing the TailwindCSS v4 installation steps.

    v4 breaking changes compared to v3

    There have been several updates in TailwindCSS v4.

    The installation process has changed:

    Some older features have been deprecated:

    A CSS-first configuration has been implemented:

    Changed TailwindCSS v3 installation steps

    npm i tailwindcss installs v4 by default. To install v3, use:

    npm install -D tailwindcss@3

    Some related:

    Shadcn UI installation docs (step #02)

    The Shadcn UI installation with Vite guides are still based on TailwindCSS v3. You can either use them with npm install tailwindcss@3 or completely disregard them and follow the steps for TailwindCSS v4 instead: