はじめに
CursorエディタにてReactコンポーネント内でTailwindのクラスを入力し始めると
Tailwind CSS IntelliSense の機能がうまく動かなかったので設定する手順を説明します。
そもそもTailwind CSS IntelliSenseって
Tailwind CSS IntelliSense はどんなものかというと
Tailwind CSSのClass名を自動で補完できるようになる必須の拡張機能です。
前提条件
- Cursorエディタがインストールされていること
- Node.jsとnpmがインストールされていること
- Reactプロジェクトがすでにセットアップされていること
手順
1. Tailwind CSSのインストール
まず、プロジェクトにTailwind CSSをインストールします。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2. Tailwind CSSの初期化
Tailwind CSSの設定ファイルを生成します。
npx tailwindcss init -p
これにより、tailwind.config.jsとpostcss.config.jsファイルが作成されます。
3. Tailwind CSSの設定
tailwind.config.jsファイルを開き、以下のように更新します
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.jsファイルを開き、以下のように更新します
import tailwindcss from "tailwindcss";
export default {
plugins: [tailwindcss],
};
4. CSSファイルの作成
srcディレクトリにindex.cssファイル（まだ存在しない場合）を作成し、以下の内容を追加します：
@tailwind base;
@tailwind components;
@tailwind utilities;
この時、Unknown at rule @tailwindとエラーが発生すると思うので
その問題解決としてTailwind CSSに必須の拡張機能である
PostCSS Language Support
をインストールします。
5. VSCode設定のエミュレート
CursorはVSCode互換の設定を使用するので、settings.jsonファイルを検索しそちらに下記の内容を設定します。
{
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
"editor.inlineSuggest.enabled": true,
"editor.suggestSelection": "first",
"tailwindCSS.emmetCompletions": true
}
なにを設定しているか一つ一つ説明すると
"editor.quickSuggestions": { "strings": true }
この設定は、文字列内でも素早い提案（クイックサジェスト）を有効にします。
Tailwind CSSでは、クラス名を文字列として指定するため、この設定が重要です。
これにより、className="..." の中でタイピングしている際にも提案が表示されます。
"tailwindCSS.includeLanguages": { "javascript": "javascript", "html": "HTML" }
この設定は、Tailwind CSS IntelliSenseを特定の言語ファイルで動作させるように指定します。
ここではJavaScriptとHTMLファイルでTailwind CSSの補完を有効にしています。
ReactではJSXを使用するため、JavaScriptファイルでの有効化が特に重要です。
"editor.inlineSuggest.enabled": true
インラインサジェスト機能を有効にします。
これにより、タイピング中に直接テキスト内に灰色で補完候補が表示されます。
Tabキーを押すことで、この候補を簡単に受け入れることができます。
"editor.suggestSelection": "first"
サジェストリスト（補完候補リスト）が表示されたとき、最初の項目を自動的に選択します。
これにより、Enterキーを押すだけで最も関連性の高い候補を素早く選択できます。
"tailwindCSS.emmetCompletions": true
Tailwind CSSのクラス名に対してEmmet式の補完を有効にします。
Emmetは短縮記法でHTMLやCSSを素早く記述するための機能です。
この設定により、Tailwindのクラス名をより効率的に入力できるようになります。
6. Cursorの再起動
設定を反映させるために、Cursorエディタを再起動します。
7. Tailwind CSS IntelliSenseの確認
Reactコンポーネント内でTailwindのクラスを入力し始めると、IntelliSenseが機能し始めるはずです。例えば：
function MyComponent() {
return <div className="bg-blue-500 p-4 rounded-lg"></div>;
}
bg-と入力した時点で、Tailwindの色のサジェストが表示されるはずです。
トラブルシューティング
- IntelliSenseが機能しない場合は、Cursorの設定で「Use VS Code settings」オプションが有効になっていることを確認してください。
- Tailwind CSSが正しくインストールされ、設定されていることを確認してください。
まとめ
以上の手順で、CursorエディタでReactプロジェクトにTailwind CSS IntelliSenseを設定できます。