tailwindcssのスタイルの再利用：定数で使用する場合のtips

はじめに

tailwindcssのスタイルを定数として再利用することは、一般的に推奨されていません。コンポーネント化やユーティリティクラスの直接使用が、tailwindcssの思想に沿った方法です。しかし、特定の状況下では定数を使用したくなる場合もあるでしょう。ここでは、tailwindcssのスタイルを定数で置いた場合でも補完やスタイルソートするための小さなtipsを紹介します。

※ 公式に、styleを再利用したい場合の対処方法をまとめられているので、こちらをご参考にしてください。

VSCode での tailwindcss の補完

定数内でtailwindcssのクラスを使用する際、VSCodeの補完機能（Tailwind CSS IntelliSense）を活用できます。

settings.jsonに以下の設定を追加してください
（.*Styles*以外はデフォルトで入っているものです。上書きするために、こちら全てコピペすることをおすすめします。）

.vscode/settings.json

{
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list",
    ".*Styles*"
  ]
}

この設定により、someStylesやbuttonStylesなどの変数名でもtailwindCSSの補完が効くようになります。

prettier-plugin-tailwindcssの設定

prettier-plugin-tailwindcssとは、tailwind公式のprettierプラグインです。クラス名を自動で並び替えてくれます。

こちらは、classやclassNameといった直接利用のみに適用され、定数に一度置く場合は並び替えしてくれません。その対処方法として、clsxやcvaなどのライブラリを使って定数をラップしてあげることで変数に置いたとしても自動でクラス名を並び替えてくれます。（参考: Sorting classes in function calls）

まず、prettierの設定ファイルに以下の設定を追加してください。（例は、prettier.config.mjsでclsxライブラリを利用）

prettier.config.mjs

/** @type {import("prettier").Config} */
const prettierConfig = {
  ...
  tailwindFunctions: ['clsx'],
  plugins: ['prettier-plugin-tailwindcss', 'prettier-plugin-prisma'],
};

export default prettierConfig;

上記の設定を完了後、クラス名をclsxでラップすることで、自動で並び替えをしてくれるようになります。

Hoge.tsx

const inputStyle = clsx('flex items-center justify-center bg-white');

まとめ

tailwindcssのスタイルを定数として再利用することは一般的に推奨されていませんが、特定の状況下では必要になる場合もあります。このような場合に備えて、以下のtipsを紹介しました：

1. VSCodeでのtailwindcss補完:
   • settings.jsonに特定の設定を追加することで、変数名でもTailwindCSSの補完が効くようになります
2. prettier-plugin-tailwindcssの設定:
   • prettierの設定ファイルにtailwindFunctionsを追加し、clsxなどのライブラリを使用することで、定数に置いたtailwindcssクラスも自動で並び替えられるようになります

これらのtipsを活用することで、tailwindcssのスタイルを定数で使用する際の開発体験を向上させることができます。ただし、可能な限りtailwindcssの標準的な使用方法（直接クラスを適用する、またはコンポーネント化するなど）を選択することをお勧めします。