Astro×Tailwind CSSは相性抜群！Tailwind CSS選定のメリット

はじめに

Tailwind CSS は CSS フレームワークの一つです。「テイルウィンド・シーエスエス」と読みます。

ここでは、 Tailwind CSS を初めて使った自分が Astro プロジェクトの構築時に感じた Tailwind CSS を使うメリットについてまとめます。

まずは Tailwind CSS を知るため、 CSS と Tailwind CSS を比較したあとで、 Astro と Tailwind CSS の相性に焦点をあてたいと思います。

CSS の問題点

まずは素の CSS の問題点を挙げてみます。

CSS ファイルが必要になる
CSS ファイルが肥大化しやすい
デザインの統一が難しい
命名規則を含む管理・運用コストが高い
スコープを考慮する必要がある
基本的に CSS ファイルを使うため、コンポーネント単位で完結できず、コンポーネント指向との相性が悪い

まだまだありそうですが、ひとまずこの程度にしておきます。

個人的な話をすると、とにかく管理が面倒に尽きます。
重複や未使用のクラスが気づかれずにそのまま放置されたり、クラスが増えれば影響範囲の把握も困難で思うようなスタイリングができない結果、大量のリセットクラスができあがる……といった悪夢もありがちです。

Tailwind CSS を使うメリット

Tailwind CSS を使うと前述の問題は解決されるのでしょうか。
これが意外と解決されます。

CSS ファイルが不要

素の CSS の場合は、まず汎用的なクラスを作るところから始まりますが、 Tailwind CSS はそもそも最小限の単位の汎用的なクラスで構成されています。
そのため、 CSS ファイルを用意せずとも、このクラスを要素に適用するだけでOKです。

もちろん、 CSS ファイルに Tailwind CSS を書くこともできます。
その場合も、前述の通り Tailwind CSS の汎用的なクラスを使うので、従来の CSS と比べてコードが格段に短くなります。

CSS ファイルを使うにしても、使わないにしても、コードは短く管理が楽になります。

デザインの統一感・一貫性を保ちやすい

Tailwind CSS には、 @theme で指定するテーマ管理機能があります。
プロジェクトで使用するデフォルト値をまとめておけるので、統一感のあるデザインを維持しやすいです。たとえば以下のような項目を設定できます。

カラー
フォント
ブレークポイント
スペーシング

他にも、 Tailwind CSS はデフォルトで「8px スケール」「色の階調」「余白の規則」が整っており、自然と統一感のある UI になります。
自由の弊害ともいえますが、細かすぎる指定は一貫性を損ねる原因になるので、不要な指定を除外することで不統一が防げます。

コンポーネント指向の実装でスコープは常に最小限に

Tailwind CSS を使えば、コンポーネントや要素のレベルでスコープ問題を解決できます。
コンポーネント指向である Astro においても、コンポーネント単位でスタイルまで完結させることができるので、相性は抜群に良いです。

情報が充実している

蛇足的なポイントではありますが、純粋な CSS とは数で劣るとしても、十分膨大な情報量です。
コミュニティが非常に豊富で、困ることはほぼありません。

Astro と Tailwind CSS の相性

素の CSS よりも Tailwind CSS が良いというのは、ここまでの通りです。
今度は Astro と Tailwind CSS に焦点を当てて、相性を考えてみたいと思います。

コンポーネント指向とマッチ

前述の通りですが、 Astro はコンポーネント指向であり、コンポーネント内でもスタイルが完結できる Tailwind CSS との相性は良いです。

ファイルを行き来する手間がなく、コンポーネント単位で管理すればOKなので、効率的に開発を進めることができます。

軽量で高速

Tailwind CSS は使ったクラスだけを抽出してビルドします。
そのため、最終的な CSS はかなり軽量になることも多いです。

また、 Tailwind CSS は純粋な CSS なので、 Astro と完全に共存できます。
Astro そのものも軽量なので、双方の良さを損ねることなく、高速で快適なシステム構築ができます。

Markdown のレイアウトが美しい

Astro のブログ構成は Markdown が中心になりますが、 Tailwind CSS には Markdown の文章の読みやすさを自動で整える prose があります。

prose は公式プラグインの Typography を導入することで使えるクラスで、 Markdown の HTML 化した構造に特化しているため、クラス１つで簡単に読みやすいレイアウトを適用できます。

そのため、この prose が Tailwind CSS 選定の決定打になることも多いと思います。

Tailwind CSS のデメリット

ここまで、 Tailwind CSS をべた褒めするかの如く良い話ばかりしてきましたが、もちろん悪い話もあります。

自分なりの対策も交えて、デメリットをまとめます。

コードが読みづらい

CSS ファイルが不要になるということは、各要素にスタイルの指定をするということです。
たとえば以下のように、 class 属性が長くなってしまいます。


<div class="flex items-center justify-between rounded-lg bg-white px-4 py-2 shadow-sm"></div>

はじめは、このことが理由で若干のアンチ Tailwind CSS でした。

対策１．変数にする

関連のあるクラスを変数にまとめることで、理解しやすくなります。

以下のような感じで、たとえば、変数 border は要素に枠線をつけるためのクラスをまとめ、変数 hover は要素の hover 時のエフェクトをまとめています。
（かなり適当な例です……深く考えないでください）

---
const border = " border border-gray-300";
const hover = "hover:shadow-lg hover:-translate-y-0.5 hover:opacity-95 transition-all duration-300";
---

<div class={`bg-white ${hover} ${border}`}></div>

対策２．プラグインの導入

Tailwind CSS が公式に提供している prettier-plugin-tailwindcss は、 Tailwind CSS のクラスを自動で並べ替えてくれるプラグインです。
無意識ですが、思い返すと、自然とクラスの並びで情報をまとまって認識しているように思います。

以下はインストールコマンドの例です。Prettier プラグインがあわせて必要になります。

npm install -D prettier prettier-plugin-tailwindcss

または、

yarn add -D prettier prettier-plugin-tailwindcss

導入後は、プロジェクトの設定ファイルでプラグインの挙動を指定します。自分の環境では、 .prettierrc に以下を追加しました。

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

学習コストがかかる

Tailwind CSS のクラスを読む分には直観的に理解できるのでほとんど問題なかったのですが、書く際は、やはりリファレンスを都度参照する必要がありました。

ただ、それだけといえばそれだけで、 CSS を理解していてコードに慣れているのであれば、特別複雑な概念を理解するようなことはないので、よほど時間がない場合を除けば問題ない程度だと思います。

気持ちだけで、特別な対策はありません。

prose のカスタマイズが難しい

prose は内部のセレクタが強く、上書きをする際には意外と工夫が必要です。

当初は四苦八苦することもしばしばありましたが、現在は少し落ち着いてきています。慣れもあるのかもしれません。

自分の場合は、 prose のカスタマイズ用の CSS ファイルを用意して対策しています。
他の手段として、 not-prose クラスを使うと prose の適用が外れるため、こちらも有効です。

まとめ

デメリットはもちろんありますが、総評として、 Tailwind CSS は優れており、現時点では Astro プロジェクトへの最適解だと思います。

Astro との相性に関して、代替のフレームワーク等との比較も含めたかったのですが、 Tailwind CSS があまりに圧倒的だったので今回は除外しました。
競合らしい競合は純粋な CSS くらいでしょうか。

Tailwind CSS は現在も活発で、最新の大型アップデート Tailwind CSS v4.0 は2025年にリリースされています。
デメリットも、今後解決されるかなと淡い期待を抱いています。