How to Install Tailwind CSS in Laravel

Published on
Jigar Patel-
6 min read

Overview

ExpertLaravel.com Image

How to Install Tailwind CSS in Laravel

Introduction:

In the ever-evolving world of web development, staying ahead of the curve is essential. One of the most popular and efficient ways to create modern and responsive user interfaces is by using the Tailwind CSS framework. In this comprehensive guide, we will walk you through three different methods to install Tailwind CSS in your Laravel 10 application. Whether you're a seasoned Laravel developer or just getting started, by the end of this tutorial, you'll have a solid understanding of how to integrate Tailwind CSS into your Laravel projects, allowing you to craft sleek and stylish web applications effortlessly.

In this post, I will give three ways to install Tailwind CSS in your Laravel application. You can see the below list:

  1. Install Tailwind CSS using npm
  2. Install Tailwind CSS using Breeze
  3. Install Tailwind CSS using Jetstream

So, let's follow the step-by-step guide to install Tailwind CSS in a Laravel application.

1) Install Tailwind CSS using npm

In this step, I will provide you with a list of steps using npm commands. Let's follow it.

Step 1: Install Laravel

If you haven't already set up a Laravel application, you can run the following command to get a fresh Laravel app:

composer create-project laravel/laravel example-app

Step 2: Install Tailwind CSS

Let's install Tailwind CSS along with its dependencies and create a tailwind.config.js file. Run the following command:

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init

Step 3: Configure Template Path

Open the tailwind.config.js file and add file paths as shown below:

module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Step 4: Add Tailwind with Laravel Mix

Open the webpack.mix.js file and add the following lines:

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

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

## **Step 5: Add Tailwind CSS in app.css file**

Open the resources/css/app.css file and add the following lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 6: Install npm and Build

Run the following commands to install npm dependencies and build the assets:

npm install

npm run watch

Step 7: Use Tailwind CSS in App

Now, you can use Tailwind CSS classes in your Blade files as shown below:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
  </head>
  <body>
    <div class="container mx-auto px-10">
      <h1 class="text-3xl font-bold underline">How to Install Tailwind CSS in Laravel</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        ncupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </body>
</html>

2) Install Tailwind CSS using Breeze

In this step, I will provide you with a list of steps using npm commands. Let's follow it.

Step 1: Install Laravel

If you haven't already set up a Laravel application, you can run the following command to get a fresh Laravel app:

composer create-project laravel/laravel example-app

Step 2: Install Breeze

Run the following command to install the Laravel Breeze package:

composer require laravel/breeze --dev

Next, install Laravel Breeze for simple auth scaffolding:

php artisan breeze:install

Now, run the following commands to install npm dependencies and build:

npm install && npm run dev

That's it. You will have a setup based on Tailwind CSS.

3) Install Tailwind CSS using Jetstream

In this step, I will provide you with a list of steps using npm commands. Let's follow it.

Step 1: Install Laravel

If you haven't already set up a Laravel application, you can run the following command to get a fresh Laravel app:

composer create-project laravel/laravel example-app

Step 2: Install Jetstream

Now, use the composer command to install Jetstream:

composer require laravel/jetstream

Step 3:Create Auth with Livewire:

To create authentication, run one of the following commands based on your requirements:

Basic authentication:

php artisan jetstream:install livewire

Authentication with team management:

php artisan jetstream:install livewire --teams

Now, let's install Node.js packages and run:

npm install

npm run dev

That's it. You will have a setup based on Tailwind CSS.

Quick summary:

Quick summary, Tailwind CSS offers a unique approach to web development, empowering developers to create visually stunning user interfaces with minimal effort. Throughout this tutorial, we explored three distinct approaches to integrating Tailwind CSS into your Laravel 10 application: using npm, Laravel Breeze, and Laravel Jetstream. Each method has its merits and is suitable for different scenarios, ensuring flexibility in your development workflow.

As you embark on your journey to harness the power of Tailwind CSS within Laravel, remember that practice makes perfect. Experiment with the framework, tweak your designs, and watch your applications transform into sleek, responsive, and highly customizable user interfaces.

With Tailwind CSS at your disposal, you're well-equipped to deliver exceptional web experiences to your users while simplifying the complexities of styling and layout. So go ahead, dive into the world of Tailwind CSS, and elevate your Laravel projects to new heights of design and functionality.

About the Author

Jigar Patel is a Laravel enthusiast and a software developer at JBCodeapp Company. Visit our JBCodeapp to learn more about our work in the Laravel ecosystem.

We're Hiring

Are you passionate about Laravel development? We're always on the lookout for talented developers to join our team. Check out our careers page for current job openings.

  • Leading Laravel Development Services Provider

  • Mastering Laravel Artisan: 20 Essential Commands for Effortless Development

  • Laravel Post View Counter: Monitor Your Content's Popularity

  • Laravel Send Email using Queue Example

  • Simplify Laravel Routing Like a Pro with Folio

  • Authentication in Laravel: A Comprehensive Guide

  • Create a SPA in Seconds Using wire:navigate in Livewire v3