Cursorエディタの設定-Tailwind CSS 公式プラグインの設定

Tailwind CSSを快適に利用するための公式プラグインの導入についてのまとめ

初回公開日2025/7/4

最終更新日2025/7/4

Next.jsのインストール時にTailwind CSS v4がデフォルトで入るようになりました（2025年7月3日現在）。「Cursor」エディタでTailwind CSS v4を快適に利用するため、Tailwind CSS公式のプラグインを2つ導入したので、その記録を残します。

といっても基本は、Tailwind CSS公式サイトのエディタ設定ページで説明してくれている通りに進めるだけです。

1.Tailwind CSS IntelliSenseの導入

これは、私のような初心者には不可欠なプラグインです。うろおぼえのCSSを例えば fontと入力するとつづけて入力するべき候補をコンテキストメニューとしてピックアップしてくれます。これがないと、いちいち公式サイトのドキュメントを漁らないとならないので、その手間が省けるありがたいツールです。

インストール手順

これは普通に「拡張機能」として提供されていますので、「拡張機能」マークをクリックするか、Cursorメニューの「表示」-「拡張機能」をクリックします。

左上の検索窓からTailwind CSS IntelliSenseを検索して検索結果のおそらくは一番上に表示される「Tailwind CSS IntelliSense」をクリックして、Cursorにインストールします。

下記のキャプチャーはすでにイントール済みではありますが、こんな感じです。

Cursor で Tailwind CSS IntelliSense を検索しインストールしている画面

まあ、もうこれで設定候補とかはリストアップしてくれるようになるのですが、もう一点、大事なポイントがありました。

警告が出た・・

Next.jsをnpx create-next-app@latestでいれて、global.cssを参照するといきなりワーニングがでます。

global.css を開いた際の Tailwind CSS IntelliSense 警告

「えっ」てなりました。「まだ、何もしていないのに。。」と。まあ、何もしていないからこうなっているのですが。これは、この段階だとCursorエディタが普通のCSSしか認識できていないので、Tailwind CSS v4の独自仕様を理解できていないことが原因です。

拡張機能に表示される「Tailwind CSS IntelliSense」の内容をスクロールすると記載があります。「推奨設定」ってやつです。

Tailwind CSS IntelliSense の推奨設定を確認している画面

推奨設定を追加

そこで、Cursorメニューの「Cursor」-「基本設定」-「設定」をクリックします。

検索窓にfiles.associationsと入力して検索すると、設定項目が表示されるので、「項目を追加」ボタンをクリックして下記のように*css：tailwindcssを設定します。

Tailwind CSS IntelliSenseの推奨設定をおこなっている画面1

これで先程のglobal.cssのワーニングは消えました。一応、同様にしてもう一つの推奨設定editor.quickSuggestionsもやっておきます。

strings項目をonに変更します。 Tailwind CSS IntelliSenseの推奨設定をおこなっている画面2

これで、Tailwind CSS IntelliSenseのインストールと設定は完了です。

2.prettier-plugin-tailwindcssの導入

これはCSSの順番を推奨順に並べ替えてくれるプリティアです。初心者にはかなりありがたいものです。Tailwind CSS v4に限ったプリティアではありませんので、v3.5とかを利用する場合でも効果があります。

npmでインストール

これは一旦、ターミナルで作業します。手順は下記にもあります。

Tailwind CSS公式の配布元

インストールしたいプロジェクトディレクトリへ移動して、コマンドを実行します。

zsh

npm install -D prettier prettier-plugin-tailwindcss

install -Dとなっているのは、「開発依存（devDependencies）としてパッケージをインストールする」ことを意味しています。prettier や eslint、@types/* などは開発中だけ使うツールであり、本番環境（production）では不要です。本番ビルドを小さく、軽量に保つためにも、こうした開発専用ツールは -D で入れるのが正解です。

.prettierrc を作成

インストールが完了したら、プロジェクトディレクトリ直下に「.prettierrc」という名称のファイル作成します。そのファイルに下記のように記述して保存します。

json : .prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

こんな感じです。

Prettier 拡張機能を設定

もし、まだCursorエディタでフォーマッターを利用していない場合は拡張機能からPrettier - Code formatterをインストールします。 prettier-plugin-tailwindcssはいわばルール設定が記述されているので、エディタ側でこれを利用するには別途フォーマッターが必要です。