Getting Started with TailWindCSS on Laravel

In this short tutorial, I will go over on how you can install TailWindCSS on Laravel project.

TailWindCSS is a utility-first based CSS framework, and is gaining a lot of popularity because of its ease of use and customer satisfaction.

Although you can install tailwind on any of your Laravel Project (old or new). For the demonstration purpose, Let’s install a fresh Laravel project and then we will install TailWindCSS on it

Step 1: Fresh Laravel Installation

I created a new laravel application on my machine named LaravelTailWind with following command

laravel new LaravelTailWind

This command will create a new Laravel project on my machine with the basic laravel directory structure.

Next Up, We will start with the TailWindCSS installation, Import the project in your editor / IDE.

Step 2: Install TailWind via NPM

We will install TailWind via node package manager

To run the npm command make sure you have node installed on your machine. To check if it is installed go to your terminal / command-line and run comand node -v, If this gives you the version number of node installed on your machine, you are good to go. If not then first you have to install node.

Open Terminal / Command-line and navigate to the project root directory and run the following command.

npm install tailwindcss

This will fetch the required dependencies and will install tailwindcss on your project. You should see a new folder named tailwindcss inside node_modules folder in your project.

Step 3: Add TailWind to CSS

Now, we are ready to use tailwind css in your project. By default Laravel project comes installed with Bootstrap as a default front-end framework. Since we are going to use tailwind css we will remove the bootstrap imports and replace them with tailwindcss.

Open file app.scss which is located under folder resources > sass.

Remove the following import from the file

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

Replace the content with the following imports

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 4: Create your Tailwind config file

Next up, we need to generate a tailwind config file, This fill will be used by laravel mix (webpack) while converting the scss file into css.

Run the following command to generate the config file.

npx tailwind init

This command will generate tailwind.config.js file in your project root directory.

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Step 5: Include Tailwind in Laravel Mix Build Process

Next up, we need to tell Laravel Mix (which internally uses webpack) to compile tailwind sass using the tailwind configuration file.

Open the webpack.mix.js file and make the following changes.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js');
    
const tailwindcss = require('tailwindcss')

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

Step 6: Run NPM

We are now ready to run the npm build process, run the following command in your terminal / command-line

npm install
npm run dev

This will compile you tailwindcss code and will put them into app.css file located in public / css directory.

That’s all about the installation.

Step 6: Test

Let’s test if we can use the tailwindcss utility classes in your project.

You can import the compiled css file in your view file, put it in welcome.blade.php for testing

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

And I posted this code to test tailwind utility based css framework.

<div class="md:flex container border p-4">
                    <div class="md:flex-shrink-0">
                        <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
                    </div>
                    <div class="mt-4 md:mt-0 md:ml-6">
                        <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
                        <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
                        <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
                    </div>
                </div>

There you go, Here is what I get as the output on screen.

Have fun working with TailWindCSS on laravel.

GitHub Repo of Laravel Project with TailWindCSS Installed: https://github.com/tushargugnani/laraveltailwind