【備忘録】Tailwind CSSの環境構築（CDN版・CLI版）

はじめに

Tailwind CSSのCDN版とCLI版の環境構築についての備忘録です。開発環境はWSL2です。

1. CDN版（とりあえず体験）

Bootstrapと同じ感覚で使える。

HTMLに以下を追加し、クラスを各要素にべた書きする。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

本番環境での利用は非推奨。
理由は、クラスの粒度が細かくCSSが巨大化しやすいことと、外部サーバーに依存するためパフォーマンスが悪いから。また、PostCSSを通さないため@applyは使えない。

2. CLI版（開発・本番に使う推奨方法）

Tailwind CLIツールはPostCSSベースで、入力したCSSやHTMLのクラスを解析し、必要なスタイルだけをoutput.cssとして出力する。@applyも使用可能。

2-1. お試し用の方法

インストールと設定

npm install tailwindcss @tailwindcss/cli

CSSファイル（例：input.css）に以下を記述

@import "tailwindcss";

HTMLにはビルド済みのCSSを読み込む

<link href="./output.css" rel="stylesheet">

ビルドコマンド

npx @tailwindcss/cli -i ./input.css -o ./output.css --watch

これで、HTMLに書かれたクラスだけが含まれる軽量なoutput.cssが生成される。
--watchで変更を監視し、自動で再ビルドも可能。

2-2. 本格開発環境構築（npmスクリプトを活用）

プロジェクトを初期化

npm init -y

Tailwind CSSの3系を開発依存にインストール

npm install -D tailwindcss@3.3.2

※4系は自分の環境では不具合があったため3系を明示。

tailwind.config.jsを作成し、@applyを使えるように設定（自動で生成されない場合）

touch tailwind.config.js

module.exports = {
  content: ["./*.html"], // パスに注意。この場合はルート直下のhtmlを指定。
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSファイル（input.css）に基本記述を入れる

@tailwind base;
@tailwind components;
@tailwind utilities;

package.jsonにビルド用スクリプトを追記

"scripts": {
  "build": "tailwindcss -i ./input.css -o ./output.css --minify",
  "dev": "tailwindcss -i ./input.css -o ./output.css --watch"
}
// この場合はルート直下のcssを参照

※全体例

{
  "name": "tailwind-cli", // ディレクトリ名
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "commonjs",
  "scripts": {
    "build": "tailwindcss -i ./input.css -o ./output.css --minify",
    "dev": "tailwindcss -i ./input.css -o ./output.css --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "tailwindcss": "^3.3.2"
  },
  "author": "",
  "license": "ISC"
}

ビルド実行

npm run build  # 本番用
npm run dev    # 開発用

※コマンドを叩いた時点でのoutput.cssを生成