Tailwind CSSを選定する際に考えたこと

はじめに

• TailwindCSSを業務で採用する時に考えたことをまとめました

前提

• 汎用的に色々なPJで使いたい
• 導入のハードルが低い
• 特定のデザインに偏りたくない
• 一時的な流行りで終わらずに継続性がありそうなもの
• 開発メンバーが実装していけるもの

Tailwind CSSとは

ユーティリティファーストのCSSフレームワーク

• ユーティリティファーストとは
  • 予め用意されたCSSクラスをHTMLに当てるだけでスタイルを適用させていく手法
• ユーティリティが提供されるフレームワークなのでコンポーネントは付属しない
  • BootstrapやMaterial-UIといったフレームワークはデザインされたコンポーネントが付属
  • TailwindCSS用のコンポーネントのライブラリはあるので使いたい場合は追加
    https://tailwindui.com/
    https://tailwindcomponents.com/
    https://www.tailwind-kit.com/
    https://daisyui.com/

https://github.com/tailwindlabs/tailwindcss

https://tailwindcss.com

https://runebook.dev/ja/docs/tailwindcss/-index-

---

メリット

• コードの記述量を削減できる
  • 予めクラスが用意されているので、開発スピード向上に繋がる
  • コードがシンプルになるため、メンテナンス性の向上にも繋がる
• デザインシステムの構築が可能になる
  • 大まかなデザインが決められるので、チーム内でフォントサイズなどを統一しやすくなる
  • デザインも一貫したものになっていく
  • 意思決定コストを下げられる
    • クラス名を考える必要が減る
• 柔軟にカスタマイズできる
  • コンフィグから共通設定を行える
    • https://tailwindcss.com/docs/configuration
• レスポンシブ対応が容易
  • 関連したクラスが用意されている
• スタイルの変更をHTML上で行える
  • HTML上にクラスを追加していくことでスタイルの変更を行うため
• Node環境があれば使える
  • ReactやVueなどの特定のフレームワークが前提になっていない

デメリット

• ビルドが必要になる
  • 純粋なCSSと比較した時に一つ手順が増えている
  • ただ、近年はSassや最小化など、ビルドしないことは無いような状況になってきているので特別デメリットというわけではないと思います。
• クラスに多くのコードを書く必要がある
  • 可読性の低下
• CSSの理解度がある程度必要
  • CSSが分からない場合、何のクラスを使ったら良いのか分からなくなる
• デザインを100％再現したい場合に辛い
  • 細かいピクセル指定があると困る
• 従来のCSS設計と思想が違うので違和感を感じやすい
  • HTMLタグにClassをたくさん書いていくので、ここに違和感を覚える人が多そう

---

選定理由

• 将来性がある
  • 今もコミュニティに投稿があり、開発も続いている
  • Githubのスター数が60k超えである程度知名度がある
    • 知られている分、今後も使われていく可能性がある
  • 実際にReactやVueなどと共に実案件で採用されるケースがあり、今後も継続して使われていく可能性があるので開発もされていくと思います。
  • 特定のフロントエンドフレームワークに依存しているということは無いので、連鎖的に使えなくなるようなことは無さそうです。
    • 純粋なHTMLと組み合わせて使える物
• ドキュメントや活用例が豊富
  • 公式のドキュメントがあり、他のサイトでもコンポーネント例などが紹介されています。
• 開発スピードを上げたい
  • CSSのクラス作成やレビューに掛かる時間を削減できる
  • デザインの適用をしやすくする

---

想定される課題と対処方法

• クラスが多くて可動性が下がる
  • https://github.com/tqwewe/prettier-plugin-tailwind
    • ソートされれば似たような見た目になっていくので可読性も少し改善されるはず
• 毎回同じように書くことがあるクラスの組み合わせがあって毎回同じことを書いている
  • よく使うような物は@applyでコンポーネントとしてまとめられる
    • https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
    • 通常のCSS宣言と混在させることもできる
• 複数行にある同じクラスを編集したい
  • エディターにマルチカーソル機能があるのでそれを使う
    • （特定文字列を選択してから）Alt + J（InteliJ）
    • Ctrl + d（VS Code）マックの場合はcmd + d
• 定義されていない独自のクラスを追加したい
  • @layerでユーティリティを追加する
    • https://tailwindcss.com/docs/adding-custom-styles
• デザインを再現するのが難しい
  • 事前にフレームワークを使うことを伝えて認識合わせをしていく
• クラスが多くて探すのが大変
  • チートシートを使う
    • https://tailwindcomponents.com/cheatsheet/
  • 補完機能を使う
    • InteliJ
      • https://pleiades.io/help/idea/tailwind-css.html
    • VS Code
      • https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
• 実装例が知りたい
  • サンプルコードが公開されているのでそれを参照する
    • https://flowbite.com/pro/
    • https://tailwindcomponents.com/
    • https://www.tailwindtoolbox.com
    • 他

---

Q&A

Q：スタイル属性に直接書くのと比較して何が利点ですか？
A：用意されたクラスを使うことで選択肢が狭まり、デザインの統一がしやすくなります。
スタイル属性に書くよりもクラス名は短いので記述量も少なくなります。

Q：自分でCSSは書けなくなりますか？
A：CSSは書けます。他のCSSやコンポーネントライブラリとも共存が可能です。ただ、基本的にはTailwindでクラス追加を行っていった方が保守性を考えると良いと思っています。

---

参考

https://tailwindcss.com/
https://webty.jp/staffblog/production/post-4047/
https://zenn.dev/nbr41to/articles/276f40041ad9fe
https://qiita.com/70ki8suda/items/b95aeb4d4d3cab57a8fe
https://qiita.com/Takazudo/items/78ee15564bfefdea844c
https://reffect.co.jp/html/tailwindcss-for-beginners
https://udemy.benesse.co.jp/development/system/tailwind-css.html
https://note.com/hissy/n/n91a4c435f289
https://zenn.dev/hbsnow/articles/49be3c81b67c46bf4225