Webpack + PostCSS + Tailwind Css Config

#1

Anyone have a project they’d be willing to share their configs that is using Webpack, PostCSS and Tailwind?

I’ve been battling with this for a few hours now to no avail. Any help would be appreciated.

2 Likes
Middleman + Webpack 4
#2

I have an example repo with Webpack right here: https://github.com/tomrutgers/middleman-webpack. No PostCSS and Tailwind obviously, but it’s a start.

1 Like
#3

I don’t have webpack, but this is my Gulp/PostCSS/Tailwind/browserSync. Using with Netlify and it’s a very nice workflow.

config.rb

# Production settings
configure :build do
  activate :external_pipeline,
        name: :gulp,
        command: "gulp production",
        source: ".tmp",
        latency: 1
end

# Development config
configure :development do
  activate :external_pipeline,
        name: :gulp,
        command: "gulp",
        source: ".tmp",
        latency: 1
end

gulpfile

const devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development');
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var tailwindcss = require('tailwindcss');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');

var jsFiles = 'source/javascripts/**/*.js',
    jsDest = devBuild? '.tmp/javascripts' : 'build/javascripts',
    cssFiles = 'source/stylesheets/**/*.css',
    cssDest = devBuild? '.tmp/stylesheets' : 'build/stylesheets',
    erbFiles = 'source/**/*.erb';

// CSS Styles
function styles(cb) {
  gulp.src('source/stylesheets/styles.css')
    // ...
    .pipe(postcss([
      // ...
      tailwindcss('tailwind.js'),
      require('autoprefixer'),
      // ...
    ]))
    // ...
    .pipe(gulp.dest(cssDest))
    .pipe(browserSync.stream());
    cb();
}

// Scripts
function scripts(cb) {
  gulp.src(jsFiles)
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest(jsDest))
    .pipe(browserSync.reload({stream: true}));

  cb();
}

// Sync
function sync(cb) {
  browserSync.init({
          proxy: "localhost:4567",
          files: ["./.tmp/**/*.{js,css}", erbFiles]
      });

      gulp.watch(cssFiles, styles);
      gulp.watch(jsFiles, scripts);
  cb();
}

exports.scripts = scripts;
exports.styles = styles;
exports.sync = sync;
exports.production = gulp.series(scripts, styles);
exports.default = gulp.series(scripts, styles, sync);
1 Like
#4

This is my config:

1 Like
#5

For anyone who finds this thread, I ended up finally just spending a day getting to know Webpack properly (I still dislike it, but at least now I know why I do) and built out a starter Middleman Website. It has Webpack 4 set up with Tailwind CSS and tree shaking via purgecss + postcss.

You can check it out here: https://github.com/richjdsmith/middleman-tailwind-webpack

4 Likes
#6

I will upgrade to webpack 4 to match your config. thanks for that improvement

2 Likes