WordPressでTailwind CSSを使い、ローカルでは「purgeせず」開発するPostCSSの設定

15248 ワード
WordPress postcss tailwindcss WordPress テキストリンク

やること

Tailwind CSSのようなCSSフレームワークは、purge機能を使ってると「試しにclassを増やしても、CSSをbuildしないと試すことができない」から困りますね。そこで、ローカルのWordPress環境ではpurgeしてないCSSを読み込ませることにしました。

前提

  • WordPress v5.5.0以上
  • NAMP等、開発用のWordPress環境
    • 自作テーマを用意
    • npmをセットアップしとく
    • 以下のパッケージたちを入れる

(package.json)
package.json
    "@fullhuman/postcss-purgecss": "^3.1.3",
    "autoprefixer": "^10.1.0",
    "cross-env": "^7.0.3",
    "cssnano": "^4.1.10",
    "postcss": "^8.2.1",
    "postcss-cli": "^8.3.1",
    "postcss-import": "^14.0.0",
    "postcss-nested": "^5.0.3",
    "postcss-simple-vars": "^6.0.2",
    "purgecss-with-wordpress": "^3.1.3",
    "tailwindcss": "^2.0.2",
    "npm-run-all": "^4.1.5",

postcss.config.js

purgecss-with-wordpressで、省略されると困るWP自体のスタイルを除外しています。

postcss.config.js
const tailwindcss = require("tailwindcss");
const purgecss = require("@fullhuman/postcss-purgecss");
const purgecssWordpress = require("purgecss-with-wordpress");

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require("autoprefixer"),

    // WordPress対応 (https://viarami.com/programming/tailwind-css-wordpress-theme/)
    process.env.NODE_ENV === "production" &&
    purgecss({
      content: ["./**.php", "./**/**.php", "./**.html", "./**.js"],
      safelist: purgecssWordpress.safelist,
      safelistPatterns: purgecssWordpress.safelistPatterns,
      defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    }),

    // 圧縮
    require('cssnano')({
      autoprefixer: false
    }),
  ],
};

style/style.cssを用意

style.css
@charset "UTF-8";

/* purgecss start ignore */
/* (purgeしてほしくないもの) */
/* purgecss end ignore */

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

wp-config.php 

define('WP_ENVIRONMENT_TYPE', 'development');

これと連動してWP_DEBUGがtrueになります(未指定の場合)。

functions.php

ここがキモです。WP5.5のwp_get_environment_type()を使います。環境によって読むCSSを変えます。

functions.php
switch ( wp_get_environment_type() ) {
  case 'local':
  case 'development':
      wp_enqueue_style('tailwind_notpurged',get_template_directory_uri().'/output/style-dev.css',array());
      break;
  case 'production':
  default:
      wp_enqueue_style('tailwind_purged',get_template_directory_uri().'/output/style.css',array());
      break;
}

VS Codeのタスクに登録

vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build:css",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": [],
            "label": "npm: run build:css",
            "detail": "npm run build:css"
        }
    ]
}
package.json
  "scripts": {
    "meta": "cross-env NODE_ENV=meta postcss ./postcss/meta.css -o ./style.css",
    "production": "cross-env NODE_ENV=production postcss ./postcss/style.css ./postcss/editor-style.css -d ./output",
    "sprite": "postcss ./postcss/sprite.css -o ./output/sprite.css",
    "dev": "postcss ./postcss/style.css -o ./output/style-dev.css",
    "build:css": "run-s meta production sprite dev"
  }

metaコマンドは、テーマの情報を更新するためのものです。詳しくはこちらを参照していただければと思います。

最後にCmd+Shift+Bを押せば、purgeしたstyle/style.cssと、purgeしていないstyle/style-dev.cssが生成されます。

参考