jigsaw
May 4 2020

Install Jigsaw + TailwindCSS + AlpineJS

A quick guide to setting up a clean version of Jigsaw, Tailwind CSS, PurgeCSS and Alpine JS.

Here are the steps to get a clean install of Jigsaw with TailwindCSS and AlpineJS added as dependencies.

This tutorial gets you set up with the following:

This article was updated on June 24, 2020 with a simpler approach.

  1. Make a new local directory for your site. In this example, we'll use my-project.
mkdir my-project
  1. Navigate to the new folder.
cd my-project
  1. Pull in the Jigsaw package.
composer require tightenco/jigsaw
  1. Initialize it.
./vendor/bin/jigsaw init
  1. Run the install script.
npm install
  1. Install TailwindCSS.
npm install tailwindcss
  1. Install Alpine JS.
npm install alpinejs
  1. Install TailwindCSS UI components.
npm install @tailwindcss/ui
  1. Generate the tailwind.config.js file.
npx tailwindcss init
  1. Run install for good measure.
npm install
  1. Open tailwind.config.js and replace the contents with the following:
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
 plugins: [
   require('@tailwindcss/ui'),
 ],
 purge: [
   './source/**/*.html',
   './source/**/*.vue',
   './source/**/*.jsx',
   './source/**/*.php',
   './source/**/*.blade.php',
 ],
 theme: {
   extend: {
     fontFamily: {
       sans: ['Inter var', ...defaultTheme.fontFamily.sans],
     },
   },
 },
 variants: {},
}
  1. Open webpack.mix.js and replace the contents with the following:
const mix = require('laravel-mix');
require('laravel-mix-jigsaw');
const tailwindcss = require('tailwindcss')

mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');

mix.jigsaw()
   .js('source/_assets/js/main.js', 'js')
   .options({
       processCssUrls: false,
       postCss: [
           tailwindcss('tailwind.config.js'),
       ]
   })
   .sass('source/_assets/sass/main.scss', 'css')
   .version();
  1. Open source/_assets/sass/main.scss and paste in the following:
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
  1. Open source/_assets/js/main.js and paste in the following:
import 'alpinejs';
  1. Open source/_layouts/master.blade.php and add the following code inside your <head></head> tags:
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  1. Open source/_layouts/master.blade.php and add the following code just before the closing </body> tag:
<script src="{{ mix('js/main.js', 'assets/build') }}"></script>
  1. Lastly, return to the command line and run:
npm run watch

Happy Jigsawing!