👏

ElectronでTailwind CSS 4.0とshadcn/uiを使おうとしたら上手くいかなかった話

に公開
Electron
Tailwind CSS
shadcn/ui
tech

electron-viteのGetting Startedだとエラーが出る

https://electron-vite.org/guide/

最初に上記のelectron-viteのGetting Startedを見て以下のコマンドからプロジェクトを始めました。

pnpm create @quick-start/electron

実行してみると以下のエラーが出てしまいました。

Cannot find module '@tailwindcss/vite' or its corresponding type declarations.

ググって調べてみると以下のStackOverFlowの投稿を見つけ

https://stackoverflow.com/questions/79562593/electron-vite-react-tailwindcss-v4

どうもquick-startのパッケージを使うのが良くないらしく、マニュアルで入れる必要があるようです。

viteを使いマニュアルでインストール

pnpm create vite@latest erd-editor-alpha

上記のコマンドを実行するとフレームワークを選ぶ選択肢が出てくるので、ここでOthersを選択します。

するとElectronの選択肢が出てくるのでここを選択

後の選択肢はとりあえずデフォルトを選び、最後にフロントに使うフレームワークを聞かれるので好きなものを選びます。

そうしたらディレクトリに入り、必要なものをインストールします。

cd electron-sample
pnpm install

いくつかのライブラリがセキュリティ上ビルドされないので以下のコマンドで対応します。

pnpm approve-builds

実行

pnpm run dev

WSLから実行した場合、そのままだと実行されないので以下の対応をしていく

私はWSL環境で実行したのですが、WSLだとElectronに必要な共有ライブラリが無いのでインストールしていく必要がありました。下記のライブラリはおそらく手元の環境で変わると思います。

sudo apt install libnspr4 libnss3 libasound2t64

ついでにElectron内のリンクでwindows側のブラウザが使えるようにします。

sudo vim /usr/local/bin/xdg-open
xdg-open
#!/bin/bash
# WSL2用のxdg-openラッパー
powershell.exe -Command "Start-Process '$1'"

sudo chmod +x /usr/local/bin/xdg-open

WSLで起動すると90年代テイストのbarが出てくるので消すためにソースコードのapp.tsに以下を追記します。

app.ts
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
+   frame: false,
+   autoHideMenuBar: true, //Mac用タイトルバーに閉じるボタンを残す
    titleBarStyle: 'hidden',
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
    }
  })

Tailwind CSSを設定

公式ガイド通りにTailwindを導入します。

pnpm add -D tailwindcss postcss autoprefixer @tailwindcss/vite

Tailwind v4からはnpx tailwindcss init -pの必要性が無くなったらしくやらなくてよいです。
参考URL: https://tailwindcss.com/docs/installation/using-vite
configにTailwindの設定を入れます。

vite.config.ts
  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
+ import tailwindcss from '@tailwindcss/vite'

  // https://vite.dev/config/
  export default defineConfig({
+   plugins: [react(), tailwindcss()],
  })

最後にShadcn/UI を導入してみます
https://ui.shadcn.com/docs/installation/vite

tsconfig.json とtsconfig.app.json に以下を追加
compilerOptionsが既にあれば２つ項目を追加するだけ

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

Node.jsの型定義もインストール

pnpm add -D @types/node

以下も追加

vite.config.ts
import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
//~~~~省略~~~~
  ],
+ resolve: {
+   alias: {
+     '@': path.resolve(__dirname, 'src'),
+   },
+ },
})

どうもshadcnがまだTailwind v4に対応していないらしく以下を追記する必要がありました。
index.cssに以下を追加 (参考: https://zenn.dev/linux_club/articles/dd03b7fdfe48f8)

index.css
+ @tailwind base;

+ @tailwind components;

+ @tailwind utilities;

以下で初期化

pnpm dlx shadcn@latest init

これで無事使えるようになります。

Discussion