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 also includes PurgeCSS set up.

This tutorial relies on cossssmin's starter kit which provides a great starting point!

Clone cossssmin's repo into your own folder.

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

Navigate to the new folder.
```
cd my-new-folder
```
Install PHP dependencies.
```
composer install
```
Install JS dependencies.
```
npm install
```
Run the dev script to build the site.
```
npm run dev
```
Install Alpine JS.
```
npm i alpinejs
```
Create source/_assets/js/main.js then open and paste in the following.
```
import 'alpinejs';
```
Open source/_layouts/master.blade.php and add the following just before the closing </body> tag.
```
<script src="{{ mix('/js/main.js') }}"></script>
```
Run the dev script to build the site.
```
npm run dev
```
Finally, one little gotcha (at least for me), is when you go to commit your new files up to GitHub, instead of doing a git remote add origin you will instead need to change that command to the following:

git remote set-url origin https://github.com/UserName/my-new-folder.git https://github.com/cossssmin/jigsaw-tailwindcss.git

I did the following to get my files added to Github:

$ git init
$ git add .
$ git commit -m "First commit"
$ git remote set-url origin https://github.com/UserName/my-new-folder.git https://github.com/cossssmin/jigsaw-tailwindcss.git
$ git remote -v
$ git push -u origin master

Happy Jigsawing!