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.
Make a new local directory for your site. In this example, we'll use
my-project
.
mkdir my-project
Navigate to the new folder.
cd my-project
Pull in the Jigsaw package.
composer require tightenco/jigsaw
Initialize it.
./vendor/bin/jigsaw init
Run the install script.
npm install
Install TailwindCSS.
npm install tailwindcss
Install Alpine JS.
npm install alpinejs
Install TailwindCSS UI components.
npm install @tailwindcss/ui
Generate the tailwind.config.js file.
npx tailwindcss init
Run install for good measure.
npm install
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: {},
}
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();
Open source/_assets/sass/main.scss and paste in the following:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Open source/_assets/js/main.js and paste in the following:
import 'alpinejs';
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">
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>
Lastly, return to the command line and run:
npm run watch
Happy Jigsawing!
Last updated on April 2021