CursorでReact + Tailwind CSS IntelliSenseを設定する方法

# はじめに

CursorエディタにてReactコンポーネント内でTailwindのクラスを入力し始めると
Tailwind CSS IntelliSense の機能がうまく動かなかったので設定する手順を説明します。

# そもそもTailwind CSS IntelliSenseって
Tailwind CSS IntelliSense はどんなものかというと
Tailwind CSSのClass名を自動で補完できるようになる必須の拡張機能です。

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

# 前提条件

- Cursorエディタがインストールされていること
- Node.jsとnpmがインストールされていること
- Reactプロジェクトがすでにセットアップされていること

https://www.cursor.com/

# 手順

### 1. Tailwind CSSのインストール

まず、プロジェクトにTailwind CSSをインストールします。

https://tailwindcss.com/

```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

### 2. Tailwind CSSの初期化

Tailwind CSSの設定ファイルを生成します。

```bash
npx tailwindcss init -p
```

これにより、`tailwind.config.js`と`postcss.config.js`ファイルが作成されます。

### 3. Tailwind CSSの設定

`tailwind.config.js`ファイルを開き、以下のように更新します

```javascript
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

`postcss.config.js`ファイルを開き、以下のように更新します

```javascript
import tailwindcss from "tailwindcss";

export default {
  plugins: [tailwindcss],
};

```

### 4. CSSファイルの作成

`src`ディレクトリに`index.css`ファイル（まだ存在しない場合）を作成し、以下の内容を追加します：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

この時、``Unknown at rule @tailwind``とエラーが発生すると思うので
その問題解決としてTailwind CSSに必須の拡張機能である

**PostCSS Language Support**

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

をインストールします。


### 5. VSCode設定のエミュレート

CursorはVSCode互換の設定を使用するので、`settings.json`ファイルを検索しそちらに下記の内容を設定します。

```json
{
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  },
  "editor.inlineSuggest.enabled": true,
  "editor.suggestSelection": "first",
  "tailwindCSS.emmetCompletions": true
}
```

なにを設定しているか一つ一つ説明すると
```json
"editor.quickSuggestions": { "strings": true }
```

この設定は、文字列内でも素早い提案（クイックサジェスト）を有効にします。
Tailwind CSSでは、クラス名を文字列として指定するため、この設定が重要です。
これにより、className="..." の中でタイピングしている際にも提案が表示されます。

```json
"tailwindCSS.includeLanguages": { "javascript": "javascript", "html": "HTML" }
```

この設定は、Tailwind CSS IntelliSenseを特定の言語ファイルで動作させるように指定します。
ここではJavaScriptとHTMLファイルでTailwind CSSの補完を有効にしています。
ReactではJSXを使用するため、JavaScriptファイルでの有効化が特に重要です。

```json
"editor.inlineSuggest.enabled": true
```

インラインサジェスト機能を有効にします。
これにより、タイピング中に直接テキスト内に灰色で補完候補が表示されます。
Tabキーを押すことで、この候補を簡単に受け入れることができます。

```json
"editor.suggestSelection": "first"
```

サジェストリスト（補完候補リスト）が表示されたとき、最初の項目を自動的に選択します。
これにより、Enterキーを押すだけで最も関連性の高い候補を素早く選択できます。

```json
"tailwindCSS.emmetCompletions": true
```

Tailwind CSSのクラス名に対してEmmet式の補完を有効にします。
Emmetは短縮記法でHTMLやCSSを素早く記述するための機能です。
この設定により、Tailwindのクラス名をより効率的に入力できるようになります。

### 6. Cursorの再起動

設定を反映させるために、Cursorエディタを再起動します。

### 7. Tailwind CSS IntelliSenseの確認

Reactコンポーネント内でTailwindのクラスを入力し始めると、IntelliSenseが機能し始めるはずです。例えば：

```jsx
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を設定できます。