これまでWordPressでサイトを作る際は、無料のテーマを使ってカスタマイズしたい部分のCSSを自分で書いていました。
しかし今回は勉強も兼ねて、1からデザインをしていこうと思います。
どのように開発を進めるのが良いかGemini先生に相談してみたところ、「Tailwind CSS」（以下、Tailwind）というCSSフレームワークを使用するのがおすすめとのことだったので、アドバイス通りにこれで開発を行っていくことにします。
Tailwindは、あらかじめ用意されているスタイルを「クラス名」としてHTMLに直接書き込むことで、CSSファイルを一から作成することなく、簡単にスタイルを適用できるようになるフレームワークです。
かなり有名なフレームワークらしいのですが、私は名前しか知りませんでした。
AstroへTailwindを導入する方法
AstroにTailwindを導入してデザインを始める場合、Astro公式チームが開発している「インテグレーション機能」を使って環境を整えるのが推奨されている方法です。
なお、この方法でインストールされるTailwindは最新のバージョン4になります。(2026.04.17現在)
インテグレーションコマンドの実行
今回はPodman環境でAstroを構築しているため、まずはコンテナを起動させ、コンテナ内でAstro公式のセットアップコマンドを実行します。
podman-compose exec コンテナ名 npx astro add tailwind
これにより、パッケージのインストールと設定ファイルの作成・更新が自動で行われます。
実行中に「パッケージをインストールしますか？」「設定ファイルを更新しますか？」といった確認（y/n）が出ますので、すべて y または Enter で進めてください。
以下が、実際に実行した結果のログです。（私の環境のコンテナは「astro-dev」という名前がついています）
$ podman-compose exec astro-dev npx astro add tailwind
podman-compose version: 1.0.6
['podman', '--version', '']
using podman version: 4.9.3
podman exec --interactive --tty astro-dev npx astro add tailwind
◇ Resolved packages.
Astro will run the following command:
If you skip this step, you can always run it yourself later
╭───────────────────────────╮
│ npm i @tailwindcss/vite@^4.2.2 tailwindcss@^4.2.2 │
╰───────────────────────────╯
To run this command without prompts, pass the --yes flag
◇ Continue?
Yes
◇ Dependencies installed.
Astro will scaffold ./src/styles/global.css.
◇ Continue?
Yes
Astro will make the following changes to your config file:
╭─astro.config.mjs───────────────╮
│ // @ts-check │
│ import { defineConfig } from 'astro/config'; │
│ │
│ import tailwindcss from '@tailwindcss/vite'; │
│ │
│ // https://astro.build/config │
│ export default defineConfig({ │
│ site: 'https://gamelife.server-memo.net', │
│ │
│ vite: { │
│ plugins: [tailwindcss()], │
│ }, │
│ }); │
╰────────────────────────╯
◇ Continue?
Yes
success Added the following integration to your project:
- tailwind
action required You must import your Tailwind stylesheet, e.g. in a shared layout:
╭─src/layouts/Layout.astro────╮
│ --- │
│ import '../styles/global.css' │
│ --- │
╰─────────────────╯
exit code: 0
導入されたかの確認
インテグレーションコマンド（astro add tailwind）を実行した際、自動的に作成・更新されたファイルがメッセージ内に表示されるので、内容を確認しておきます。
./src/styles/global.css
Tailwindの基本スタイルをインポートするための設定が記述されています。
@import "tailwindcss";
./astro.config.mjs
更新後の内容がメッセージに出力されていますので、実際のファイルが正しく更新されているか確認します。
私の環境では、以下の設定が追加されていました。
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite'; // 追加された項目
// https://astro.build/config
export default defineConfig({
site: 'https://gamelife.server-memo.net',
vite: {
plugins: [tailwindcss()], // 追加された項目
},
compressHTML: false,
});
./package.json
dependenciesに「@tailwindcss/vite」と「tailwindcss」が追加されているか確認します。
astroは最初から記載がありました。
{
##### 中略 #####
"dependencies": {
"@tailwindcss/vite": "^4.2.2", // 追加された項目
"astro": "^6.1.2",
"tailwindcss": "^4.2.2" // 追加された項目
},
##### 中略 #####
}
Tailwindの適用方法（global.cssをインポートする）
コマンド完了時のメッセージにもある通り、Tailwindによるスタイルを適用させたい場合は、反映させたいレイアウトファイルなどに global.css をインポートしてあげる必要があります。
./src/layouts/BaseLayout.astroに追加する場合の例
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
// この1行を追加してTailwindを読み込む
import '../styles/global.css';
// サイト全体のデフォルト設定（基本の看板と予備の説明文）
const siteName = "Game Life";
const defaultDescription = "ゲームに関するブログです。";
##### 以下略 #####
設定の反映
設定を確実に反映させるため、一度コンテナを再起動します。
$ podman-compose restart astro-dev
これで「Tailwind」の導入は完了です。
実際に使用してみる
VSCodeに拡張機能「Tailwind CSS IntelliSense」を追加
本格的に使い始める前に、VSCodeに「Tailwind CSS IntelliSense」という拡張機能を追加しておきます。
これを導入することで、Tailwindのクラス名の予測変換（オートコンプリート）などが利用できるようになり、開発が劇的に楽になります。
typographyプラグインをインストールする
Tailwindを試すにあたり、どのように開発を進めていくのが良いかをGemini先生に相談したところ、「@tailwindcss/typography」というプラグインを使用すると、手っ取り早く記事全体を「いい感じ」のスタイルに整えてくれて便利だと教わりました。
そこで、早速この「typography」プラグインを導入してみることにします。
まずはコンテナの中で、npmを使ってプラグインをインストールします。
$ podman-compose exec astro-dev npm install -D @tailwindcss/typography
ちなみに、「-D」オプションは「--save-dev」の省略形で、これを付けてインストールすると、「package.json」の「devDependencies」（開発用依存関係） というグループにパッケージの名前が書き込まれます。
なぜ「-D」オプションを使用するのか？
今回インストールした「@tailwindcss/typography」は、書いた記事をビルドするときに「綺麗なCSSを適用するためのツール」です。
一度CSSを適用してしまえば、ブラウザでサイトを表示する時（本番環境）にはこのツール自体は必要なくなるため、-D を付けて「開発用」として明確に分けてインストールしています。
現在の私の環境のように、本番環境上でそのまま開発も行っている場合は、実はオプションをつけなくても動作自体に問題はありません。
しかし、後で「package.json」を見直した際に、「サイトを表示するために絶対必要なものなのか」「開発時だけ必要なツールなのか」が一目でわかるようになります。
未来の自分に向けた整理整頓の意味も込めて、「-D」オプションを使用しています。
global.cssの編集
次に、「./src/styles/global.css」に「typography」を読み込むための設定「@plugin "@tailwindcss/typography";」を追加します。
「typography」は非常に便利なのですが、デフォルトのままだと見出し部分が少し寂しいので、h1からh4までの見出しスタイルと、リンクの色を青くする設定を追加してみました。
@import "tailwindcss"; // typographyの読み込み設定を追加 @plugin "@tailwindcss/typography"; // スタイル設定を追加 .prose h1 { /* h1: 文字サイズを大きくするデザイン */ @apply text-3xl font-bold pb-2 mb-6 mt-10 text-gray-900; } .prose h2 { /* h2: 青い下線付きのデザイン */ @apply text-2xl font-bold border-b-2 border-blue-500 pb-2 mb-6 mt-10 text-gray-900; } .prose h3 { /* h3: 青い左線付きのデザイン */ @apply text-xl font-bold border-l-4 border-blue-500 pl-3 mb-4 mt-8 text-gray-900; } .prose h4 { /* h4: 少し控えめな太字 */ @apply text-lg font-bold text-gray-800 mb-3 mt-6; } /* リンクの色を青くする */ .prose a { @apply text-blue-600 no-underline hover:underline; }
typographyの適用方法
実際のブログ記事ページである「./src/pages/blog/[slug].astro」ファイルを例に、具体的な適用方法を解説します。
これまでの手順で、「global.css」に「Tailwind」と「typography」を読み込む設定を行い、さらに共通レイアウトである「BaseLayout.astro」でその「global.css」を読み込むようにしました。
そのため、各ページではこの「BaseLayout.astro」をインポートして枠組みとして使うだけで、自動的に「Tailwind」と「typography」の機能が使える状態になっています。
準備は整っているので、あとは「typography」のスタイルを適用させたい部分（記事の本文など）を「<div class="prose"></div>」タグで囲むだけです。
このproseこそが、typographyプラグインの機能を呼び出すための専用クラスになります。
./src/pages/blog/[slug].astro の編集
今回のコードでは、「prose」以外にも「max-w-none」と「prose-slate」という2つのクラスを一緒に使用していて、それぞれの役割は以下の通りです。
- max-w-none: デフォルトの文字幅制限を解除し、画面いっぱいまで表示する
- prose-slate: 文字やリストの色を少し青みがかったグレー（slate：スレート）にする
---
import { getCollection, render } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
return blogEntries.map(entry => {
const cleanSlug = entry.id.split('/').pop();
return {
params: { slug: cleanSlug },
props: { entry },
};
});
}
const { entry } = Astro.props;
const { Content } = await render(entry);
---
<BaseLayout pageTitle={entry.data.title} pageDescription={entry.data.description}>
<article>
{/* ここで記事のタイトルと本文を prose で囲んでいます */}
<div class="prose max-w-none prose-slate">
<h1>{entry.data.title}</h1>
<Content />
</div>
<hr />
<p>公開日: {entry.data.pubDate.toLocaleDateString('ja-JP')}</p>
<p>著者: {entry.data.author}</p>
</article>
</BaseLayout>
適用前と適用後の比較画像
「Tailwind」と「typography」によるスタイルの適用前の画像です。
「Tailwind」と「typography」によるスタイルを適用後の画像です。
印象がかなり変わりましたね。
【おまけ】Unknown at rule @plugin 対策
VScodeで開発を行っていると、「Unknown at rule @plugin」といったといった警告メッセージが表示されることがあります。
これは、VSCodeの標準CSSチェッカーが「@plugin」というTailwind独自のルールを知らないために発生します。
拡張子が .css のファイルは「Tailwindの文法」として扱うよう、VSCodeの settings.json に設定を追加することで改善できます。
.vscode/settings.json
以下の設定を追加し、VSCodeを再起動します。
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#4aa1c4",
"activityBar.background": "#4aa1c4"
},
// 以下の設定を追加
"files.associations": {
"*.css": "tailwindcss"
}
}
これで不快な警告も消え、快適な開発環境が完成しました！引き続き、ブログのデザインをさらに作り込んでいきます。
コメント