Has anyone got Tailwind V4 to work with Gulp?

[cannon303]

Hi I use gulp to run tasks while I develop my websites. Everything has worked out fine using Tailwind v3 but now I cannot get it to work with v4 at all. I'm sure it's possible there is a better way to do it instead of what I have below so any alternative suggestions would be great.

The gulp tasks creates a sitestyles.css as well as a minified version sitestyles.min.css. It also does a similar job with JS scripts. It also watches for changes and refreshes the browser.

I need that functionality again but I am all out of options to recreate it with Tailwind V4.

Here is my gulpfile that works with v3:

const { watch, series, src, dest } = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require("gulp-postcss");
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
const cache = require('gulp-cache');

function cssTask(cb) {

    return src("./src/styles/sitestyles.css")

        .pipe(postcss())

        .pipe(dest("./dist/assets/css/"))

        .pipe(cleanCSS())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest("./dist/assets/css/"))


        .pipe(browserSync.reload({stream: true}));

    cb();
}

function clearCache(cb) {

    return src('./dist/assets/css/*.css')
        .pipe(cache.clear());
    cb();
}


function ugly(cb){
    return src('./src/scripts/*.js')
        .pipe(uglify())
        .pipe(dest('./dist/assets/js'))
        .pipe(browserSync.reload({stream: true}));
    cb();
}


function browsersyncServe(cb) {
    browserSync.init({
        injectChanges: true,
        baseDir: "./dist",
        proxy: 'https://mysite.dev:8890',
        reloadOnRestart: true
    });
    cb();
}

function browsersyncReload(cb) {
    browserSync.reload();
    cb();
}

function watchTask() {

    watch(["./src/styles/*.css"], series(clearCache, cssTask, browsersyncReload));
    watch(["./src/scripts/*.js"], series(clearCache, ugly, cssTask, browsersyncReload));
    watch(["./dist/**/*.php"], series(clearCache, cssTask, ugly, browsersyncReload));
    watch(["./tailwind.config.js"], series(clearCache, cssTask, ugly, browsersyncReload));

}

exports.default = series(clearCache, cssTask, ugly, browsersyncServe, watchTask);
exports.css = cssTask;
exports.js = ugly;

This is the closest thing I've got to work with v4. I don't get any errors and at some point I think I got it to write a few grid classes but not much else. Basically the problem is the classes that I write in the HTML just aren't getting added to the stylesheet.

const { watch, series, src, dest } = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require("gulp-postcss");
const cache = require('gulp-cache');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cleanCSS = require('gulp-clean-css');
const tailwind = require('tailwind')
function browsersyncServe(cb) {
    browserSync.init({
        injectChanges: true,
        baseDir: "./dist",
        proxy: 'https://mysite.dev:8890',
        reloadOnRestart: true
    });
    cb();
}


function browsersyncReload(cb) {
    browserSync.reload();
    cb();
}

async function cssTask(cb) {



    return src("./src/styles/sitestyles.css")

        .pipe(postcss(tailwind))

        .pipe(cleanCSS())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest("./dist/assets/css/"))

        .pipe(browserSync.reload({stream: true}));

    cb();
}

function ugly(cb){
    return src('./src/scripts/*.js')
        .pipe(uglify())
        .pipe(dest('./dist/assets/js'))
        .pipe(browserSync.reload({stream: true}));
    cb();
}
function clearCache(cb) {
    
    return src('./dist/assets/css/*.css')
        .pipe(cache.clear());
    cb();
}

function watchTask() {

    watch(["./src/styles/*.css"], series(clearCache, cssTask, browsersyncReload));
    watch(["./src/scripts/*.js"], series(clearCache, ugly, cssTask, browsersyncReload));
    watch(["./dist/**/*.php"], series(clearCache, cssTask, ugly, browsersyncReload));


}

exports.default = series(clearCache, cssTask, ugly, browsersyncServe, watchTask);
exports.css = cssTask;
exports.js = ugly;

Any suggestions would be really helpful as otherwise I will have to go back to v3 and use that at least until some working examples crop up in various forums.

[wongjn]

What about the current setup doesn't work? Could you provide a reproducible example git repo please?

[cannon303]

try now

[cannon303]

sorry not very good with the whole repository thing either I'm afraid.

[cannon303]

As far as I can tell, I've uploaded everything apart from the node_modules but if anything is missing let me know. Thankyou.

[wongjn]

• Add a .gitignore file with the content:

  /node_modules
  

  This will make Tailwind not scan the node_modules folder, which is what we want since it does not contain any template code for the project. See the documentation for details.
• Update the PostCSS plugins to only be @tailwindcss/postcss:

   module.exports = {
     plugins: [
  -        require('tailwindcss/nesting'),
  -        require("tailwindcss"),
  -        require('tailwindcss'),
  -        require('autoprefixer'),
  +        require("@tailwindcss/postcss"),
     ],
   };

  This follows the PostCSS integration guide.
• Remove require() of tailwind in gulpfile.js:

  @@ -5,7 +5,6 @@ const cache = require('gulp-cache');
   const uglify = require('gulp-uglify');
   const rename = require('gulp-rename');
   const cleanCSS = require('gulp-clean-css');
  -const tailwind = require('tailwind')
   const autoprefixer = require('autoprefixer')
   function browsersyncServe(cb) {
     browserSync.init({
  @@ -29,7 +28,7 @@ async function cssTask(cb) {
  
     return src("./src/styles/sitestyles.css")
  
  -        .pipe(postcss(tailwind))
  +        .pipe(postcss())
           .pipe(dest("./public_html/assets/css/"))
  
           .pipe(cleanCSS())

  tailwind is a completely different package to tailwindcss. You'll want to be careful of this mistake in the future. You could be susceptible to supply chain attacks whereby you mistakenly install a wrong package because of a spelling/typo error. The wrong package could then contain malware. Lukily, tailwind in this case seems benign.
• Clean up node packages that you don't need:

  $ npm uninstall tailwind autoprefixer

Other notes:

• I had to change the dev task for it to work:

  @@ -4,7 +4,7 @@
     "description": "",
     "main": "index.js",
     "scripts": {
  -    "dev": "../node_modules/.bin/gulp",
  +    "dev": "npx gulp",
     "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",

  Not sure how your node_modules is ending up a directory above. Normally node_modules is in the root of the project.

[cannon303]

Yes sorry about the node_modules. I had to duplicate the files into a separate folder to upload them but my ide stepped in and refactored that and I hadn’t spotted it.

[cannon303]

Thanks that almost works. I seem to be having a cache problem and I think I had it in v3x as I was using gulp-cache to fix it and still using it in my gulp file for v4. I've removed it and added it back in but either way it doesn't fix the problem. I have to clear my cache every time I want to see the css changes I make. That's all I need to fix and then I think it will work. If you have any pointers on that then please let me know. Many thanks.

[wongjn]

I'd consider removing caching from the Tailwind build system.

[cannon303]

Yes i have but still the cache problem occurs. Also the minified css file isn't updating at all.