RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

Tailwind CSS 社内勉強会【まとめ】

背景

こんにちは。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>

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

Tailwind CSSのメリット

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

class名を考える必要がない

  • hoge-wrapperhuga-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等のフレームワークを利用する場合、個人的には採用したい技術だと感じました。

参考


◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.