[Tailwind CSS]表示と編集の便利方法
中国人です、日本語の文法が下手で申し訳ございません。コメント欄で私の間違いを指摘していただければ幸いです。
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
最後
どれが一番良いと思いますか?もっと良い解決策がありますか?皆様のコメントをお待ちしております。
Discussion