Astro.js サイトにTailwindCSSをインストールする

astro

Posted at 2025-04-22

TailwindCSSは、あらかじめ用意されたクラス名（font-boldやtext-lgなど）をHTMLに直接書き込むことで、CSSファイルを書かずに素早くスタイルを適用できる人気のフレームワークです。Astroでは簡単に導入できるようになっています。

Tailwind CSS 導入手順

*ここでは執筆時点で最新版の4.1.4を使用しています。

1.Tailwindを追加する

ターミナルを開き、あなたのAstroプロジェクトのディレクトリに移動します。

以下のコマンドを実行します（お使いのパッケージマネージャーに合わせてください）。

# npm を使用している場合
npx astro add tailwind

# pnpm を使用している場合
pnpm astro add tailwind

# yarn を使用している場合
yarn astro add tailwind

コマンドを実行すると、いくつか質問される場合があります（設定ファイルの生成など）。通常はデフォルトの選択肢（Yes）で進めて問題ありません。

このコマンドが自動的に行うこと:
- 必要なパッケージ (tailwindcss, @tailwindcss/vite) をインストールします
- astro.config.mjs にTailwindインテグレーションが追加されます
- src/styles/global.cssが追加されます

2.グローバルCSSファイルを作成・編集する

この作業はTailwindCSSをインストールした際に自動的に実行されているので飛ばしても構いません。

プロジェクト内に src/styles/ ディレクトリがなければ作成します。
src/styles/ ディレクトリの中に global.css という名前でファイルを作成（または既存のファイルを開いて追記）します。
作成した global.css ファイルに、以下の3行を記述します。これはTailwindが動作するために必要な基本的なスタイルを読み込むための指示です。

/* src/styles/global.css */
@import "tailwindcss";

3.レイアウトコンポーネントでCSSを読み込む

サイト全体で共通して使っている レイアウトコンポーネント ファイル（例: src/layouts/BaseLayout.astro など）を開きます。
ファイルの先頭にあるフロントマター部分 (--- で囲まれたエリア) で、先ほど作成した global.css ファイルを インポート します。

---
// src/layouts/BaseLayout.astro
import '../styles/global.css'; // ← この行を追加してCSSファイルを読み込む

// 他のインポートや変数定義...
const { title } = Astro.props;
---
<html lang="ja">
<head>
  {/* ... headの内容 ... */}
  <title>{title}</title>
</head>
<body>
  <slot />
</body>
</html>

これで、サイト内のすべてのページでTailwindのスタイルが使えるようになります。

Tailwind CSS の使い方

設定は以上です。これで、.astro ファイルなどのHTML要素の class 属性にTailwindのユーティリティクラスを指定するだけでスタイルが適用されるようになります。

例:

<h1 class="text-3xl font-bold text-blue-600 mb-4">ようこそ！</h1>
<p class="text-gray-700 leading-relaxed">これはTailwind CSSでスタイルされた段落です。</p>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
  クリック！
</button>

text-3xl: 文字サイズを大きく
font-bold: 文字を太く
text-blue-600: 文字色を青色に
mb-4: 下にマージンを追加
p-4: 内側にパディングを追加
flex: Flexboxレイアウトを適用

など、多数のクラスがあります。Tailwind CSSの公式ドキュメントで利用可能なクラスを探せます。

開発サーバーでの確認と注意点

開発サーバーを起動 (npm run dev など) して、サイトにアクセスします。
class 属性に指定したTailwindのスタイルが適用されているか確認してください。

注意点:
Tailwindを入れるとスタイルがリセットされます。リンクの色が黒くなったりマウスオーバーでアンダーラインが出なくなったりするので自分でClassを入れたりGlobalスタイルを書いてください

TailwindCSSのスタイルが反映されない場合

global.css の内容（@tailwind ...）が正しいか確認してください。
レイアウトコンポーネントで global.css を正しく import できているか確認してください。
クラス名のスペルミスがないか確認してください。
tailwind.config.mjs (または .cjs) の content 配列に、スタイルを適用したいファイル（.astro, .md など）のパスが含まれているか確認してください（通常は astro add で適切に設定されます）。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up