皆さんおはようございます。池ちゃんです。朝早く最近は起きていますが、いかがお過ごしでしょうか。朝は少しだけ涼しく感じるような気がしています。

さて、今回はTailwind CSSを採用しなかった話として、お話をしていきたいと思います。最初にお断りしておきますが、Tailwind CSSが嫌いという訳ではありません。過去、WEB制作で何度も使ってきましたし、綺麗なUIを作る事ができるという事でとても評価はしています。ですが、今回のこの「IKECHAN」では採用しなかったという話です。それではお話していきます。

Tailwind CSSはとても便利なフレームワークである

まず、大前提としてTailwind CSSは大変便利なCSSフレームワークだと思います。marginやpaddingといったスタイリングには欠かせないプロパティの値が事前に決められていて、統一感のあるスタイリングをする事が簡単にできます。

marginやpaddingの値って適当にコーディングしていくと、サイトのレイアウトがおかしな事になりやすいんですよね。綺麗に統一感を持たせるという意味ではTailwind CSSは適切な選択肢だと思っています。指定の方法も「mt-2」みたいな感じでしやすいです。

Tailwind CSSが用意してくれているカラーセットが綺麗

Tailwind CSSは色のライブラリも事前に用意してくれています。WEBサイトを構築する時に無視できないのが配色です。配色をミスってしまうととても見栄えが悪いWEBサイトを量産してしまう事になりがちです。そのような事故を防いでくれるのがTailwind CSSが事前に用意してくれているカラーライブラリという訳です。

昔Nuxt.jsで開発をしていた時にTailwind CSSを導入しました。するとその時にローカルホスト3000番でTailwind CSSのチートシートページが表示され、そこから色や濃さなどを選べた記憶があります。今もあるかは分かりませんが、そういう取説も結構充実していた記憶があります。WEBサイトで検索してもチートシートは豊富にありますよね。

class属性が長くなる場合がある

Tailwind CSSの特徴とも言えるのが、cssを書かずに全てをhtml上でclass属性にプロパティを記述していきます。簡単な指定であれば問題ないですが、例えばボタンを作って結構複雑なボタンデザインを施そうと思うと、とてつもなく長いclass属性が生成されてしまいます。

これが結構厄介だったりします。コードの中にclass属性が溢れかえり、コードの可読性が低下する事が懸念されるからです。もちろん軽減する事はできます。Next.jsを使った場合であればボタンならそれだけをコンポーネント化し、コンポーネント元でスタイリングを行う。呼び出すtsxファイルではimportとしたコンポーネントを呼び出せば、class属性の氾濫を防ぐ事はできます。

改行を適切に入れて管理する

可読性を上げるために必要なのは、コードを横に並べるのではなく縦で管理するという事です。class属性を横に並べていくとどんどん横に広がって読みづらくなるかと思います。それをプロパティを表すクラスごとに改行する事で可読性を担保しようという事です。

しかしながら、この手法も限度があります。何でもかんでも縦に書いていたらHTMLのインデント構造が分からなくなっていきます。これはこれで問題ですよね。このdivタグの閉じはどこだっけのようになっていく訳です。

悩んだ末、本ブログでは採用しなかった

非常に悩みました。このブログサイトはNext.jsで構築されていますが、npmでインストールする時にTailwind CSSを使うかどうか聞かれます。そこでYesにするかNoにするか悩みましたが、今回はNoにする事にしました。

理由としては前述していた通りのものプラス、長年CSSを手打ちしていた身としてはCSSを書く事自体がそこまで苦ではないからです。やはり、慣れ親しんだcssをグローバルcssで書いて、Next.jsに適用させる事は私の中では安心感があります。複雑なCSSを書くのであれば、Tailwind CSSは不要ではないかなというのが私の中での今の所の結論になります。

まとめ

賛否両論があるTailwind CSSですが、今回は要不要論について深堀りをしていきました。サクッとモダンなWEBサイトを作るのであれば、Tailwind CSSは即戦力のある候補になるかと思います。ですが、小規模なサイトやデザイン要件がかなり詰まっているWEBサイトではTailwind CSSは不向きかなと思います。それと、開発体験が微妙になる可能性があるので、その辺りを考慮して利用するといいかもしれません。皆さんも良き開発を楽しみましょう。