【Nuxt3】Tailwind CSS＋Prettierで気持ちよくなろう

あ”あ”ー整頓したい整地したい綺麗にしたいぃぃ"ー

TailwindCSSを使っていると、だいたいこんな感じになって

<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white"></div>

タグの中になんのcssが当たっているのかよくわかんなくなるんですよね

えっ？あなたもそうなんですか？私たち仲良くなれそうですね

せめてクラスの順番が綺麗に整頓されていて欲しい

⭐️そんな私たちの願いが叶いました⭐

これを使えばマージンとパディングをバラバラに書いても

- <button class="pt-2 mb-3 m-5 p-5"></button>
+ <button class="m-5 mb-3 p-5 pt-2"></button>

綺麗になる

ホバーが2つ離れていても

- <button class="hover:scale-150 opacity-50 hover:opacity-75 "></button>
+ <button class="opacity-50 hover:scale-150 hover:opacity-75"></button>

綺麗になる

レスポンシブをバラバラに書いても

- <button class="lg:m-10 sm:m-5 md:m-8"></button></button>
+ <button class="sm:m-5 md:m-8 lg:m-10"></button>

綺麗になる

片付いてるって気持ちいいね!!

導入手順

（1） まず、インストール

bun install -D prettier prettier-plugin-tailwindcss
# npm install -D prettier prettier-plugin-tailwindcss ⬅️npmの人はこっち
# yarn add --dev prettier prettier-plugin-tailwindcss ⬅️yarnの人はこっち

（2） package.jsonを確認する

dependenciesに以下の2つが追加されていればok

  "dependencies": {
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.12",
  }

(3) ルート直下に.prettierrc.ymlを作成し、以下を記述

{ plugins: ["prettier-plugin-tailwindcss"] }

(4) 適当なvueファイルで動作確認

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

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

どういう順番で並ぶのか気になる人は公式ドキュメントを見てね

終わりに

以下の拡張機能も入れておくとクラスの予測が出るのでおすすめ

参考記事