🚨

TailwindCSSで「could not determine executable to run」が発生する様になった

2025/01/29に公開

概要

Vite + React + TailwindCSS構成のとあるプロジェクトで、TailwindCSSのバージョンを4系にアップデートすると npx tailwindcss -i ./input.css -o ./src/main.css --watch とかで監視していた部分でタイトルのエラーが出るようになりました。本記事はその時の対応した内容になります。

原因

ざっと調べてみると4系で色々変わったみたいなので、以下を参考に修正して行きます。

https://tailwindcss.com/docs/installation/using-vite

修正

まずは 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