Config PostCSS to compile tailwindcss on WP Rig

Waicung -

Configuration

  • WP Rig: v2.1.0
  • tailwindcss: v2.2.7
  • node: v14.18.1
  • npm: v6.14.15

gulp-postcss

before install all the node dependency, update the version of gulp-postcss in package.json in order to support postcss 8
package.json

- "gulp-postcss": "^8.0.0",
+ "gulp-postcss": "^9.0.0",

install all the dependency as usual
npm install

postcss

install postcss ^8.0.0, required by tailwindcss

npm install -D postcss

Tailwindcss

install tailwindcss

npm install -D tailwindcss

tailwind config

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './template-parts/**/*.php',
	'./*.php'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
  ],
}

Gulp

gulp/styles.js

import { pipeline } from 'mississippi';
+ import tailwind from 'tailwindcss';

	const postcssPlugins = [
		stylelint(),
+		tailwind,

Test

Test whethere the script runs successfully
npm run dev -- styles