how to use tailwindcss with gulp? - 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

Answer 2

Greeting!
First you need to create tailwind config. in terminal:
npx tailwindcss init
it will create tailwind.config.cjs
Next you need to assign tailwind.config.cjs for tailwind plugin by passing it in argument.
In your case:
const plugins = [
px2rem({ remUnit: 75 }),
precss,
tailwindcss('./tailwind.config.cjs'),
]
Here I assume your gulpfile.js and tailwind.config.cjs are in the same folder
Next in tailwind.config.cjs point files whitch tailwind must watch like below:
module.exports = {
content: [
'./src/**/*.html',
'./src/**/*.js',
'./src/**/*.scss',
],
theme: {
extend: {},
},
plugins: [],
}
I guess I don't need to explain how you need to specify path
Then if you use livereload like a browsersync you need to set in gulp.watch your cssMobile task also for html and js if you want to see applying tailwind classes wherever just in time.
example:
function watcher() {
gulp.watch(path.watch.html, scss);
gulp.watch(path.watch.scss, scss);
gulp.watch(path.watch.js, scss);
}
Note
You don't need use gulp-autoprefixer before tailwind.
You need use pure autoprefixer by
npm i -D autoprefixer
Then
const autoprefixer = require('autoprefixer');
And then pass it to postcss plugins after tailwind:
const plugins = [
px2rem({ remUnit: 75 }),
precss,
tailwindcss('./tailwind.config.cjs'),
autoprefixer,
]
And finaly for perfect autoprefixer work you can add .browserslistrc file. I'm using the same
> 1%
ie >= 8
edge >= 15
ie_mob >= 10
ff >= 45
chrome >= 45
safari >= 7
opera >= 23
ios >= 7
android >= 4
bb >= 10
Or rather then in package.json specify:
"browserslist": [
"> 1%",
"ie >= 8",
"edge >= 15",
"ie_mob >= 10",
"ff >= 45",
"chrome >= 45",
"safari >= 7",
"opera >= 23",
"ios >= 7",
"android >= 4",
"bb >= 10"
],
I hope it was helpful