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

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

  1. Clone cossssmin's repo into your own folder.

    git clone https://github.com/cossssmin/jigsaw-tailwindcss.git my-new-folder
  2. Navigate to the new folder.

    cd my-new-folder
  3. Install PHP dependencies.

    composer install
  4. Install JS dependencies.

    npm install
  5. Run the dev script to build the site.

    npm run dev
  6. Install Alpine JS.

    npm i alpinejs
  7. Create source/_assets/js/main.js then open and paste in the following.

    import 'alpinejs';
  8. Open source/_layouts/master.blade.php and add the following just before the closing </body> tag.

    <script src="{{ mix('/js/main.js') }}"></script>
  9. Run the dev script to build the site.

    npm run dev
  10. 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!