[CSS] Tailwind CSS を使ってみた所感

2021-04-11


このサイトは GatsbyJS で構築されているのですが、Tailwind CSS を導入してみまして、思ったことをまとめてみました

・ css の変数名を考えなくてよい

・ 1 クラス名に対して、1 スタイルなので、タグにどのスタイルがあたっているのか、css ファイルや style scope などを見に行く必要がなく、html のクラス要素に書かれているクラス名からスタイルが想定できる

・ 既存の css ファイル内で既に定義済みのスタイルなのかどうか探す必要がない

・ css のスタイルを細かく考えずに用意されてるモノを使うか、手動で登録したクラスを使えば、サイト全体でデザインを統一しやすく、修正もしやすい

・ ダークテーマの切り替えが容易


html タグ内のクラスに書く量は増えるので、React や Vue などでコンポーネントに分けてる Web アプリや外注する時にスタイルを管理しやすくしたい時などに向いていると思いました

逆に、html をそのまま使用しているサイトの場合は html タグ内のクラスに書く量が増え、冗長になるので向いてなさそうです

大きな Web アプリで長く運用している場合、css のファイルが大きくかつ複数あって、既存のスタイルを修正したり、新しいスタイルを追加する際、まず最初にその膨大な css ファイルを調べることから始めないといけないと思います

Tailwind CSS であれば、Bootstrap や Bulma などより低レイヤーのスタイルが用意されてるので、既存の css のファイルをいちいち調べなくてよい、というのはかなり時間を節約できるのではないか?と思いました

まだ導入したばかりなので、また思うことがあれば随時この投稿を更新します

以上になります