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: [
   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!

Last updated on April 2021