how to use tailwindcss with gulp?

Question

i tryed use tailwindcss with gulp,this is my gulpfile.js file，but it didn't work...

const gulp = require('gulp')
const browserSync = require('browser-sync')
const postcss = require('gulp-postcss')
const less = require('gulp-less')
const px2rem = require('postcss-px2rem')
const autoprefixer = require('gulp-autoprefixer')
const cssnano = require('gulp-cssnano')
const rename = require('gulp-rename')
const precss = require('precss')
const tailwindcss = require('tailwindcss')

gulp.task('cssMobile', function() {
  const plugins = [
    px2rem({ remUnit: 75 }),
    precss,
    tailwindcss,
  ]
  return gulp.src(cssMobileCompilePath)
             .pipe(less())
             .pipe(postcss(plugins, {}))
             .pipe(cssnano())
             .pipe(autoprefixer())
             .pipe(rename({ extname: '.min.css' }))
             .pipe(gulp.dest(`${basePath}/mobile`))
             .pipe(browserSync.reload({ stream: true }))
})

and i tryed put this code in my *.less root.

@tailwind base;
@tailwind components;
@tailwind utilities;

when i was run gulp, tailwindcss is didn't packed in my css files.

Answer 1

Maybe you can reference gulp-with-tailwindcss