どうも、うめじです。
TailwindCSSを使っていたら、最高だったので書いていきたいと思います。
TailwindCSSとは
TailwindCSSはユーティリティクラス(utility class)を活用したCSSフレームワークです。
公式ドキュメントで紹介されているコードを見ていただくと理解が早いと思います。
ユーティリティファーストをコンセプトに設計されているので、BootstrapやBulmaなどのCSSワークフレームとは違い、ボタン、メニュー、パンくずリストなどのコンポーネントは準備されておらずユーティリティクラス（p-6やw-12）を使って独自のボタンを作成しデザインを行っていきます。
ユーティリティクラスとは
CSSを書いている人にとっては今更な話だとは思いますが、ユーティリティクラスとは事前に用意しておいた使い勝手がいいクラスのことです。
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.pt-1 { padding-top: 1rem; }
.pb-1 {padding-bottom: 1rem; }Bootstrapとの違い
Bootstrap
<button type="button" class="btn btn-primary btn-lg">Button</button>Bootstrapでは事前に用意されたデザインのボタンを簡単に作ることができます。
TailwindCSSにはこのようなデザインされたクラスは存在せずユーティリティクラスのみが用意されています。
近いデザインを再現すると以下のようなコードになります。
どれくらいの分量のコード記載になるのかという部分も比較して見て頂けたらと思います。
（クラスは@applyという機能でまとめることも出来ます。今回は比較のために全記載しています。）
TailwindCSS
<button class="px-5 py-2 text-xl text-white rounded bg-blue-500 hover:bg-blue-600 transition-colors">Button</button>BootstrapだとCSSの知識がなくともある程度コンポーネントを作ることができましたが、TailwindCSSではプロパティを記述していくためCSSの知識が最低限必要になります。
ただTailwindCSSを使ったコンポーネントライブラリも存在しているので、その点もカバーできるとは思います。
TailwindCSSのメリット・デメリット
メリット
class名をその都度考える必要がない
TailwindCSSの最大の特徴であるユーティリティファーストで実装していくことで、class名を考えることから解放されます。
これ地味に嬉しいです。
独自性の高いデザインを作成できる
ユーティリティクラスを組み合わせることで、独自性の高いデザインを表現・作成することが可能です。
またコンポーネントライブラリも充実しているので、ドロップダウンやダイアログなど複雑なコンポーネントを作成したい場合にも対応できます。
CSSファイルのサイズを軽量化できる
通常だと、ページや機能が増えるたびにCSSファイルのサイズは大きくなる一方でしたが、再利用可能なクラスを活用することで、新しいCSSを追加する必要はほとんどなくなります。
またビルドすることで、未使用のプロパティを取り除き必要なプロパティのみを書き出すことができ、CSSファイルを軽くできます。
モード・サイズ・状態でスタイルを変えられる
これはBootstrapにはないものだと思います。
TailwindCSSでは、dark:md:hover:bg-fuchsia-600のようにダークモードやmdサイズ、ホーバー状態の時などのにスタイルをクラスで変更することができます。
デメリット
初期学習コストがかかる
TailwindCSSのクラス名をある程度覚える必要があります。
CSSの知識があれば簡単に覚えられるクラス名になっているため、すでにCSSの知識がある人にとってはそこまで大きい問題ではないと思います。
クラス名の記述が長くなる
ユーティリティクラスを組み合わせるため、細かくスタイリングを行う場合、必然的に指定するクラスが多くなり、コードが長くなります。
使い始めは違和感しかないです。ですが直に慣れます。
慣れればスタイリングがすぐに確認できて見やすいです。
何が最高か
個人的には、今まで利用していたCSSワークフレームでカバーできなかった部分がカバーされて最高だと感じました。
ユーティリティクラスと言いつつも、中途半端な数値の設定にも対応できる点も気に入っています。
WordPressなど不向きなものもありますが、VueやReactなどを使用したコンポーネント作成では圧倒的にTailwindCSSがいいと思います。
TailwindCSSと他のCSSワークフレームのどちらが優れているという話ではないですが、参考になれば幸いです。
それでは次のブログでお会いしましょう。
ではでは！