TailwindCSS の Prettier の設定方法

TailwindCSS の Prettier を使ったフォーマット方法を解説します。

導入することで className に記述した class を自動で並び替えてくれます。

インストール

Prettier と plugin をインストールします。

npm install -D prettier prettier-plugin-tailwindcss

設定ファイルの追記

Prettier の設定ファイル.prettierrcに、以下を追記します。

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

手動でフォーマットを実行する

Prettier を実行します。

npx prettier . --write

まとめ

TailwindCSS の Prettier を使ったフォーマット方法を解説しました。

コードの統一性を保つために、導入を検討してみてはいかがでしょうか？

参考

• Prettier
• prettier-plugin-tailwindcss