Skip to content

cossssmin/jigsaw-tailwindcss

Repository files navigation

Jigsaw + Tailwind CSS Starter Kit

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

Netlify Status

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

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