🎨

[Tailwind CSS]表示と編集の便利方法

2025/01/27に公開

中国人です、日本語の文法が下手で申し訳ございません。コメント欄で私の間違いを指摘していただければ幸いです。

Tailwind は、最も人気がある CSS フレームワークの一つです。

しかし、Tailwind を使用すると、このような状況に遭遇することがよくあります:

<div
  className={
    "relative rounded mr-2 lg:my-2 overflow-hidden text-primary w-[180px] h-[100px] text-2xl font-semibold text-center leading-[100px] bg-white"
  }
>
  内容
</div>

文字列が長すぎて読めず、エディターの画面にも収まりません。

文字列を短くする方法はありますが?と思いますと、Google で検索しました。

その結果を共有するためにこの記事を書きました。

クラス名を狭くする

クラス名を狭くすることができれば、文字列を画面に表示するができます。

Template literals テンプレートリテラル

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

<div
  className={`
    relative rounded overflow-hidden w-[180px] h-[100px] 
    mr-2 lg:my-2 leading-[100px] bg-white
    text-primary text-2xl font-semibold text-center 
  `}
>
  内容
</div>

このリテラルを使用すると、クラス名を異なる行(グループ)に分類して並べ替えることもできます。

clsx

https://www.npmjs.com/package/clsx

import clsx from "clsx";

export default function App() {
  return (
    <div
      className={clsx(
        "relative rounded overflow-hidden w-[180px] h-[100px]",
        "mr-2 lg:my-2 leading-[100px] bg-white",
        "text-primary text-2xl font-semibold text-center"
      )}
    >
      内容
    </div>
  );
}

prettier-plugin-classnames

https://www.npmjs.com/package/prettier-plugin-classnames

このプラグインは、printWidth についてクラス名の行を変更する。

prettier-plugin-tailwindcss

https://www.npmjs.com/package/prettier-plugin-tailwindcss

このプラグインは、推奨されるクラスの順序に基づいて class を並べ替えます。

表示を最適化する

クラス名を変更せず、表示時に折り畳むだけの解決策もあります。例えば:

[VS Code プラグイン] Tailwind Fold

https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold

最後

どれが一番良いと思いますか?もっと良い解決策がありますか?皆様のコメントをお待ちしております。

GitHubで編集を提案

Discussion