こんにちは！にゃるしざと申します。
今回は、最近勉強中の TailwindCSS について、備忘録もかねてまとめていきたいと思います。
まず筆者について
現職：システムエンジニア（バックエンド）4年目
主に使用している言語：Java
HTML / CSS / JavaScript：既存システム改修で触る程度
→ 既存ソースを参考にした“部分修正”が多く、体系的な理解にはまだ自信がありません……
上記のように、フロントエンドの知識はあまり強くなく、CSSにも苦手意識があります。
しかし、デザインやモダンな技術への関心があり、将来的にはフロントエンドへ転職したいという気持ちがあります。
その転職活動の一環として TailwindCSS を学習中、という経緯です。
前述の通り、自分はフロント周りの知識がまだ弱いので、
「これからWebエンジニアを目指して学習を始めました！」という方とは同じ目線に立てると思います。
初学者だからこそ、つまずきやすいポイントを拾えるはず。
そんな思いから、学習記録としてこの記事を書いています。
今回は前提知識として 「TailwindCSSとはなにか」 をまとめ、#第1回 としたいと思います。
公式サイト👇
https://tailwindcss.com/
ミリしらTailwindCSS（全然知らなかった頃のイメージ）
- どうやらCSSのフレームワークらしい
- フロント技術を調べると高確率で名前を聞く
- 開発スピードが上がるらしい
- なんかすごそう
これは調べてみるしかない。
TailwindCSSとは？
結論からいうと、
TailwindCSS は「ユーティリティファーストなCSSフレームワーク」
です。
ここで「ユーティリティファースト」という聞き慣れない言葉が出てきます。
ユーティリティクラスとは？
公式では、
特定のスタイルを単機能で適用するための小さなクラス
とされています。
つまり CSSのプロパティを細かく分けてクラス化している ということ。
たとえば背景色を黒にするなら通常は CSS でこう書きます。
background-color: black;
TailwindCSS では、これだけで済みます。
class="bg-black"
CSSのプロパティをコマンドみたいにショートカット化し、HTML側でまとめて扱えるようにする。
これが ユーティリティファーストの基本概念と解釈しています。
TailwindCSSのメリット
- 開発スピードの向上
- デザインの統一性
- レスポンシブ対応が簡単
① 開発スピードの向上
通常の開発では、
- HTMLを書き、
- CSSにクラスを作り、
- スタイルを編集し、
- ブラウザで確認する
という行き来が必要です。
TailwindCSSでは、
- HTMLの class 属性にユーティリティクラスを書くだけ
- CSSファイルを開かなくていい
という形になるので、作業スピードが速くなるというメリットがあります。
② デザインの統一性
バックエンド出身者が抱えがちな悩みとして、
余白や色の使い方がちぐはぐになりやすい問題
があります。
TailwindCSSにはあらかじめデザイン体系があり、
- 余白の幅
- フォントサイズ
- 色のグループ
- 角丸の強さ
- シャドウの段階
などが統一されています。
これに従うだけで 自然と統一感のあるUI が作れるのは大きなメリットです。
③ レスポンシブ対応が簡単
TailwindCSSはここがとても優れていて、
class="text-base md:text-lg lg:text-xl"
のように書くだけで、
- md 以上は大きい文字
- lg 以上はさらに大きい文字
と変えられるそうです。
CSSを書き分けるより圧倒的に簡単だし、レスポンシブ対応に苦手意識を持っている私にとってはありがたいです！
TailwindCSSのデメリット
- 可読性の問題
- HTMLにCSSを書く思想への賛否
- 学習コストの低さが逆に落とし穴
① 可読性
TailwindCSSを使うと、どうしてもHTMLのクラスが長くなります。
class="flex items-center justify-between px-4 py-2 bg-white shadow rounded-md"
こうなると確かに読みづらくなりがちです。
改善策はありますが、デメリットと言われる理由は理解できました。
② HTMLにCSSを書くことへの是非
CSS設計には「関心の分離」という考えがあります。
- HTML＝構造
- CSS＝見た目
役割を分けるべき、というものです。
TailwindCSSはこの境界を曖昧にするため、
「設計としてどうなのか？」という議論があります。
③ 学習コストの低さ
TailwindCSSは「学習コストが低い」と言われますが、
これはメリットでもありデメリットにもなります。
なぜなら、
- CSSを深く理解していなくてもそれっぽく書けてしまう
- 表面的な理解で使い続けてしまう可能性がある
からです。
ツールを使うなら本質も理解したいものなので、ここは意識しておきたい点です。
おわりに
今回は TailwindCSS の概要と、メリット・デメリットをまとめました。
次回は、実際のHTML模写を通して TailwindCSS に触れていこうと思います。
初学者らしく、つまずいた点も含めて正直に書いていくので、誰かの助けになれば嬉しいです！