背景

こんにちは。mtaaaです。
社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。

スコープ

Tailwind CSSとは？
なぜTailwind CSSに注目が集まっているのか(メリット、デメリット)
他フレームワークやライブラリとの比較

※Tailwind CSS の導入や記法については多くのドキュメントや記事が公開されており、難易度もそれほど高くはないためスコープ外としました。

Tailwind CSSとは？

ユーティリティファーストの考え方を持ったCSS フレームワーク
ユーティリティファーストという考え方
- あらかじめ用意されたclassをhtmlに当てるだけでstyleを適用させていく手法
- 従来であれば全く同じstyleを当てたい箇所で書くコードが2度手間になってしまう問題がありましたが、React, Vue等フレームワークのコンポーネント指向がこの問題を解消してくれるため、セットで採用されることが多い

簡単なコードだと

<span class="sample">
  label
</span>

<style>
.sample {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  display: inline-block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-transform: uppercase;
  border-radius: 0.25rem;
  color: rgb(219, 39, 119);
  background-color: rgb(251, 207, 232);
  margin-right: 0.25rem;
}
:last-child.sample {
  margin-right: 0;
}

を以下のように書けます

<span
  class="
    text-xs
    font-semibold
    inline-block
    py-1
    px-2
    uppercase
    rounded
    text-pink-600
    bg-pink-200
    last:mr-0
    mr-1
  "
>
  label
</span>

コンポーネント指向とは？

ページのコンポーネント(部品)単位で実装を行い、その組み合わせでアプリケーションを作成する
複数回利用するコンポーネントがある場合に使い回しができ、効率的に開発できる
現代フロントエンドで採用されているReact, Vue, Angular等のフレームワークはコンポーネント指向に乗っ取っている

Tailwind CSSのメリット

class名を考える必要がない
デザインシステムの最低保証
ドキュメント、チートシートの豊富さ

class名を考える必要がない

hoge-wrapperやhuga-contentのような命名を毎度しなくて済み、開発効率を上げられる
cssの記述もなくなるため単純にコード量を減らせる
→htmlのソースだけ見れば内容を把握できる

デザインシステムの最低保証

各種サイズや文字色といったカスタマイズについてTailwindで用意しているため、デザインを揃えやすい
ex) .h-5(=height: 20px), .border-red-300(=border-color: rgb(252, 165, 165))
→チーム開発において実装者の違いによる、微妙なずれが発生しづらくなる
font-size: 29px のような細かい指定を毎度しなくて済むのでデザインを揃えやすい
→自前で細かいカスタムして用意することも可能

ドキュメント、チートシートの豊富さ

2020から2021年にかけて多くの開発者に使われるようになり、チートシートは勿論、Tailwindの組み合わせを部品単位で公開している場所も多い
→キャッチアップのコストを軽くできる

Tailwind CSSのデメリット

classに多くのコードを書く必要があり、可読性が落ちやすい
cssの理解度がある程度必要
デザインを100%再現したいケースで強味を生かしづらい

classに多くのコードを書く必要があり、可読性が落ちやすい

HTMLにstyleの情報を詰め込むため必然的に情報量が増え、そこだけ見ると可読性が落ちやすい
→Prettierで縛ることで対策できる

<span class="bg-pink-200 font-semibold inline-block py-1 uppercase px-2 rounded text-pink-600 last:mr-0 mr-1 text-xs">
  label
</span>

は以下のようにまとめられます(classを縦並べ、似たstyleを集める)

<span
  class="
    text-xs
    font-semibold
    inline-block
    py-1
    px-2
    uppercase
    rounded
    text-pink-600
    bg-pink-200
    last:mr-0
    mr-1
  "
>
  label
</span>

HTMLとCSSが分かれている場合は、コード理解のために両ソースを行き来する必要があり時間がかかってしまうデメリットがある

CSSの理解度がある程度必要

UIライブラリのようにそのまま部品を配置するわけではなく、記法としてはCSSのインライン記述の短縮系に近いため、最低限CSSの知識が必要になる
→公開されているパーツを流用することである程度楽はできる

デザインを100%再現したい場合に強味を生かしづらい

「ここの余白は13pxで、ここの高さは211pxで。。。」のように厳密に再現したい場合にカスタマイズが必要になる場面が増える
→フロントエンドとしてはここである程度統一させていくかをデザイナー(あるいは決まったデザインから)とすり合わせていきたい

他ライブラリやフレームワークとの比較

Bootstrapとの比較
Material UI/Vuetify等のUIライブラリ
インラインで直接記述

Bootstrapとの比較

一番話題に上がる比較
BootstrapはUIコンポーネントライブラリ(パーツ単位)なのに対してTailwind CSS はstyle単位
→用意されているパーツを利用するだけでなく、カスタマイズ性も高い
パーツはBootstrapを利用しつつ、レイアウトはTailwindで整える、のような併用も可能
Bootstrapをメインで利用するよりCSSの知識が必要になる

Material UI/Vuetify等のUIライブラリとの比較

上記のReactやVueのUIライブラリはBootstrapと同じくパーツ単位での提供のため、style単位で指定するTailwindとは異なる
→細かいカスタマイズの可否が異なる
UIライブラリのパーツを使いつつ、レイアウトはTailwind、ということは同様に可能

インライン記述との比較

記法としてはかなり近い
Tailwindではhoverやfocusなど疑似クラスを扱えたり、レスポンシブ対応できたりする
デザインシステムがあるため、実質無限の選択肢から指定する必要がない

【インライン記述】

<span
  style="
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    display: inline-block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-transform: uppercase;
    border-radius: 0.25rem;
    color: rgb(219, 39, 119);
    background-color: rgb(251, 207, 232);
    margin-right: 0.25rem;
  "
  class="sample"
>
  label
</span>

<style>
/* 疑似要素についてはstyleに別途書く必要がある */
:last-child.sample {
  margin-right: 0;
}
</style>

【Tailwind CSS】

<!-- 疑似要素についてもhtmlで完結できる -->
<span
  class="
    text-xs
    font-semibold
    inline-block
    py-1
    px-2
    uppercase
    rounded
    text-pink-600
    bg-pink-200
    last:mr-0
    mr-1
  "
>
  label
</span>

まとめ

ユーティリティファーストでstyleについてHTMLで完結できる、class名を考える必要がない
→従来のCSS設計と完全に異なる
React/Vueといったフロントエンドフレームワークと相性がいい
デザインシステムが用意されつつも、カスタムも用意
→開発効率を上げられる

所感

記法については慣れの部分があるため正直違和感がありましたが、そこをクリアすれば
- 作業効率を上げられる
- UIライブラリほど引っ張られずに済む
- 最悪プレーンなCSSに戻せる

など恩恵が大きいためReact/Vue等のフレームワークを利用する場合、個人的には採用したい技術だと感じました。

参考

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
ラクスDevelopers登録フォーム

https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！