How to Setup TailwindCSS in Laravel: A Quick Tutorial Guide

Ready to ride the tailwind? Let’s do it!

This guide will show you how to setup TailwindCSS in your Laravel project. It assumes you are using Laravel 8 and Laravel mix to bundle your front-end assets.

Step 1: Install Tailwind via NPM

In your Laravel project, run the following command:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Step 2: Initialize Tailwind

Next, you’ll want to initialize tailwind. This step will create a tailwind.config.js file in your project.

npx tailwindcss init

Check out TailwindCSS documentation for available configurations here.

Step 3: Set up Laravel Mix

This step is purely my opinion, but I prefer to use SCSS instead of CSS in my /resources folder. So, for this step we’ll make sure we have a file at /resources/scss/app.scss

Assuming the above, this is how we want to set up our webpack.mix.js file

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [
          tailwindcss('./tailwind.config.js'),
        ]
    });

Step 4: Import TailwindCSS in your SCSS file

Next, lets make sure your /resources/scss/app.scss includes this at the top:

// /resources/scss/app.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Step 5: Profit

Alright, let’s run npm run dev and we should see a successful result like this:

Note: Make sure you’re already outputting the bundled assets in your blade template somewhere:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Ride the Tailwind 😎

This is a really quick primer on setting up Tailwind that should get you up and running. Of course, for more information visit the TailwindCSS Documentation, and for inspiration, check out tons of free components at Tailwind Components.

Follow me on twitter @ChrisArter for more tips!