WordPressのテーマ作成の備忘録④

寄り道してunderscoresに
tailwindcss3とAlpinejsをLaravel Mixで導入。

underscoresを公式からダウンロードして

underscores.me

ダウンロードしたファイルをthemeフォルダに展開し
モジュールを入れる。

yarn init
yarn add --dev laravel-mix tailwindcss alpinejs cross-env postcss-import cross-env postcss-nesting
yarn tailwindcss init
touch webpack.mix.js

ディレクトリ構成はこんな感じ

├── assets　// css、jsを格納
├── mix-manifest.json
├── node_modules
├── package.json
├── tailwind.config.js
├── theme　// underscoresをここに展開
├── webpack.mix.js
└── yarn.lock

取り急ぎcssをテストできる状況に。

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.postCss(
  './assets/css/style.css',
  './theme/style.css'
).options( {
  postCss: [
    require('postcss-import')(),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    tailwindcss('./tailwind.config.js'),
  ],
  processCssUrls: false,
});

Tailwindcss2から3になり設定が多少変わっているので
こちらを参考に修正。

tailwindcss.com

tailwind.config.js

module.exports = {
  darkMode: 'class',
  content: [
    './theme/**/*.php',
  ],
  safelist: [
    {
      pattern: /^font-/,
    },
  ],
  theme: {
    extend: {
    },
  },
  plugins: [],
}

これでCSSの生成まで完了。
次はAlpinejsを動かします。