KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

今流行りつつあるのはなぜ?社内勉強会で「最初にしりたい Tailwind CSS」について発表しました

f:id:taisei-rgb:20210924171210p:plain

こんにちは、キッチハイクのtaiseiです!

キッチハイクでは定期的に社内勉強会を開催しています。

私も先日「最初にしりたい Tailwind CSS」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景と要点のまとめを補足したいと思います。

スライドはこちらです。

speakerdeck.com

発表の背景

私は数多くある 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!

キッチハイクでは、デザイン / フロントエンドに興味があるエンジニアを募集しています!

www.wantedly.com

www.wantedly.com

www.wantedly.com