Tailwind CSSのビルド環境構築ガイド

Tailwind CSSとは

Tailwind CSS (https://tailwindcss.com/)は、近年注目を集めている「ユーティリティファースト」のCSSフレームワークです。従来のCSSでは、スタイルを定義したクラスをCSSファイルに書いて、それをHTMLに適用するのが一般的でした。しかしTailwindでは、あらかじめ用意されたスタイルのクラス（ユーティリティクラス）をHTMLに直接書き込むことで、素早く柔軟にデザインを組み立てることができます。

ボタンやレイアウトなどのスタイルを、HTMLに直接クラスとして記述できるため、CSSファイルを編集する手間が省けます。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  ボタン
</button>

この1行で、背景色、ホバー時の色、文字色、フォントの太さ、余白、角丸などがすべて設定されています。

CDNから読み込んで使用する方法

手軽にTailwind CSSを試すには、CDNを利用するのが最も簡単です。HTMLの<head>セクションに以下のスクリプトタグを追加するだけで、Tailwindの全てのユーティリティクラスが使えるようになります。

<script src="https://cdn.tailwindcss.com"></script>

この方法は、ページの表示時にブラウザがCSSを組み立てるため、本番環境での使用は推奨されていません。ページの読み込みに時間がかかる可能性があります。開発中の学習や、小規模なプロトタイプ作成に適しています。

本格的なWebサイトやアプリケーションを開発する場合は、次に説明するビルドプロセスを導入し、CSSを最適化することが強く推奨されます。

推奨設定：Viteで開発環境を構築する

ここでは、あらかじめCSSをビルドして最適化されたファイルをページに読み込ませる、プロダクション向けのセットアップ手順を説明します。モダンなフロントエンド開発ツールである Vite (https://ja.vite.dev/) を使用します。

ステップ1: Node.js 関連アプリケーションのインストール

まず、Node.js をインストールします。未インストールの場合は、公式サイトからインストーラーをダウンロードするか、お使いのOSのパッケージマネージャーを使用してください。

公式サイト: https://nodejs.org/ja

Windows: 公式サイトから「Windows インストーラー(.msi)」をダウンロードしてインストールします。
Ubuntu: ターミナルで以下のコマンドを実行します。
```
sudo apt update
sudo apt install nodejs npm
```

ステップ2: Viteのプロジェクトを作成

A. プロジェクトを作成

次のコマンドでViteプロジェクトを作成します。my-projectは任意のプロジェクト名に変更してください。

npx create-vite@latest my-project --template vanilla

--template vanillaは、フレームワークを使わない素の HTML/CSS/JS プロジェクトを作成するための指定です。Vue や React などフレームワークのテンプレートも使用できます。--templateオプションなしで実行することでインタラクティブに設定を選択することもできます。

以降はプロジェクトのディレクトリの下で作業するので移動しておきます。

cd my-project

B. 依存するモジュールのインストール

プロジェクトを作成すると、Node.js のモジュールの依存関係を管理するファイルpackage.jsonは作成されますがインストールはされないのでここでインストールします。

npm install

C. 動作の確認

ローカルでVitaのWebサーバーが起動するので、ブラウザでアクセスして確認してください。

npm run dev

下のような画面が表示されれば正常に動作しています。

D. Vitaのサンプルファイルの削除

index.html、public以下のファイル及びsrc以下のファイルを削除します。

rm index.html

rm public/*

rm src/*

ステップ3: Tailwind CSSのインストールと設定

A. 関連のパッケージのインストール

以下のコマンドで Tailwind CSS 関連のパッケージをインストールします。

npm install tailwindcss @tailwindcss/vite

B. 設定ファイルの作成

Tailwind が CSS を適用するファイルを検知できるよう tailwind.config.js を作成します。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // JavaScriptやTypeScriptファイルも対象に含める
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ステップ4: VitaでTailwind CSSを使用する設定

以下の内容でvite.config.jsを作成します。

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

ステップ5: サンプルページの作成

Tailwind CSSのテストのためにサンプルページを作成します。

A. 以下の内容で`index.html`を作成します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSSサンプルページ</title>
    <link href="/src/style.css" rel="stylesheet" />  
  </head>
  <body>
    <div class="bg-blue-100 flex items-center justify-center h-screen">
      <div class="bg-white p-6 rounded-lg shadow-xl text-center">
          <h1 class="text-3xl font-bold text-blue-700 mb-4">こんにちは、Tailwind CSS!</h1>
          <p class="text-gray-600 text-lg">このテキストはTailwind CSSでスタイリングされています。</p>
          <button class="mt-6 bg-red-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full">
            ホバーすると色が変わります
          </button>
      </div>
    </div>
  </body>
</html>

B. 以下の内容で`src/style.css`を作成します。

@import "tailwindcss";

ステップ6: 開発サーバーの起動

以下のコマンドで開発サーバーを起動し、ブラウザで表示を確認します。

npm run dev

Viteがローカルサーバーを立ち上げ、ファイルの変更を監視して自動でブラウザに反映（ホットリロード）してくれます。

下のような画面が表示されれば正常に動作しています。

ステップ7: 本番用のビルドと公開

開発が完了したら、公開用のファイルを生成します。

npm run build

このコマンドにより、distディレクトリに、未使用のスタイル設定が削除（パージ）され、最適化されたHTML、CSS、JSファイルが生成されます。このdistディレクトリの中身をサーバーにアップロードすれば公開完了です。

ステップ8: Webサイト開発のスタート

Vitaプロジェクトのディレクトリ構成は、以下のようになっています。index.html、src/以下、及びpublic/以下に HTML/CSS/JS ファイルを書いていきましょう。

my-project/
├── dist/               # ビルド後の公開用ファイルが格納される
├── node_modules/       # Node.jsのモジュールがインストールされる
├── public/             # そのままコピーされる静的ファイル (画像など)
├── src/                # ソースコード (HTML, CSS, JSなど)
├── .gitignore          # Gitの無視ファイル (プロジェクトを作成すると自動的に作成される)
├── index.html          # エントリーポイントとなるHTML
├── package.json        # Node.jsのプロジェクト設定ファイル
├── package-lock.json   # Node.jsのモジュールロックファイル
├── tailwind.config.js  # Tailwind CSSの設定ファイル
└── vite.config.js      # Viteの設定ファイル

各ソースファイル内での他のファイルの参照は、以下のように記述します。

プロジェクトルートからの相対パス		ソースファイルに記述するパス
`src/hogehoge.html`	⇒	`/src/hogehoge.html`
`public/foobar.png`	⇒	`/foobar.png`

Vitaがビルド時に出力先のパスに合わせて適切に書き換えます。

これでTailwind CSSを使用したWebサイトの開発をする準備が整いました。是非、素敵なWebサイトを作ってください。

Tips: ルートではないディレクトリで公開する方法

本番環境でプロジェクトをルートディレクトリ（例: https://example.com/）以外（例: https://example.com/foo/bar/）に公開する場合、Viteの設定ファイルである vite.config.js に base オプションを設定します。

例えば、このサイトなら https://sepbliss.jp/howto/How_to_use_Tailwindcss/ でアクセスできるようにするので、以下のようにbaseオプションを設定します。

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  // 公開するディレクトリのパスを指定
  base: "/howto/How_to_use_Tailwindcss/",
})

この設定により、ビルド時に生成されるHTMLファイル内のアセット（CSSやJSファイル）へのパスが、指定した base パスを基準に正しく解決されるようになります。

Tips: 開発中に自動でビルドする方法

以下のコマンドを実行すると、ソースファイルを監視して変更時に自動的にビルドすることができます。開発作業がちょっと楽になります。

npx vite build --watch

このコマンドを実行すると、Viteはファイルの変更を待ち受け状態になり、変更があるたびに再ビルドを実行します。