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

Use Tailwind CSS with the Jigsaw static site generator.
https://github.com/cossssmin/jigsaw-tailwindcss

blade jigsaw laravel-mix php postcss purgecss static-site-generator tailwind-css

Last synced: 3 months ago
JSON representation

Use Tailwind CSS with the Jigsaw static site generator.

• Host: GitHub
• URL: https://github.com/cossssmin/jigsaw-tailwindcss
• Owner: cossssmin
• License: mit
• Created: 2018-03-29T08:26:35.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-11T11:45:22.000Z (over 4 years ago)
• Last Synced: 2024-10-13T12:07:35.262Z (3 months ago)
• Topics: blade, jigsaw, laravel-mix, php, postcss, purgecss, static-site-generator, tailwind-css
• Language: CSS
• Homepage: https://jigsaw-tailwindcss.netlify.app
• Size: 1.43 MB
• Stars: 59
• Watchers: 2
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Jigsaw + Tailwind CSS Starter Kit

A starter kit for using the [Jigsaw static site generator](http://jigsaw.tighten.co/) with [Tailwind CSS](https://tailwindcss.com/).

[![Netlify Status](https://api.netlify.com/api/v1/badges/573deda7-3b57-4e11-aab4-e2e87f9cddce/deploy-status)](https://app.netlify.com/sites/jigsaw-tailwindcss/deploys)

## 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](https://github.com/spatie/laravel-mix-purgecss)

- PostCSS instead of Sass - fewer dependencies, faster Tailwind builds

- Basic example of `@apply`ing Tailwind CSS classes - useful for styling Markdown content

- Includes a `blade.php` file where you can add your own Blade extensions ([documentation](https://jigsaw.tighten.co/docs/content-blade/#extending-blade-with-custom-directives))

## Requirements

- PHP 7

- [Composer](https://getcomposer.org/)

- [Node.js](https://nodejs.org) and NPM

## Getting Started

1. Clone this repo

    ```sh

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

    ```

2. Navigate to the folder

    ```sh

    cd jigsaw-tailwindcss

    ```

3. Install PHP dependencies

    ```sh

    composer install

    ```

4. Install JS dependencies

    ```sh

    npm install

    ```

5. Run the dev script to build the site

    ```sh

    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](https://github.com/spatie/laravel-mix-purgecss#usage).

## What is Jigsaw?

> A framework for rapidly building static sites using the same modern tooling that powers your web applications. - [Jigsaw](http://jigsaw.tighten.co/)

## What is Tailwind CSS?

> A utility-first CSS framework for rapidly building custom user interfaces - [Tailwind CSS](https://tailwindcss.com/)