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.config.js config file in root, customize as needed
• Removes unused Tailwind CSS classes with laravel-mix-purgecss
• PostCSS instead of Sass - fewer dependencies, faster Tailwind builds
• Basic example of @applying Tailwind CSS classes - useful for styling Markdown content
• Includes a blade.php file where you can add your own Blade extensions (documentation)

Requirements

• PHP 7
• Composer
• Node.js and NPM

Getting Started

1. Clone this repo

   git clone https://github.com/cossssmin/jigsaw-tailwindcss.git
   

2. Navigate to the folder

   cd jigsaw-tailwindcss
   

3. Install PHP dependencies

   composer install
   

4. Install JS dependencies

   npm install
   

5. Run the dev script to build the site

   npm run dev
   

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

By default, unused CSS will be purged only when running npm run production - however, this is configurable.

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 rapidly building custom user interfaces - Tailwind CSS