Install Tailwind CSS onto Laravel Spark
This brief tutorial assumes that you already have Laravel Spark up and running with the default Bootstrap 4 theme, and you're looking to add Tailwind CSS classes into the mix as a complement (not a complete replacement) for Bootstrap.
Let's get into it, then.
Before we start, confirm that you are able to successfully compile assets using npm:
npm run dev
If you see any errors, fix those and return here when you are done.
Install the laravel-mix-tailwind package using npm:
npm install laravel-mix-tailwind
Open up your
webpack.mix.js file in the root of the project directory, and add the following somewhere after 'laravel-mix' is pulled in:
And then, near the end of the file add the following statement to trigger the package:
You can also just add .tailwind() to the end of the existing function chain.
Open up the file located at
resources/assets/sass/app.scss and add:
@tailwind preflight; @tailwind components; // Custom imports go here // e.g. @import "components/buttons"; @tailwind utilities;
I will assume that you already have a basic understanding of how Tailwind works, and therefore I won't explain what we're doing above as I assume you already have some understanding of how Tailwind's preflight and utilities are loaded. If you want to refresh your memory, check the official website for more information.
Re-run the following:
npm run dev
You will likely see a message similar to this:
Additional dependencies must be installed. This will only take a moment. Tailwind has now been installed. Please ensure that your tailwind.js configuration file (node_modules/.bin/tailwind init) has been created, and then run "npm run dev" again.
Once finished, run these commands as instructed in the message:
node_modules/.bin/tailwind init npm run dev
The first command generates a default tailwind.js file in the root of your project directory. If you already have a tailwind.js file that you would like to use, you can skip the first command and simply drop in your existing file (e.g. copied from another project).
Congratulations! It's actually pretty straight-forward to implement Tailwind CSS into a Laravel Spark project.
You should be able to immediately start adding Tailwind classes to your views. Make sure you remember to run the npm watcher if you're planning to make more changes to the asset files:
npm run watch
P.S. Have you seen the Tailwind Cheat Sheet? It's awesome - check it out!