こんにちは、キッチハイクのtaiseiです！
キッチハイクでは定期的に社内勉強会を開催しています。
私も先日「最初にしりたい Tailwind CSS」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景と要点のまとめを補足したいと思います。
スライドはこちらです。
発表の背景
私は数多くある CSS フレームワークの中で、なぜ今 Tailwind CSS がここまで注目を浴びているのかに興味がありました。Tailwind CSS のインプットをしっかりとするまでは、「HTML の class に直接スタイルを当てることができる CSS フレームワーク」くらいの認識でいましたが、それだけの理由でここまで人気が出るとは思いませんでした。
今回、社内で「Tailwind CSS を聞いたことはあるけれど、実際何が良いのかはあまり良くわからない、、、」と自分と同じような悩みを抱えているメンバー向けに、スライドを通して Tailwind CSS の良さを発表しました。
要点のまとめ
今回のスライドにあたり、注目していただきたい箇所は以下になります。詳細は、ぜひスライドをご覧ください！
- Tailwind CSS とは Utility First というアプローチでスタイルを組み上げていくことが特徴的な CSS フレームワークである
- 命名を考えなくても良い、レスポンシブやダークモードにも簡単に対応ができるといったメリットがある
- Bootstrap との比較として、以下の3つの点で有利に働くことが多い
- 自由度が高い
- JavaScript との依存関係がない
- React や Vue.js との相性が良い
- Just-in-Time Mode ( JIT モード ) を有効にすることで以下のようなメリットがある
- 色んな variant が使えるようになる
- 任意のスタイルを当てはめることができる
- ブラウザの読み込み、ビルドタイムの高速化
最後に
今回の発表を通して、Tailwind CSS を用いることで 「今までよりも高速に、そしてより自由度の高いスタイリングが可能になる」ことを知りました。 私も、これからもインプットをし続けていきたい技術の1つとなりました。みなさんも、ぜひ使ってみてください！
We're Hiring!
キッチハイクでは、デザイン / フロントエンドに興味があるエンジニアを募集しています！
