【Tailwind入門】インストールとプロジェクトセットアップ完全ガイド
CDNクイックスタート
Tailwind CSSを最も速く試せるのがCDNリンクです。ビルドツールは不要で、HTMLファイルに直接追加するだけです。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CDNクイックスタート</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="bg-white p-8 rounded-lg shadow-md">
<h1 class="text-3xl font-bold text-blue-600 mb-4">Tailwindへようこそ！</h1>
<p class="text-gray-600">CDNで手軽にTailwind CSSを試す</p>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではカスタムCSSクラスを書き、スタイルシートをリンクする必要がありますが、TailwindのCDN方式なら
<script>タグ1つですべてのユーティリティクラスを使い始めることができます。
Vite＋PostCSS標準セットアップ
本番プロジェクトでは、最高のビルドパフォーマンスと開発体験を得るためにVite＋PostCSSの標準インストールが推奨されます。
例
npm create vite@latest my-tailwind-app -- --template vanilla
cd my-tailwind-app
npm install tailwindcss @tailwindcss/vite
npm run dev
vite.config.jsでTailwindプラグインを設定します：
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
従来のCSSとTailwindの比較 従来のプロジェクトではPostCSS、Autoprefixerなどのプラグインを手動で設定する必要がありましたが、Tailwind v4はViteプラグインを通じてすべての設定を自動的に処理します。
@import "tailwindcss"の使い方
Tailwind CSS v4は旧来の@tailwindディレクティブの代わりに@import構文を使用し、標準のCSS仕様により良く準拠しています。
例
メインのスタイルシートsrc/style.cssを作成します：
@import "tailwindcss";
HTMLでインポートします：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インポート使用例</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen">
<div class="container mx-auto p-8">
<h1 class="text-4xl font-bold text-white text-center">
Tailwind CSS v4
</h1>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSSファイルに多くのスタイルルールを書く必要がありましたが、Tailwind v4は
@import "tailwindcss"の1行でユーティリティフレームワーク全体を読み込みます。
tailwind.config設定の概要
Tailwind CSS v4はCSSファイルから直接設定をサポートしており、別のJavaScript設定ファイルは不要です。
例
CSSファイル内で@themeディレクティブを使ってテーマをカスタマイズします：
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--font-family-heading: "Noto Sans JP", sans-serif;
}
カスタムテーマの使用：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カスタムテーマ設定</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
}
}
}
}
</script>
</head>
<body class="min-h-screen p-8">
<button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-700">
プライマリ
</button>
<button class="bg-secondary text-white px-6 py-3 rounded-lg ml-4 hover:bg-green-700">
セカンダリ
</button>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSS変数を定義し、コード全体で参照する必要がありましたが、Tailwindのテーマ設定は対応するユーティリティクラスを直接生成するため、はるかに便利に使えます。
VS Codeプラグインのおすすめ
VS Codeプラグインをインストールすることで、Tailwind CSSの開発生産性が大幅に向上します。
必須プラグイン
- Tailwind CSS IntelliSense - 自動補完、シンタックスハイライト、ホバープレビューを提供
- Prettier - 自動フォーマットとクラス名の並べ替え
例
プラグインをインストールすると、クラス名を入力する際に自動補完の候補が表示されます：
<div class="bg-blue-500">
<p class="text-lg font-semibold">
<div class="shadow-lg rounded-xl p-6">
{
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false
}
最初のTailwindプロジェクト
ここまでの学習を定着させるため、完全なTailwindプロジェクトを作成してみましょう。
例
完全なプロジェクト構造とコード：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初めてのTailwindプロジェクト</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-xl font-bold text-gray-800">マイサイト</h1>
<div class="space-x-4">
<a href="#" class="text-gray-600 hover:text-blue-600 transition">ホーム</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition">概要</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition">お問い合わせ</a>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">カードタイトル</h3>
<p class="text-gray-600 text-sm">Tailwind CSSで作成したカードコンポーネントです。</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-gradient-to-br from-green-400 to-teal-500"></div>
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">カードタイトル</h3>
<p class="text-gray-600 text-sm">レスポンシブレイアウトが異なる画面サイズに対応します。</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-gradient-to-br from-orange-400 to-red-500"></div>
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">カードタイトル</h3>
<p class="text-gray-600 text-sm">カスタムCSSは一切不要です。</p>
</div>
</div>
</div>
</main>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではナビバー、カード、Gridなどのコンポーネントごとに別のCSSファイルを書く必要がありましたが、TailwindはユーティリティクラスをHTML内で直接使ってすべてのスタイリングを完了し、開発効率を劇的に向上させます。
❓ よくある質問
@themeディレクティブを使ってスタイルシート内で設定を行いますが、v3は別のtailwind.config.jsファイルを使用します。v4はCSS標準により準拠し、設定がシンプルです。editor.quickSuggestions.stringsが有効になっていることを確認してください。PostCSSインストールを使用している場合は、プロジェクトルートに正しい設定ファイルが存在することも確認してください。📖 まとめ
- Tailwind CSSにはCDNと適切なインストールの両方の方法があり、それぞれクイックプロトタイピングと本番環境に適しています
- Vite＋PostCSSは推奨される標準セットアップで、最高のビルドパフォーマンスを提供します
- Tailwind CSS v4は
@import "tailwindcss"構文でフレームワークをインポートします @themeディレクティブまたはCDNスクリプト設定でテーマカラーとフォントをカスタマイズします- VS CodeのTailwind CSS IntelliSenseプラグインが開発効率を大幅に向上させます
- 最初のプロジェクトでTailwindを使ったレスポンシブページの素早い構築を実演しました
📝 課題
-
⭐ CDN方式で見出し、段落、ボタンを含むシンプルなページを作成し、各要素に少なくとも3つのTailwindユーティリティクラスを適用してみましょう
-
⭐⭐ ViteでTailwind CSSを適切にインストールし、ナビバーとコンテンツエリアを含むページを作成して、カスタムテーマカラーを設定してみましょう
-
⭐⭐⭐ カスタムテーマ設定、ホバーエフェクト、異なる画面サイズで異なる段数を持つ、完全にレスポンシブなカードリストページを作成してみましょう