Jigsaw May 4 2020

Install Jigsaw + TailwindCSS + AlpineJS

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: [
 purge: [
 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');
const tailwindcss = require('tailwindcss')


   .js('source/_assets/js/main.js', 'js')
       processCssUrls: false,
       postCss: [
   .sass('source/_assets/sass/main.scss', 'css')
  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!

Last updated on April 2021