Not working with TailwindCSS >=3.0

[connermurphy]

Hey,

I'm unsure if this issue sits with gulp-postcss or tailwind, so I'm trying both options.

My set-up worked perfect for Tailwind 2.0.1, and as soon as I updated to Tailwind 3.0.0 it breaks.

Error: ENOENT: no such file or directory, stat '/Users/conner/Documents/Projects/test/src/scss/style.min.css

errno: -4058
syscall: stat
code: ENOENT

return src("src/scss/*.scss")
        .pipe(gulpSass())
        .pipe(
            postcss([
                tailwindcss("./tailwind.config.js"),
                autoprefixer()
            ])
        )
        .pipe(dest("css/"))

Thanks,
Conner.

[connermurphy]

Managed to figure it out.

I removed the gulpSass() function from the pipeline and instead allowed postcss to convert the sass -> css and perform any other plugin operations on the scss. Unsure if it helped, but I re-located the postcss plugins to a separate postcss.config.js file as well. It seems that gulp-postcss with gulp-sass and the TailwindCSS JIT Compiler don't go hand-in-hand anymore.

New code:

return src("src/scss/*.scss")        
        .pipe(postcss())
        .pipe(rename("style.min.css"))
        .pipe(dest("css/"))

module.exports = {
    plugins : {                
        'postcss-import' : {
            path : "./src/scss/"
        },
        tailwindcss : {},
        autoprefixer : {},
        'postcss-minify' : {}
    }
}

gulp - v4.0.2
gulp-postcss - v9.0.1
postcss - v8.4.5
postcss-import - v14.0.2

I hope this helps some people :)