Tailwind CSS やめようぜ

警告: クラス名の洪水による視力低下・精神的疲労・キーボード摩耗は自己責任でハンドルしてください。責任の所在は .hidden クラスで非表示にされています。

In flex we trust; in grid we pretend; in production we !important.^[1]

Sponsored by ctrl+space — あなたの握力に静かなる死を。

---

0. TL;DR を長々と書く矛盾

• Tailwind CSS (以下 TW): "CSS を書かずに済む代わりにエディタを🚴‍♂️エアロバイク化するフィットネスプラン"^[2]
• 思想: "ユーティリティファースト" —— しかし実装者はクエン酸ファーストでキーボードを味付け。^[3]
• 現実: クラス連打 256 combo でも style="color:red" 一撃必殺に敗北する日がある。

結論先取り: Tailwind は "書かない CSS" ではなく "書けなくなる CSS" のサブスクリプションサービスである。

---

1. 起源という名のカロリー消費

1.1 2017 — MEME 誕生

Adam Wathan 氏、CSS に倦み疲れ Class ガチャ を発明。世界は bg-red-500 と text-2xl の呪文を唱え、バンドルサイズと 指の消耗 をトレードオフにする生活へ。^[4]

小ネタ: 初期コミットには bg-pineapple-pizza が存在したという都市伝説がある。^[5]

1.2 2025 — Rust を背負って立つ v4.0

Lightning CSS 搭載 & Rust 化で ビルドが最大 10× 高速化 と公式が豪語。^[6] その結果、高速に自分のタイポを世界へ公開 できる幸福が手に入った。^[7]

---

2. 典型的な言い訳集 (抜粋)

2.1 Tailwind 伝道師の十戒

1. "クラス名はドメイン駆動設計" — ただしドメインはカラーパレット。
2. "CSS ファイルは 3 行で済む" — 代わりに HTML が辞典サイズ。
3. @apply は裏技 — 使った瞬間 "脱ユーティリティ" と糾弾される公開処刑。
4. "命名迷わなくて楽" — 代わりにどこを書いているか迷子。
5. prose クラスで Markdown をワンパン — ただし code ブロックだけ闇鍋配色。
6. "デザインシステム要らず" — その日その場で bg-teal-513 が誕生する自由。
7. "purge でサイズ激減" — そして本番で 404 スタイル。^[8]
8. "学習曲線が緩やか" — 斜度 0 の崖 を想像してほしい。
9. "アクセシビリティが向上" — まぶしすぎてスクリーンリーダーも目を細める。
10. "クラス名で検索できる" — スパゲッティの番地検索 と呼ばれている。

2.2 反対派の応酬

• "HTML が読めない" → 読む暇があるなら打て、悟りはタイプ音の向こう側。
• "セマンティック崩壊" → div と span の時代に何を今さら。
• "クラス名覚えきれない" → VSCode IntelliSense 教団へようこそ。

---

3. クラス名大河ドラマ

<section
  class="relative flex flex-col md:flex-row justify-between items-center gap-3 lg:gap-6 p-4 md:p-8 bg-gradient-to-br from-emerald-500/70 to-emerald-700/90 border border-emerald-400/60 rounded-2xl shadow-xl motion-safe:animate-bounce dark:contrast-200 print:bg-white print:text-black sm:[&>a]:underline hover:[&>*]:scale-105">
  <h2 class="text-3xl font-black tracking-widest">禅</h2>
</section>

語数 55。意味 0。目を閉じても書けるようになったら一人前、逆さに書ければ仙人、プリンタブルに書ければ伝説級。

ワンポイント: print: プレフィックスで紙にまでクラス名を布教。森へ詫び状を送りましょう。^[9]

---

4. JIT vs. Purge — 永遠の腕相撲

• JIT: クラス名を見つけ次第コンパイル。誤字も爆速ビルド。
• Purge: 未使用クラスを削除。ただし 本番デプロイ後に "実は使ってた" と判明する恐怖。

結果 → 開発者は 404 画面を bg-red-600 で塗り潰し、芸術は爆発。

---

5. Tailwind v4.0 "Rust You Can Trust"

• 新エンジン: Rust 製 Lightning CSS で最大 10× ビルド高速。^[6:1]
• Zero‑Config: tailwindcss をインポートするだけ。だが結局 tailwind.config.js は 400 行へ。
• Container Queries: ついに公式搭載。小躍りしながら lg:[&>*]:p-4 を量産。^[10]
• Native CSS 変数: これで --tw-bg-opacity と和解できる。^[11]

教訓: Rust の速度で 早く 泡を吹けるようになっただけで、泡を吹く未来は変わらない。

---

6. VS Code 拡張という酸素ボンベ

1. Tailwind IntelliSense — クラス名を補完しても指は痙攣。
2. Headwind — クラス並びを整え、merge コンフリクト を倍増。
3. Tailwind Fold — クラスを折り畳み、中身の CSS を忘却の彼方へ。
4. Rainbow Brackets — hover: の虹が目に刺さるライトショー。
5. Error Lens — text-grat-500 を赤文字で怒鳴る家庭教師。

副作用: エディタが 電子万華鏡 と化し、集中力は洒落にならないレベルで拡散。

---

7. ここまで読んだあなたへ（進路案内）

• "とりあえず動けば" 派 → Inline Style 1 行で優勝。優勝賞品は可読性ゼロのコード。
• "BEM に PTSD" 派 → Tailwind へ。指トレと引き換えに心の安寧をゲット。
• "真理を追究" 派 → CSS-in-JS → Emotion → Burnout → 禅 → 農業。
• "もう疲れた" 派 → class="p-4" と書き残し 深い森 でログオフ。
• "GPT に書かせる" 派 → この文章をコピペし会社ロゴだけ置換。

---

8. FAQ (≒ Frequently Avoided Questions)

Q: プロジェクトの途中で Tailwind に乗り換えるべき？
A: その瞬間、過去 commit が全て 古文書 になります。

Q: Atomic CSS と何が違う？
A: ロゴの色合いとグッズの品揃えです。

Q: Jr. エンジニアにも優しい？
A: Yes。でも半年後に 束縛レベルが上がり、別の長寿命フレームワークへ嫁げなくなる。^[12]

---

9. 社内 Slack での生存戦略

1. #tailwind-praise チャンネルを作り、毎朝 bg-lime-300 でモーニングコール。
2. "Tailwind 使うと残業減ります(※当社比)" と書いた GIF を無限ループ。
3. 反対派の投稿には invisible スタンプで CSS 的黙殺。

成功例: 3 週間で心理的安全性より先に全社的色覚異常を獲得。

---

10. ベストプラクティスという珍獣図鑑

ステータス	名称	推奨度
🐣	@apply 布教	⚠️ 養殖推奨
🐕	クラス名アルファベット順整列	💤 労働時間増加
🦄	tw-merge 導入	🎉 バグも合体
🐉	* { @apply ... }	💀 存在がネタ

注意: 表は見にくいので使うのをためらいましたが、Tailwind も見にくいので許容範囲です。^[13]

---

11. 地獄のカラーパレットチャレンジ

• Step 1: デザイナー不在で始める。
• Step 2: rose-500 が UI 全面に咲き乱れる。
• Step 3: クライアント「情熱的で良いですね」。
• Step 4: エラー表示に困る。

完走報酬: 失われた色覚と引き換えに、PR のレビュー時間が 3 倍に。

---

12. 実録: マネージャーへの説明会

"Tailwind を入れると Velocity が上がります"

マネージャー「Velocity って何？」
開発者「クラス名 / 分 です」
マネージャー「素晴らしい…｣^[14]

そして翌 Sprint から Velocity だけが KPI に加わった。

---

13. ライバルフレームワークとの低レベルな罵り合い

• Bootstrap: 「ボタンが青すぎるんだよ！」
• Bulma: 「クラス名短すぎて逆に怖いわ！」
• Chakra UI: 「Props で書くとか官能的過ぎか！」
• Tailwind: 「お前ら全員 !important で黙らせてやる！」^[15]

和解案: 4 フレームワークの CSS を合体した超合金ダサダサ UIを作る。

---

14. 最後に — ショートカットキーと共に去りぬ

• alt+shift+↓ → クラス名を 1 行複製。
• ctrl+d ×∞ → タイポ修正ループ地獄。
• F5 → ビルド失敗祈願。

クラス名を並べるより大切なのは、読めるコードと定期的なストレッチ、そしてカフェイン補給。

さあ、npm run dev -- --watch でクラス名の滝行を始めよう。^[16]

---

脚注

1. 本番環境で !important に救われた回数はプライスレス。

2. エディタのスクロールバーを🚴‍♂️スピンバイクとしてカウントする健康アプリが望まれる。

3. 開発後の握力測定はスポーツ扱い。惨敗すると CI が落ちる仕様。

4. 公式ブログ曰く "ユーティリティファースト" の誕生日ケーキには bg-pink-500 が使われたらしい(未検証)。

5. Pineapple ピザと同様、賛否両論で胃もたれ確定。

6. Tailwind 4.0 では Rust 製エンジン採用でビルドが 10 倍高速になったとされる。(medium.com)

7. 速くなるほど bg-reed-500 といった誤字も速攻でコンパイルされる諸刃の剣。

8. Purge で 0 バイトになった CSS を見て涙した開発者への追悼。

9. 森林の神々は紙の裏に大量の div が並んでいるのを見て泣いている。

10. Container Queries は喜びの祭だが、クエリ地獄の幕開けでもある。

11. --tw-* 変数は CSS 変数愛好家への課金ポイント。

12. 赴任祝いは vendor.bundle.css に名前を刻む権利。

13. 表を使った瞬間 MD ポリスに捕まる予定でしたが、彼らも Tailwind のクラス名で目が眩み取り締まり不能になりました。

14. 残業代は Velocity に含まれません。

15. 争いは同レベルの CSS でしか発生しない。

16. クラス名の滝に打たれながら悟ると、sm:, md:, lg: が曼荼羅に見えてくる。