Tailwind CLI入門 ― Node.jsなしでも使えるCSS構築ツール

Tailwind CLI入門 ― Node.jsなしでも使えるCSS構築ツール

作成日:
更新日:
CSSTailwind CSSCLIフロントエンドWeb開発

Tailwind CSSのビルド方法にはVite pluginやPostCSS経由などいくつかの選択肢がありますが、最もシンプルで速いのが Tailwind CLI です。

v4で大きくリニューアルされたTailwind CLIは、設定ファイルなしで動き、Node.jsすら不要なスタンドアロン版も用意されています。この記事では、Tailwind CLIの導入から実践的な使い方まで解説します。

Tailwind CLIとは

Tailwind CLIは、HTMLやJavaScriptファイルからユーティリティクラスを検出し、対応するCSSを生成するコマンドラインツールです。

特徴

  • ゼロコンフィグ: 設定ファイルなしですぐ使える
  • 高速: Rust製のOxideエンジンで高速ビルド
  • スタンドアロン対応: Node.jsなしで動作する実行ファイルも提供
  • watchモード: ファイル変更を監視して自動リビルド
  • v4で刷新: @tailwindcss/cli パッケージとして独立

セットアップ（4ステップ）

Step 1: インストール

npm install tailwindcss @tailwindcss/cli

v4では tailwindcss 本体に加えて @tailwindcss/cli パッケージが必要です。v3まではCLIが本体に含まれていましたが、v4で別パッケージに分離されました。

Step 2: CSSファイルにインポートを追加

メインのCSSファイルに1行追加するだけです。

src/input.css
@import "tailwindcss";

v3では @tailwind base; @tailwind components; @tailwind utilities; と3行書いていましたが、v4では標準のCSS @import 文1行に統一されました。

Step 3: ビルドの実行

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
オプション説明
-i入力CSSファイル
-o出力CSSファイル
--watchファイル変更を監視して自動リビルド
--minify出力CSSを圧縮

--watch をつけると、ソースファイルの変更を検知して自動的にCSSを再生成してくれます。開発中は基本的にこのモードで動かします。

Step 4: HTMLで読み込む

src/index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

これだけで、Tailwind CSSが使えるようになります。

スタンドアロン版（Node.js不要）

Tailwind CLIにはスタンドアロン実行ファイルも用意されています。Node.jsをインストールしたくない環境や、CIパイプラインで軽量に動かしたい場合に便利です。

ダウンロード

GitHub Releases からOS・アーキテクチャに合ったバイナリをダウンロードできます。

# macOS (Apple Silicon)
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
 
# 実行
./tailwindcss-macos-arm64 -i ./src/input.css -o ./src/output.css --watch

利用シーン

シーンメリット
CI/CDNode.jsのインストール不要で高速
非Node.jsプロジェクトPHP、Ruby、Python等のプロジェクトでも使える
Dockerイメージサイズを小さく保てる
フレームワーク統合Phoenix（Elixir）等はスタンドアロン版を標準利用

v4の新機能：CSS-firstな設定

Tailwind CSS v4の最大の変更点は、設定がJavaScript（tailwind.config.js）からCSSに移行したことです。

@theme ディレクティブ

カスタムカラーやフォント、ブレークポイントなどのデザイントークンをCSSで定義します。

src/input.css
@import "tailwindcss";
 
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-brand-100: oklch(0.99 0 0);
  --color-brand-200: oklch(0.98 0.04 113.22);
  --color-brand-300: oklch(0.94 0.11 115.03);
  --color-brand-400: oklch(0.92 0.19 114.08);
  --color-brand-500: oklch(0.84 0.18 117.33);
  --color-brand-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

これらの変数は自動的にユーティリティクラスとして利用可能になります。

<!-- @themeで定義したカスタムカラーがそのまま使える -->
<div class="bg-brand-500 text-white font-display">
  カスタムテーマ
</div>

v3からの主な変更点

項目v3v4
インポート@tailwind base/components/utilities@import "tailwindcss"
設定ファイルtailwind.config.js（JavaScript）@theme（CSS）
カラー形式hex / rgboklch（推奨）
CLIパッケージtailwindcssに内蔵@tailwindcss/cli（別パッケージ）
Vite連携PostCSS経由@tailwindcss/vite（専用プラグイン）
コンテンツ検出content配列で手動指定自動検出
エンジンJavaScriptOxide（Rust製、高速）

コンテンツの自動検出

v3ではtailwind.config.jsのcontent配列にスキャン対象のファイルパターンを手動で指定する必要がありました。

tailwind.config.js (v3)
// v3: 手動でスキャン対象を指定
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    './components/**/*.{html,js}',
  ],
  // ...
}

v4ではこの設定が不要です。Tailwindがプロジェクト内のファイルを自動的に検出してくれます。

実践: package.jsonへのスクリプト登録

実際のプロジェクトでは、package.jsonにスクリプトを登録して使うのが一般的です。

package.json
{
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch",
    "build": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --minify"
  },
  "devDependencies": {
    "tailwindcss": "^4.0.0",
    "@tailwindcss/cli": "^4.0.0"
  }
}
# 開発時（watchモード）
npm run dev
 
# 本番ビルド（圧縮）
npm run build

Viteとの使い分け

Tailwind CSSをビルドする方法は複数あります。プロジェクトに応じて選択しましょう。

方法適するケース
Tailwind CLI静的HTML、非SPAプロジェクト、シンプルな構成
@tailwindcss/viteViteベースのプロジェクト（React、Vue、Svelte等）
PostCSS既存のPostCSS設定があるプロジェクト
Play CDNプロトタイピング、実験（本番非推奨）

Tailwind CLIを選ぶべき場合

  • フレームワークなしの静的サイト
  • PHP / Ruby / Python / Go など非Node.jsプロジェクトのフロントエンド
  • 既存プロジェクトへの最小構成での導入
  • CSSだけビルドしたい（バンドラー不要）

Viteプラグインを選ぶべき場合

  • React / Vue / Svelte / SvelteKit などのSPA/SSRフレームワーク
  • HMR（Hot Module Replacement）とのシームレスな統合が必要
vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

プレフィックス設定

既存のCSSとクラス名が衝突する場合、プレフィックスを追加できます。

src/input.css
@import "tailwindcss" prefix(tw);
 
@theme {
  --font-display: "Satoshi", "sans-serif";
  --color-primary: oklch(0.84 0.18 117.33);
}

この設定により、生成されるCSS変数にプレフィックスが付きます。

/* 生成されるCSS */
:root {
  --tw-font-display: "Satoshi", "sans-serif";
  --tw-color-primary: oklch(0.84 0.18 117.33);
}

ユーティリティクラスもプレフィックス付きになります。

<!-- プレフィックス付きで使用 -->
<div class="tw:bg-primary tw:text-white tw:font-display">
  プレフィックス付き
</div>

トラブルシューティング

クラスが反映されない

Tailwind CLIがファイルを検出できていない可能性があります。v4では自動検出ですが、.gitignoreに含まれているファイルは無視されます。

# ビルド結果を確認
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css
 
# 出力されたCSSのサイズをチェック
wc -c ./src/output.css

出力CSSが極端に小さい場合、クラスが検出されていません。

watchモードが反応しない

ファイルシステムの監視上限に達している可能性があります（Linux環境で起きやすい）。

# Linux: inotify上限を確認・引き上げ
cat /proc/sys/fs/inotify/max_user_watches
echo 65536 | sudo tee /proc/sys/fs/inotify/max_user_watches

v3からの移行エラー

v3の@tailwindディレクティブを使っている場合、v4では動作しません。

/* NG: v3の書き方 */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* OK: v4の書き方 */
@import "tailwindcss";

まとめ

項目内容
パッケージtailwindcss + @tailwindcss/cli
設定CSSファイルに@import "tailwindcss"の1行のみ
カスタマイズ@themeディレクティブでCSS変数として定義
ビルドnpx @tailwindcss/cli -i input.css -o output.css
watchモード--watchオプションで自動リビルド
本番ビルド--minifyオプションで圧縮
スタンドアロンNode.js不要のバイナリも提供

Tailwind CLI は「CSSをビルドする、それだけ」に特化したツールです。バンドラーやフレームワークの設定を気にせず、最小限の構成でTailwind CSSを使い始められます。

v4でCSS-firstな設計になったことで、tailwind.config.jsを書く必要もなくなり、CSSファイルだけで完結する世界に。まずはCLIで試してみて、プロジェクトが複雑になったらViteプラグインに移行する——という段階的なアプローチがおすすめです。

参考リンク