-
-
Save BaronVonPerko/27cd6d5b8c25f4ceb3b04313f56ca75e to your computer and use it in GitHub Desktop.
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"
}
}```
@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.