🚨
TailwindCSSで「could not determine executable to run」が発生する様になった
概要
Vite + React + TailwindCSS構成のとあるプロジェクトで、TailwindCSSのバージョンを4系にアップデートすると npx tailwindcss -i ./input.css -o ./src/main.css --watch
とかで監視していた部分でタイトルのエラーが出るようになりました。本記事はその時の対応した内容になります。
原因
ざっと調べてみると4系で色々変わったみたいなので、以下を参考に修正して行きます。
修正
まずは vite.config.ts
を修正する為 @tailwindcss/vite
をインストールします。
また後述する npx tailwindcss
~ 部分の修正の為に @tailwindcss/cli
もインストールしておきます。
yarn add -D @tailwindcss/vite @tailwindcss/cli
次に vite.config.ts
を修正します。
import tailwindcss from '@tailwindcss/vite'; // 追加
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()], // tailwindcss()追加
});
次に @tailwind base;
〜としていた箇所を以下に修正します。
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */
@import "tailwindcss";
最後に npx tailwindcss -i ./input.css -o ./src/main.css --watch
の部分を以下に変更します。
npx @tailwindcss/cli -i ./input.css -o ./src/main.css --watch
これで特にエラーも出ず動かす事ができました! ✨
Discussion