Jigsaw + Tailwind CSS Starter Kit

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

Features

• 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.

Requirements

• PHP 7
• Composer
• Node.js and NPM

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