Use Tailwind CSS with the Jigsaw static site generator
Switch branches/tags
Nothing to show
Clone or download
hellocosmin Watch all files in _assets, but not those in assets.
Need to be explicit re the latter, otherwise it goes into a build loop.
Latest commit afd70f2 Nov 15, 2018

Jigsaw + Tailwind CSS Starter Kit

A starter kit for using the Jigsaw static site generator with Tailwind CSS.


  • Webpack + Laravel Mix build system
  • tailwind.js config file in root, customize as needed
  • Uses mix() to fetch the CSS asset path and apply versioning
  • Removes unused Tailwind CSS classes with laravel-mix-purgecss (production build only)
  • Basic example of @applying Tailwind CSS classes. Useful when you write in Markdown and have no control over markup.


Getting Started

  1. Clone this repo

  2. Navigate to the folder

    cd jigsaw-tailwindcss
  3. Install JS dependencies

    npm install
  4. Install PHP dependencies

    composer install
  5. Run the dev script to build the site

    npm run dev

To use Browsersync, run the watch script instead: npm run watch

Note: as mentioned, unused CSS will be removed only when you build for production: npm run production

What is Jigsaw?

A framework for rapidly building static sites using the same modern tooling that powers your web applications. - Jigsaw

What is Tailwind CSS?

A Utility-First CSS Framework for Rapid UI Development - Tailwind CSS