Getting Tailwind CSS into Jigsaw

This site is powered by the static site generator Jigsaw, and uses the Tailwind CSS utility-first framework.

Getting Tailwind CSS into Jigsaw is pretty easy if you're already familiar with using various CSS processing tools, along with Laravel Mix and webpack. If, like me, you're only just starting to use these tools, hopefully this will help you.

Prequisites

Assuming you've already got a site using Jigsaw, you'll first need to add a few node packages:

yarn add tailwindcss laravel-mix-purgecss postcss-import --dev

The postcss-import package lets you use @import statements in CSS, while the laravel-mix-purgecss package provides a Mix plugin which removes any unused CSS classes to reduce the payload to browsers. Tailwind CSS generates a very large stylesheet to save you having to write it for yourself, but you are likely only going to use a small subset of all that.

CSS

As I was just starting fresh with my new site, I simply placed this into source\_assets\css\main.css:

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@import  "tailwindcss/preflight";

/**
 * This injects any component classes registered by plugins.
 */
@import  "tailwindcss/components";

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import  "components/buttons";
 * @import  "components/forms";
 */

@import  "components/markdown";

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
@import  "tailwindcss/utilities";

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import  "utilities/background-patterns";
 * @import  "utilities/skew-transforms";
 */

components/markdown

I also introduced a source/_assets/css/components/markdown.css file to let me style the HTML generated by the markdown I use to write my blog posts.

/**
 * define markdown styling using tailwind utility classes
 */
.markdown h1 {
  @apply  mb-4;
}

.markdown p {
  @apply  mb-4 leading-normal;
}

Mix

Lastly, I updated the script in webpack.mix.js:

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

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.options({
    processCssUrls: false,
    postCss: [
        require('postcss-import'),
        tailwind('tailwind.js'),
    ]
})
    .postCss('source/_assets/css/main.css', 'css/main.css')
    .js('source/_assets/js/main.js', 'js')
    .purgeCss({
        folders: ['source'],
    })
    .version();

Links and references

The Mix/Webpack script was sourced from hellocosmin/jigsaw-tailwindcss