よりそう社内 LT: TailwindCSS ハンズオン

この記事は株式会社よりそうの社内勉強会の発表資料です。

はじめに

よりそうでは、フロントエンドフレームワークとして Nuxt、コンポーネントライブラリ・デザインシステムとして Vuetify を採用しており、TailwindCSS は利用した実績がありません。

この発表では、TailwindCSS の特徴や Vuetify と比較した時のメリット、デメリットを紹介し、新しい知識と視点を獲得することを目指します。

TailwindCSS とは？

https://tailwindcss.com/

ユーティリティファースト

CSS の値とほぼ 1:1 対応でクラスが存在しています。

例:

• spacing: m-1 pl-2 mx-[10px] space-x-2 gap-2
• font size: text-lg text-sm
• display: block flex flex-row absolute
• color: bg-blue bg-red-200 text-gray-600 bg-[#50d71e]
• hover: hover:bg-gray hover:drop-shadow

レスポンシブデザイン

md:m-1 lg:flex-row のように、画面幅に応じて有効になるレスポンシブなスタイルを簡単に実装することができます。

デザインシステム

TailwindCSS をつかうことで、レスポンシブの幅、余白の単位、フォントサイズや色などを一貫して揃えることができ、デザインシステムとして機能します。

コンポーネント指向フレームワークとの相性

従来の CSS はクラスでスタイルを共通化していていました。
一方、コンポーネント指向は「同じ関心ごとを１箇所にまとめる」という考え方で、クラスを別で定義すると管理しづらくなります。
そのため Vue の SFC や React の CSS in JS などの選択肢が登場しました。
TailwindCSS もその一つで、より要素の近くに短く書くことができます。

実際に触ってみる

作るもの

自己紹介カード

解答例を見てみる

<div class="p-10">
  <div class="flex flex-row space-x-3 rounded border bg-white p-5 drop-shadow">
    <div class="h-20 w-20 shrink-0 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"></div>
    <div class="space-y-1.5">
      <div class="text-lg font-bold">白石 祐大</div>
      <div class="">フロントエンドエンジニア</div>
      <div class="text-gray-500">株式会社よりそうのフロントエンドエンジニア。沖縄出身。 趣味は自作キーボード。</div>
    </div>
  </div>
</div>

プレイグラウンド

https://play.tailwindcss.com/

Vuetify との比較

Vuetify

✅ Good

• 完成されたデザインシステムをそのまま使える
• 素早く実装ができる
• アクセシビリティの品質が高い

❌ Bad

• マテリアルデザインに沿った実装が求められ細かなカスタマイズがしづらい
• パフォーマンスチューニングがしづらい

TailwindCSS

✅ Good

• CSS が使いやすくラップされている
• デザインシステムを柔軟に構築できる
• 自分たちのガイドラインに沿った実装ができる

❌ Bad

• UI のロジックは一切提供しないので実装にコストが掛かる
• アクセシビリティを考慮した実装が必要になる

TailwindCSS の弱点を補うライブラリ

UI のロジックとアクセシビリティだけを提供し、見た目を一切持たないライブラリを使うことで、TailwindCSS の弱点を克服できます。

Headless UI

Vue と React 両方で使える
https://headlessui.com/

Radix

React 向け
https://www.radix-ui.com/

最近 Vue 向けのものも出ました。
https://www.radix-vue.com/

よりそうでの活用

よりそうでは既に Vuetify で構築された資産が大きく、TailwindCSS の導入はデメリットが大きいです。
ただし、TailwindCSS のようなユーティリティファーストの考え方を取り入れることは可能だと思います。

たとえば、Vuetify のヘルパークラスには存在しないが、TailwindCSS には存在するクラスが数多く存在します。その中から、使用頻度が高いものをピックアップし、我々のプロジェクトに導入することを検討しています。

utilities.css

.overflow-auto {
  overflow: auto;
}

.break-all {
  word-break: break-all;
}

まとめ

TailwindCSS を実際に触りながらその特徴を学びました。
よりそうで使っている Vuetify とは全く異なるアプローチのデザインシステムですが、考え方を部分的に取り入れることで開発体験の向上に繋げられると思います。

また、我々の今後の技術選定の選択肢の幅を広げることに繋げられたら幸いです。