Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
![Tailwind CSS を使う時に一緒に入れたいライブラリ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f160e85f0b5b7bd711ad48187ffb0a88d029eac6/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2FTailwind%2520CSS%2520%25E3%2582%2592%25E4%25BD%25BF%25E3%2581%2586%25E6%2599%2582%25E3%2581%25AB%25E4%25B8%2580%25E7%25B7%2592%25E3%2581%25AB%25E5%2585%25A5%25E3%2582%258C%25E3%2581%259F%25E3%2581%2584%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%2596%25E3%2583%25A9%25E3%2583%25AA%2FTailwind%2520CSS%2FCSS.png)