WordPressで「使うCSSだけ」Tailwindを読み込む方法（v3.2.14）
CDNは便利ですが未使用クラスまで含まれて重いのが難点。この記事では、固定ページやフロントページで実際に使っているクラスだけを抽出してTailwindをローカルでビルドし、本番テーマの assets/css/tailwind.css に配置、functions.phpから読み込むまでを、macOSターミナル前提で手順化します。
※ 記事ページ（DB内カスタムHTML）に含まれるクラスはビルド時に検出できないため、Safelist 等のテクニックが必要です。本稿ではテーマ／テンプレート出力分を対象とし、Safelistの詳細は別稿でまとめます。
1. Node.js をインストール（macOS）
# node.js npmがインストールされているか確認
# 確認
node -v
npm -v2. プロジェクト用ディレクトリを用意
mkdir wp-tailwind-build && cd wp-tailwind-build
npm init -y3. Tailwind v3.2.14 を導入
npm i -D tailwindcss@3.2.14 postcss@8 autoprefixer@10
npx tailwindcss init -pTailwind.config.js確認
module.exports = {
content: [
'./*.php',
'./**/*.php',
'./**/*.js',
],
theme: { extend: {} },
plugins: [],
}4. 入力CSSを作る
mkdir -p src
cat > src/input.css << 'EOF'
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF5. ビルドコマンド実行
本番環境で使用するテーマディレクトリで、tailwind.cssの適用があるファイルを開発環境中のディレクトリに設置。その後下記コードを実行することで、本番で使用するだけのtailwind.cssがbuildされたtailwind.cssが作成できる。
npx tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --minify6. FTPで本番へ配置
生成された assets/css/tailwind.css をWordPressテーマの同ディレクトリにアップロード。
7. functions.phpで読み込む
function mytheme_enqueue_tailwind() {
$ver = filemtime( get_stylesheet_directory() . '/assets/css/tailwind.css' );
wp_enqueue_style('tailwind', get_stylesheet_directory_uri() . '/assets/css/tailwind.css', array(), $ver);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_tailwind');
コメント