tailwindcssのインストール

vscode拡張のインストール

補完や色の確認ができるようになり便利です tailwindcss.com

prettierとの連携

導入すると自動フォーマット時にtailwindcssのclass記述がいい感じの順番にソートされるようになりスッキリします

prettier本体, 拡張プラグイン、vscode拡張のインストール

npm install -D prettier prettier-plugin-tailwindcss
vscode拡張でprettier検索してインストール

prettier設定ファイル作成

prettier.io

prettierとtailwindcssの連携

prettier設定ファイルにpluginsを追記

plugins: ['prettier-plugin-tailwindcss'],

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

自動フォーマットの有効化

vscode->preferences->settings
Workspaceに切り替え
formatterで検索->Default Formatterでprettier選択、Format On Saveにチェック

動作確認

以下のコンポーネントをコピペ->保存していい感じにフォーマットされればOK

const TEST=()=> {
  const value=1
  return (
    <h1 className="font-bold underline text-3xl">
      Hello world!
    </h1>
  )
}

追加作業

特定の変数名に対して補完を適用させたい

共通化などの都合でclassNameに指定する文字列を外部で宣言したくなると思います。
現状のままだと素のstringに対してtailwindcssの拡張が機能しないので、使いにくくなってしまいます。

const style="text-3xl font-bold underline" // <- ここに補完やフォーマットを適用させたい
<div className={style}>...

解決策を調べたところ、変数名のパターンを指定して補完を適用させる方法があるようです。 stackoverflow.com 自分はTAILWINDという名前のオブジェクトとtailwind_から始まるstringに補完を適用させたかったので以下を指定してみました。

.vscode/settings.json
===
    "tailwindCSS.classAttributes": [
        "class",
        "className",
        "ngClass",
        "TAILWIND",
        "tailwind_.*"
    ]

const TAILWIND = {
    BG_COLOR: 'bg-slate-100',
    TEXT_COLOR: 'text-zinc-400',
    TEXT_COLOR_STRONG:'text-orange-600'
}
const tailwind_style = 'text-3xl font-bold underline'

またprettierによる自動ソートも同じような設定ができるようですが、変数名に対しては適用できませんでした。
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
とりあえず補完が効くようになったので満足してます。

備忘

(react)tailwindcss導入->vscodeで自動補完するまで