Blendid + Tailwind (postcss alt task)

[lindseybradford]

Has anyone configured Blendid to work with Tailwind? Would love to see some examples if so.

Per this thread, it'd be so helpful to get some pre-baked alternative tasks like PostCSS.

Thanks

[kferran]

I have tailwind running on a couple of projects with Blendid. You just need to adjust the stylesheet property in the task-config.js file and take advantage of the alternateTask method. Below is an example from a project I am currently working on. You'll need to adapt the paths to your setup.

[note: @olets adjusted the markdown formatting of this code. no changes were introduced]

stylesheets: {
	extensions: ['scss'],
	alternateTask: function (gulp, PATH_CONFIG, TASK_CONFIG) {
		// PostCSS task instead of Sass
		const browserSync = require('browser-sync');
		const postcss = require('gulp-postcss');
		const tailwindcss = require('tailwindcss');
		const sass = require('gulp-sass');
		const gulpif = require('gulp-if');
		const sourcemaps = require('gulp-sourcemaps');
		const colorFunction = require('postcss-color-function');

		return function () {
			const plugins = [
				tailwindcss('./../../tailwind.js'),
				require('postcss-color-function'),
				require('autoprefixer')
				// require('postcss-fontpath')
			];
			const paths = {
				src: path.resolve(process.env.INIT_CWD, PATH_CONFIG.src, PATH_CONFIG.stylesheets.src, '**/*.scss'),
				dest: path.resolve(process.env.INIT_CWD, PATH_CONFIG.dest, PATH_CONFIG.stylesheets.dest)
			};

			return gulp
				.src(paths.src)
				.pipe(gulpif(!global.production, sourcemaps.init()))
				.pipe(sass())

				.pipe(postcss(plugins))
				.pipe(gulpif(!global.production, sourcemaps.write()))
				.pipe(gulp.dest(paths.dest))
				.pipe(browserSync.stream());
		};
	}
},

[apmarshall]

An important addition that took me a few rounds of debugging to figure out: you need to also require 'path' in the constants declarations at the top as follows:

const path = require('path');

[mzlock]

Adding my task-config.js set-up for Tailwind as well, in case it's helpful:

var browserSync = require('browser-sync')
var cssnano = require('cssnano')
var easyImport = require('postcss-easy-import')
var gulpif = require('gulp-if')
var mixins = require('postcss-mixins')
var nesting = require('postcss-nesting')
var path = require('path')
var postcss = require('gulp-postcss')
var reporter = require('postcss-reporter')
var sourcemaps = require('gulp-sourcemaps')
var units = require('postcss-units')
var presetEnv = require('postcss-preset-env')
var tailwindcss = require('tailwindcss')

module.exports = {
  html        : false,
  images      : true,
  fonts       : true,
  static      : false,
  svgSprite   : true,
  ghPages     : false,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ["./app.js"]
    },
    publicPath: './path/to/javascripts'
  },

  stylesheets: {
    alternateTask: function(gulp, PATH_CONFIG, TASK_CONFIG) {
      // PostCSS
      return function() {
        const paths = {
          src: path.resolve(process.env.PWD, PATH_CONFIG.src, PATH_CONFIG.stylesheets.src, '*.css'),
          dest: path.resolve(process.env.PWD, PATH_CONFIG.dest, PATH_CONFIG.stylesheets.dest)
        }

        const cssnanoConfig = TASK_CONFIG.stylesheets.cssnano || {}
        cssnanoConfig.autoprefixer = false // this should always be false, since we're autoprefixing separately

        const plugins = [
          easyImport(),
          mixins(),
          units(), // provides em() and rem() functions
          nesting(), // use a more update version of postcss-nesting
          presetEnv(),
          tailwindcss('../path/to/tailwind.js'),
          reporter({clearReportedMessages: true})
        ]

        if (global.production) {
          plugins.push(cssnano(cssnanoConfig))
        }

        return gulp.src(paths.src)
          .pipe(gulpif(!global.production, sourcemaps.init()))
          .pipe(postcss(plugins))
          .pipe(gulpif(!global.production, sourcemaps.write()))
          .pipe(gulp.dest(paths.dest))
          .pipe(browserSync.stream())
      }
    }
  },

  browserSync: {
    proxy: {
      target: 'site.test'
    },
    files: [
      "./path/to/files"
    ]
  },

  production: {
    rev: true
  }
}

[estebancastro]

Any help adding PurgeCSS to remove unused tailwind styles?

[olets]

@estebancastro check out A Better Approach for Using Purgecss with Tailwind from Viget!