Tailwindcss v4のインストール方法や設定の変更について

開発環境関連
2025年8月20日

Tailwindcssがv4にバージョンアップされてしばらく経ちますが、個人的なSPAを構築しようとしたところ、初っ端のインストールで躓いてしまったので覚書。

v4からインストール方法が大幅に変更されたようで、v3.xでは以下のような感じでしたが、v4になってからはautoprefixerやinit -pが必要なくなってます！

//tailwind 3.x

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

↑だったのが、v4からは以下のように変更されてます。

//tailwind 4.0

npm i tailwindcss @tailwindcss/postcss;

さらにtailwind.config.ts(js)は必須ではなくなりました。
cssファイルの冒頭に指示コードを書くことでテーマ設定やコンテンツ指定が行えます。

// v4の正しいcss記述例

@import "tailwindcss";

@theme {
  --font-display: "Inter", sans-serif;
  --color-primary: oklch(0.65 0.2 150);
  --color-origin-green: #1db954;
}

↑をglobal.cssファイルに入れます。cssファイルに直書きできるようになってますね。
ここのimport部分は間違った記述を紹介をしているところがあったので注意してください。

【追記】2025/08/25 ———-
このglobal.cssに記載する部分はまだまだ間違いと思われる情報が散見されます。

//間違った例

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindcss v4で調べても↑のように促す（因みにChatGPTもそうでした）ところが多いです。
↑だと私の環境
node(v22.16)
vite(v7.1.2)
react(v19.1.1)
typescript(v5.8.3)
ではエラー出ます。
themeなどの指定もtailwind.config.ts(js)に記載するよう書かれているところが多いですが、v4からはglobal.cssに直接書けます。
v4公開当初から何か変更があったのかも知れないのと、他の環境での検証はしていないので、まぁなんとも言えないところもありますが、同じ環境で「あれ？」ってなってる人のご参考になれば。
私はここで結構悩まされました。
—————

また、tailwind.config.ts(js)が必要なくなったことでVS Code拡張機能Tailwind CSS Intellisenseが機能しなくなることがあります。
Tailwind CSS Intellisenseを利用している場合は最新版かどうかを確認し、最新版であればVS Codeで拡張機能のTailwind CSS Intellisenseを開くと対処方法がRecommended VS Code Settingsとして書かれています。以下ですね。

//　VS CodeのSetting.jsonに追記

"files.associations": {
  "*.css": "tailwindcss"
}



"editor.quickSuggestions": {
  "strings": "on"
}

↑をVS Codeのsetting.jsonに追記しましょう。

Tailwind CSS Intellisense拡張機能の詳細部分には、冒頭で触れた@importのことも
“For v4 and later, a .css file that imports a Tailwind CSS stylesheet (e.g. @import “tailwindcss”)”
と書かれていますね。
そのほかにもv4になっての変更がいろいろありそうです。

PAGE TOP