---
title: "How to Install Tailwind CSS in a Laravel 8 Project?"
url: "https://magecomp.com/blog/install-tailwind-css-in-laravel-8/"
date: "2023-10-04T17:45:36+00:00"
modified: "2025-01-06T08:46:55+00:00"
author:
  name: "Gaurav Jain"
  url: "https://magecomp.com/"
categories:
  - "Laravel"
word_count: 477
reading_time: "3 min read"
summary: "Hello Laravel Friends,"
description: "Install Tailwind CSS in your Laravel 8 project to use its utility classes to style your HTML elements as needed. Learn more"
keywords: "Laravel"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Change Password with Current Password in Laravel 8?"
    url: "https://magecomp.com/blog/change-password-with-current-password-laravel-8/"
  - title: "Laravel DDD: Implementing Domain-Driven Design Principles"
    url: "https://magecomp.com/blog/laravel-ddd-domain-driven-design-principles/"
  - title: "Laravel 10: Custom User Registration & Login Tutorial"
    url: "https://magecomp.com/blog/laravel-10-custom-user-registration-login/"
---

# How to Install Tailwind CSS in a Laravel 8 Project?

_Published: October 4, 2023_  
_Author: Gaurav Jain_  

![How to Install Tailwind CSS in a Laravel 8 Project](https://magecomp.com/blog/wp-content/uploads/2023/10/How-to-Install-Tailwind-CSS-in-a-Laravel-8-Project-1024x512.webp)

**Hello Laravel Friends,**

Tailwind CSS is a popular utility first CSS framework – it is easy and fast to get started building beautiful, responsive web apps with it. If you’re developing a Laravel 8 project and want to include Tailwind CSS to it, you’re at the right place.
[![Laravel Development Services](https://magecomp.com/blog/wp-content/uploads/2024/12/Laravel-Development-Services-4.webp)](https://magecomp.com/services/laravel-development-services/)

In this tutorial, I will walk you through step by step process of installing and set up Tailwind CSS on 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
```
composer create-project laravel/laravel:^8.0  project-name
```

### Step 2: Go to Your Project Directory
Change your working directory to your Laravel project folder using the below command.
```
cd project-name
```

### Step 3: Install Tailwind CSS
You can install Tailwind CSS using npm. Run the following command to install Tailwind CSS and its dependencies:
```
npm install tailwindcss
```

### 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:
```
npx tailwindcss init
```

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:
```
npm install laravel-mix cross-env --save-dev
```

### [![Hire laravel Developer](https://magecomp.com/blog/wp-content/uploads/2024/12/Hire-Laravel-Expert-Now-3.webp)](https://magecomp.com/services/hire-laravel-developer/)

### 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:
```
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);
```

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:
```
npm run dev
```

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:
```
php artisan serve
```

Your Laravel project with Tailwind CSS should now be up and running. You can start building your user interfaces using Tailwind CSS classes.
## Conclusion:
Congratulations! You have Tailwind CSS inside your Laravel 8 project. With power under the hood in the form of their utility classes, you can now create beautiful, responsive web applications with less effort and code.

[![Contact Us](https://magecomp.com/blog/wp-content/uploads/2024/12/Contact-Us-3.webp)](https://magecomp.com/contact)

Install Tailwind CSS in your Laravel 8 project by hiring the Laravel Developer.

**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/install-tailwind-css-in-laravel-8/](https://magecomp.com/blog/install-tailwind-css-in-laravel-8/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-25 09:30:06 UTC_