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.

However, nothing stops you from ripping out Bootstrap later for your application views. Laravel Spark only requires Bootstrap and Vue.js for the main Spark features, you can use an entirely different CSS and/or JavaScript framework for your own application aside from that.

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.

Step 1

Install the laravel-mix-tailwind package using npm:

npm install laravel-mix-tailwind

Step 2

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:

require('laravel-mix-tailwind');

And then, near the end of the file add the following statement to trigger the package:

mix.tailwind();

You can also just add .tailwind() to the end of the existing function chain.

Step 3

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.

Step 4

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).

You're done.

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!

Laravel Spark Tailwind CSS Utility First CSS