Tailwind CSS have the potential to terminate the painful process of coding customised CSS on top of existing framework and offering developer with simple and clear configuration for theme development.

Setup the Development Environment

TailwindCSS

npm install tailwindcss install tailwindcss
npx tailwind init initiate a config file

PostCSS

npm install -D postcss-import install postcss import module for supporting @import syntax
npm install -D gulp-postcss

gulpfile.js

'use strict';

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');

function processcss() {
  return gulp.src('src/style.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
      require('postcss-import'),
      require('tailwindcss')]))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('dist/'))
    .pipe(gulp.dest('dist/'))
    .pipe(browserSync.stream())
}

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

exports.style = processcss;