Tailwind CSSのエディタ設定

本記事では、Tailwind CSSを使用する際に便利な以下のエディタとその設定方法を紹介する。
バージョンは、どちらも2024/05/12時点で最新。

Tailwind CSS IntelliSense (v0.10.5)
prettier-plugin-tailwindcss (0.5.14)

インストール環境
Tailwind CSS IntelliSense (v0.10.5)
prettier-plugin-tailwindcss (0.5.14)
参考

インストール環境

Windows 11 Home 23H2
Node.js v20.12.2
Visual Studio Code 1.89 // インストール (1.88)と日本語化設定はこちらの記事参照
Prettier 3.2.5 // インストールと設定はこちらの記事参照
Tailwind CSS v3.4.3 // インストールはこちらの記事参照

Tailwind CSS IntelliSense (v0.10.5)

機能

VS CodeのTailwind CSS IntelliSenseには以下の機能がある。

Autocomplete…クラス名、CSS関数、ディレクティブを提示
Linting…CSSとマークアップ両方のエラーや潜在バグをハイライト
Hover Preview…ホバーでTailwind CSSクラス名のスタイルを表示
Syntax Highlighting…Syntax定義のハイライト

インストール方法

手順1. VS CodeでExtensionビューを開く(Ctrl+Shift+X)

手順2. “Tailwind CSS IntelliSense”を検索し、[インストール]

手順3. 公式の推奨設定を適用
コマンドパレット(Ctrl+Shift+P) -> 基本設定: ワークスペース設定を開く (JSON)で、
以下のようにsettings.jsonを編集 (コメントは消すこと)

// .vscode/settings.json
{
  // Prettierをデフォルトフォーマッタに指定 (Prettierの設定)
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // すべての言語で保存時自動フォーマットを無効化 (Prettierの設定)
  "editor.formatOnSave": true,

  // CSSファイルにTailwind CSSモードを適用 (Tailwind CSS IntelliSenseの固有設定)
  "files.associations": {
    "*.css": "tailwindcss"
  },

  // JSXの属性内で補完機能をトリガーできるようにする (Tailwind CSS IntelliSenseの固有設定)
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

prettier-plugin-tailwindcss (0.5.14)

機能

Prettier pluginを使用すると、クラスが推奨される順で自動ソートされる。
Tailwind CSSの設定で動作し、Prettier pluginなのでPrettierが動作する環境ならどこでも(e.g. IDE、コマンド…etc)動作する。

ソート規則

base → component → utilitiesレイヤの順
utilities内では以下の規則となる
- 他クラスをオーバライドするものを後回し e.g. p-4(padding: 4)よりpt-2(padding-top: 2)が後回し
- 異なる種別同士の場合は関連あるものをまとめつつ、レイアウトへの影響があるものを前に、装飾系を後回し
- “hover:”、”focus:”修飾子はまとめて修飾子無しの後
- “md:”、”lg:”レスポンシブ修飾子はthemeに設定した順(デフォルトでは小 -> 大の順)
Tailwindプラグインに未搭載のもの(3rdパーティ製ライブラリのクラスなど)は前

インストール方法

手順1. prettier-plugin-tailwindcssをインストール
以下のコマンドを実行し、インストールする。

npm install -D prettier prettier-plugin-tailwindcss

手順2. 設定ファイルを編集
Prettierの設定ファイルに、plugin設定を追加する (コメントは消すこと)

// .prettierrc
{
  "plugins": [
    "prettier-plugin-tailwindcss"  // 追加
  ]
}

手順3. 動作確認
以下のようなクラスを割り当てたHTML要素を準備し、

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

フォーマットでソートされることを確認。

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

参考

Tailwind CSS公式
https://tailwindcss.com/docs/editor-setup

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

prettier-plugin-tailwindcss
https://github.com/tailwindlabs/prettier-plugin-tailwindcss
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted