Tailwind CSSを使う時に一緒に入れておきたいプラグイン・ライブラリ3選

Tailwind CSS IntelliSense

VSCodeの拡張機能です。

公式提供のもので、エディタでのリンティングや自動補完を有効にしてくれます。

clsx

複数のクラス名を結合するためのライブラリです。例えばpropsで受け取った値に応じてスタイルを変えたい場合などに便利です。

例えば以下のように、基本的に適用するスタイルに加えてalertLevelに応じたスタイリングを適用するといった用途です。

import clsx from "clsx";

const className = clsx(
  "mt-4",
  alertLevel === "danger" && "bg-red-500 text-white",
  alertLevel === "warn" && "bg-yellow-500 text-black",
  alertLevel === "info" && "bg-blue text-white",
);

設定はライブラリをインストールするのみです。

npm install --save clsx

prettier-plugin-tailwindcss

classに指定したTailwindCSSのクラス名を推奨された順番でソートしてくれます。

重複したクラスも自動的に削除してくれます。

typescript

const comp = () => {
  return (
-    <div class="pt-2 p-4 p-4">
+    <div class="p-4 pt-2">
      <p>Hello, World!!</p>
    </div>
  )
}

設定にはパッケージインストールとPrettierの設定が必要です。

npm install -D prettier prettier-plugin-tailwindcss

.prettirerc

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

🚀 まとめ

他にもおすすめがあれば是非コメントで教えてください！！

📢 Kobe.tsというTypeScriptコミュニティを主催しています

フロント・バックエンドに限らず、周辺知識も含めてTypeScriptの勉強会を主催しています。

オフラインでもくもくしたり、神戸を中心に関西でLTもしています。

盛り上がってる感を出していきたいので、良ければメンバーにだけでもなってください😣