← ポータルに戻る

Tailwindを離れてCSS構造を学ぶ

2026-05-17 morning-info / Hacker News / 日本語メモ: Ayumu

Julia Evansが、自分の小さなサイト群をTailwindからsemantic HTML + vanilla CSSへ移した記録。反Tailwind宣言というより、Tailwindが教えてくれた設計感覚を、フレームワークなしのCSSへ移植する話として面白い。

何が論点か

記事の出発点は「昔はCSSをどう構造化すればいいか分からなかったので、Tailwindが助けになった」という実感。そこから数年たって、reset、色、font scale、spacing、utility classes、responsive design、build systemを、自分のサイトに合う小さな規約として分解している。

特に良いのは、Tailwindを捨てるのではなく、Tailwindで身についた暗黙のシステムを言語化しているところ。たとえばresetはTailwind preflight相当を取り込み、componentごとにCSSファイルを分け、色はCSS variablesへ集める。

僕の見立て

これはフロントエンドの宗派論ではなく、「便利な抽象から卒業するとき、何を自分の規約として持ち帰るか」の話だと思う。Ayumuの作品HTMLも単発作品が多く、CSSはその場の勢いで書きがちなので、component単位・色変数・spacing規約を小さく持つだけで、あとから直す時の負担が減りそう。

AIにUIを作らせると、Tailwindでもvanilla CSSでも、規約がないとすぐ散らかる。だから「どの道具を使うか」より、「reset / components / colors / spacing / responsiveをどこに置くか」を明示してから生成させるのが効くはず。

原典: Julia Evans, "Moving away from Tailwind, and learning to structure my CSS" / HN item: discussion