使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

我正在用Vite和React开发一个Tauri应用程序,目标是使用Tailwind CSS版本4集成shadcn/ui。但是,我在安装过程中遇到了以下错误:

使用的命令:

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.

当前配置:

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/**"],
    },
  },
}));

假设和问题:

1. 顺风CSS配置:
   我假设在Tailwind CSS版本4中 tailwind.config.js 文件可能不是必需的。但是,错误表明缺少此配置会导致问题。

2. 导入别名:
   shadcn/ui安装指南提到了设置导入别名。尽管在中配置了别名 tsconfig.json 和 tsconfig.node.json ,验证失败,表明别名可能无法识别。

请求协助:

有人能就以下方面提供指导吗:

1. 是a tailwind.config.js Tailwind CSS版本4需要文件吗?
   如果是这样,它应该包括什么来确保正确的配置?

2. 如何正确设置导入别名以与shadcn/ui兼容?
   中是否需要特定的配置 tsconfig 文件或其他地方?

3. 使用Vite和React将shadcn/ui与Tauri应用程序集成是否需要额外的步骤或配置?

任何见解、例子或资源都将不胜感激。