Hello Laravel Friends,

Tailwind CSS is a popular utility-first CSS framework that can help you quickly build stylish and responsive web applications. If you’re working on a Laravel 8 project and want to integrate Tailwind CSS into it, you’ve come to the right place.

In this tutorial, we’ll walk you through the step-by-step process of installing and setting up Tailwind CSS in your Laravel 8 project.

Steps to Install Tailwind CSS in Laravel 8:

Step 1: Create a New Laravel Project

Use the below command to create a new Laravel project

Step 2: Go to Your Project Directory

Change your working directory to your Laravel project folder using the below command.

Step 3: Install Tailwind CSS

You can install Tailwind CSS using npm. Run the following command to install Tailwind CSS and its dependencies:

Step 4: Create a Tailwind CSS Configuration File

Laravel Mix simplifies the process of compiling CSS and JavaScript. To configure Tailwind CSS with Laravel Mix, you need to create a Tailwind CSS configuration file and a Laravel Mix configuration file.

Generate a tailwind.config.js file using the following command:

This will create a basic configuration file in your project root.

Step 5: Install Laravel Mix Dependencies

If you haven’t already installed Laravel Mix and its dependencies, you can do so with npm:

Step 6: Configure Laravel Mix

Next, open the webpack.mix.js file in your Laravel project’s root directory. Add the following code to configure Laravel Mix to process Tailwind CSS:

Make sure the paths match your project’s file structure if they are different.

Step 7: Compile Assets

Now, you can compile your assets by running the following command:

This will compile your CSS and JavaScript files and place them in the public directory.

Step 8: Include Compiled CSS in Your Blade Views

Finally, include the compiled CSS in your Blade views. Open the resources/views/layouts/app.blade.php file and add the following line inside the <head> section:

This will include the compiled Tailwind CSS in your Laravel project.

Step 9: Run Your Laravel Development Server

Start your Laravel development server to see the changes:

Your Laravel project with Tailwind CSS should now be up and running. You can start building your user interfaces using Tailwind CSS classes.


Congratulations! You’ve integrated Tailwind CSS into your Laravel 8 project. You can now leverage its powerful utility classes to design beautiful and responsive web applications with ease.

Hire Laravel Developer who can help you install Tailwind CSS in your Laravel 8 Project.

Happy Coding!

Click to rate this post!
[Total: 0 Average: 0]