Gulpfile for SCSS and Tailwind

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');

gulp.task('style', function () {
    var tailwindcss = require('tailwindcss');

    return gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            tailwindcss('./tailwind.js'),
            require('autoprefixer'),
        ]))
        .pipe(gulp.dest('./'));
});

//Watch task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['style']);
});

@stevenuba I'm glad you enjoyed that series! A lot has changed in tailwind since the official release. I've thought about re-recording it.

that would be awesome!! I am waiting for it!! :)

@stevenuba I'm glad you enjoyed that series! A lot has changed in tailwind since the official release. I've thought about re-recording it.

that would be awesome!! I am waiting for it!! :)

I am using it with the new Tailwind but I dont get any problems so far?? I am building everything from scratch now. What could be the problem?

Hi, if you guys are still facing problem you can try my gist here

const concat = require('gulp-concat');
const gulp = require('gulp');
const gulpless = require('gulp-less');
const gulpautoprefixer = require('gulp-autoprefixer');

gulp.task('css', function () {
  const postcss = require('gulp-postcss');
  const cleanCSS = require('gulp-clean-css');

  return gulp
    .src('./src/public/stylesheets/theme/*/*.less')
    .pipe(postcss([require('tailwindcss'), require('autoprefixer')]))

    .pipe(gulpless())
    .pipe(gulpautoprefixer())

    .pipe(cleanCSS({ level: 2 }))
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./src/public/stylesheets/theme/'));
});

I have an error the css file comes without tailwind only the others are caught, can you help me?

In "tailwindcss": "^2.0.1" version, something about the postcss seems to have changed and yes this works for me.

const gulp = require("gulp"), postcss = require("gulp-postcss");

const tailwindcss = require("tailwindcss"), autoprefixer = require("autoprefixer");

exports.default = () => gulp.src("assets/css/main.css")
    .pipe(postcss([require("postcss")(tailwindcss()), autoprefixer()]))
    .pipe(gulp.dest("assets/css/dist"));

Just to sum it all up, the resulting gulpfile.js is the following:

const gulp = require('gulp');
const postcss = require("postcss");
const sass = require('gulp-sass')(require('sass'));
const gulp_postcss = require('gulp-postcss');
const tailwindcss = require('tailwindcss');
const autoprefixer = require("autoprefixer");

const $sass_files = './*.scss'; // 'sass/**/*.scss';
const $tailwind_config = './tailwind.config.js';
const $dest_folder = 'css';

gulp.task('style', function () {
    return gulp.src($sass_files)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp_postcss([
            tailwindcss($tailwind_config),
            autoprefixer()
        ]))
        .pipe(gulp_postcss([postcss(tailwindcss()), autoprefixer()]))
        .pipe(gulp.dest($dest_folder));
});

//Watch task
gulp.task('default', function() {
    gulp.watch($sass_files, gulp.series('style'));
});

Also, the package.json that worked for me is something similiar to the following:

    "name": "Gulp-sassy-tail",
    "scripts": {
        "sassy": "gulp",
        // ...
    },
    "dependencies": {
        "autoprefixer": "10.4.15",
        "gulp-cli": "^2.3.0",
        "gulp-postcss": "^9.0.1",
        "postcss": "8.4.28",
        "tailwindcss": "3.3.3"
    },
    "devDependencies": {
        "gulp": "^4.0.2",
        "gulp-sass": "^5.1.0",
        "sass": "^1.66.1"
    },
    "overrides": {
        "glob-parent": "6.0.2"
    }
}```