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

Question

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.

Answer 1

Update 2025-02-06

Now, Shadcn officially started supporting TailwindCSS v4. See:

• How to upgrade your Shadcn project from TailwindCSS v3 to v4 - StackOverflow
• Upgrade guide - Shadcn Docs
• shadcn-ui/ui #6585: Known issues - GitHub

Original

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:

• Upgrade guide - TailwindCSS v3 to v4

Some older features have been deprecated:

• Changed npx tailwindcss to npx @tailwindcss/cli - TailwindCSS v4 Docs
• Removed npx tailwindcss init process - StackOverflow

A CSS-first configuration has been implemented:

• CSS-first configuration instead of tailwind.config.js - TailwindCSS v4 Docs
• Use @config directive to legacy JavaScript-config - StackOverflow

Changed TailwindCSS v3 installation steps

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

npm install -D tailwindcss@3

• TailwindCSS v3 installation guide with Vite - TailwindCSS v3 Docs

Some related:

• Unable to Run npx tailwindcss init -p - "Could Not Determine Executable to Run" - Github
• Problem installing TailwindCSS with "npx tailwindcss init -p" command - StackOverflow
• shadcn/app-tailwind-v4 - GitHub
• shadcn/ui #2996 - GitHub

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:

• Installing TailwindCSS with Vite - v4 Docs (use instead of step#02 for TailwindCSS v4)
• shadcn-ui/ui #6446: Not validating after Tailwind v4 update - GitHub
• shadcn-ui/ui #6427: Upgrade to TailwindCSS v4 - GitHub
• shadcn-ui/ui #6585: Tailwind v4 and React 19 - GitHub