TailwindCSS + postCSS + BrowserSync + Gulp for WordPress Theme Development & Production

Dependencies

package.json

"devDependencies": {
    "autoprefixer": "^10.2.5",
    "browser-sync": "^2.26.14",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-import": "^14.0.0",
    "tailwindcss": "^2.0.4"
  }

"scripts": {
    "dev": "cross-env NODE_ENV='development' gulp dev",
    "build": "cross-env NODE_ENV='production' gulp css"
  },

Gulp Configuration

gulpfile.js

'use strict';

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
const postcssImport = require('postcss-import');
const tailwind = require('tailwindcss');

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

function processcss() {
  return gulp.src('src/css/style.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
      postcssImport,
      tailwind]))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./'))
    .pipe(browserSync.stream())
}

function serve() {
  browserSync.init({
    proxy: "sagebooks.local"
  });

  gulp.watch('src/css/**/*.css', { ignoreInitial: false }, gulp.series(processcss));

  gulp.watch('**/*.php').on('change', reload);
}

exports.default = defaultTask;
exports.dev = serve;
exports.css = processcss;

Tailwind Configuration

tailwind.config.js

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