jigsaw-tailwind.md

Setting up a Jigsaw project to use Tailwind

tailwind.js ./node_modules/.bin/tailwind init

webpack.mix.js

let mix = require('laravel-mix');
let tailwind = require('tailwindcss');
let build = require('./tasks/build.js');

mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');
mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
    ]
});

mix.js('source/_assets/js/main.js', 'js')
    .sass('source/_assets/sass/main.scss', 'css/main.css')
    .options({
        processCssUrls: false,
        postCss: [
            tailwind('tailwind.js'),
        ]
    }).version();

package.json

{
    "private": true,
    "scripts": {
        "local": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
        "staging": "cross-env NODE_ENV=staging node_modules/webpack/bin/webpack.js --progress --hide-modules --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
        "dev": "npm run local",
        "watch": "npm run local -- --watch",
        "deploy": "npm run production && git add . && git commit -m 'Build for production' && git push origin master && git subtree push --prefix build_production origin production"
    },
    "devDependencies": {
        "browser-sync": "^2.23.6",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^3.2.3",
        "hasbin": "^1.2.3",
        "laravel-mix": "^2.0.0",
        "node-cmd": "^3.0.0",
        "on-build-webpack": "^0.1.0",
        "tailwindcss": "^0.6.1",
        "webpack-watch": "^0.2.0",
        "yargs": "^4.6.0"
    }
}

source/_assets/sass/main.scss

@tailwind preflight;

@tailwind components;

@import "custom";

@tailwind utilities;

source/_assets/sass/custom.scss

.content {
  a {
    @apply .text-blue .no-underline;

    &:hover {
      @apply .text-blue-darker;
    }
  }
}