投稿日: 2025-06-01
はじめて Tailwind を実際に使ってみて思った感想などを記録しておく。
このブログのスタイルは、立ち上げたときからピュアな CSS だけで書いてきました。 仕事では sass や stylus はちょっとだけかじりましたが、まぁ普通の CSS でええか、ぐらいの雑な感じでそうしていました。
最近ではもっぱら Tailwind が主流になってきてるのかなということで、いい加減体験しておかないと、と思っていたら今まで放置することになってしまいました。 大した内容はないですが、触れ始めの気持ちを記録しておきたいので、率直な気持ちなどを書いてみます。
書きはじめる前に
Tailwind CSS 実践入門 という書籍を積読していたので、ようやくこれを崩しました。 このときには v3 だったのに対し、今回は v4 を用いました。 v3 と v4 で微妙に設定とかが異なる箇所があったので、ちょいちょい公式のドキュメントを参照しながら調整しました（Preflight をオフにするやり方など）。
どうやって書いたか
初手は AI に任せようと思い、avante.nvim という neovim のプラグインにまかせてみました。 裏側では GitHub Copilot の gpt-4o を使っていました。
Astro コンポーネントを読ませて「この Astro コンポーネントの CSS を Tailwind に変換してください」と各コンポーネントについてお願いしていきました。 結果、これだけでほぼ満足の行く変換をしてくれちゃいました。 ちょいちょい既存の振舞（見た目）と異なる部分は出てくることがあったので、そのときは人力で微調整しました。 そこでの苦労は、あくまでも Tailwind の理解の浅さによるものだったので、習熟した人なら簡単に進められるんだろうなぁと思いながら作業をしていました。
書いてみた直後の感想
Tailwind にはじめて触れたのは 2021 年ぐらいだった記憶ですが、そのころは「こんな class 絶対覚えられないし覚えたくね～」と思っていました。 ただ、AI による変換結果をセルフレビューしているうちに、良く使うものは案外すぐ覚えられるかも、という気持ちに変化してきました。 また、エディタの LSP の hover 機能のおかげで、Tailwind の class が対応する CSS についてすぐに調べられるので、コードレビューをスムーズに出来ました。
当初感じていた心配は、適切に現代のコーディング支援ツールの助けを借りれば、大きな問題ではなさそうだと思いました。
Tailwind 否定派の方々の意見について
リンクは特に貼らないですが、ググると結構ヒットしますよね。 否定する理由は大体以下のような感じでしょうか。
- 覚えることが多くて大変
- 可読性が悪い
- class が大量に書かれて読みづらい
覚えることが多いというのは、最初は私も気にしていましたが、もはや AI に支援してもらえればなんとかなりそうな気がしています。 そもそも、素の CSS 自体覚えることが多すぎなので、間に1つ別のものが挟まってもまぁそんなに変わらないのでは、とも思います。
可読性が悪い、というのは個人的にはほとんど賛同出来ないところです。 むしろ、普通の CSS のほうが、別のファイルだったり同じファイルでも最下部を見ないとだったり、視線移動が多くてとても辛いと感じています。 少しの慣れは必要かもしれないですが、マークアップと一緒な場所に class という形で集まっている、Tailwind ほうがレビューもしやすいんじゃないか、と感じました。
class が長くなるのが嫌、というのは実際に書いてみても「たしかにな～」と思いました。 vim って横方向の移動がそんなに得意でない（と思う）ので、なんとかなってほしいなとは思います。 80 character rule とかそういうレベルじゃないですよね。 まぁでも、自分はメリットのほうが十分に大きいと感じているので、これに関しては目をつぶれそうです。
ということで、これからしばらくは Tailwind 中心でスタイリングを頑張っていきたい所存です。