Tauri v2 + Vite + React + tailwindcss v4 + Shadcn/ui のセットアップ

よく忘れるので備忘録として残す。

Setup

1. tauri プロジェクトの作成

ここで vite と react を選択しておく

$ pnpm create tauri-app
# プロジェクト名と識別子
? Project name (tauri-app) ›
? Identifier (com.tauri-app.app) ›
...

2. TailwindCSS を導入

pnpm install tailwindcss @tailwindcss/vite

3. vite.config.ts に tailwindcss を設定

ついでに alias も設定しておくと @ での省略もできて楽かも。

import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import path from "path"

export default defineConfig({
  plugins: [
    react(),
+    tailwindcss(),
  ],
+ resolve: {
+   alias: {
+     "@": path.resolve(__dirname, "./src"),
+   },
+ }, 
  ...
})

path でエラーが出るときは
pnpm i -D @types/node を行うこと。

4. src/App.css に tailwindcss をインポート

このとき App.css には Tauri デフォルトのCSSが記述されており、削除しなかったら競合してややこしくなるので、下記を追記ではなく上書きすること。

@import "tailwindcss";

5. tsconfig.json にtailwindocssのエイリアスを登録

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

最近は baseUrl いらなくなったみたいです
詳しくは https://github.com/microsoft/TypeScript/issues/62508

6. shadcn をインストール

pnpm dlx shadcn@latest init -t vite

以上。これでちゃんと shadcn/ui が表示をバグらずに使えるようになっているはず。

参照リンク