How to Install Tailwind CSS in Laravel 10

Tailwind CSS is a popular utility-first CSS framework that provides a highly efficient and flexible way to build user interfaces. 

Step 1: Install Laravel

composer create-project laravel/laravel TailwindProject

Step 2: Install Tailwind CSS

Now We install tailwind css with dependency and create tailwind.config.js file. so run below command, 

npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init

Step 3: Configure Template Path

Here, open tailwind.config.js file and add path there:


module.exports = {
        content: [
        theme: {
          extend: {},
        plugins: [],

Step 4: Add Tailwind with Laravel mix

Here, open webpack.mix.js file and add lines there:


const mix = require('laravel-mix');
     | Mix Asset Management
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel applications. By default, we are compiling the CSS
     | file for the application as well as bundling up all the JS files.
    mix.js("resources/js/app.js", "public/js")
      .postCss("resources/css/app.css", "public/css", [

Step 5: Add Tailwind CSS in app.css file


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

Step 6: Install npm and Build

Run "npm install" command and then build it with "npm run watch" command: 

npm install

Build npm process:

npm run watch

Step 7: Use Tailwind CSS in App

Add code below in blad file,


<!doctype html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  <div class="container mx-auto px-10">
      <h1 class="text-3xl font-bold underline">
        How to Install Tailwind CSS in Laravel -
      <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>

Run Your Project and see the output in Your Browser,Thank You.

 One is Another Way To Use Tailwind CSS using Breeze See the Below Steps,

Step 1: Install Laravel

composer create-project laravel/laravel TailwindProject

Step 2: Install Breeze

composer require laravel/breeze --dev

install laravel breeze for simple auth scaffolding. 

php artisan breeze:install

run bellow command for install npm:

npm install && npm run dev

Run your project and see output.

Third Way,Tailwind CSS using Jetstream

Step 1: Install Laravel

composer create-project laravel/laravel TailwindProject

Step 2: Install Jetstream

Now, in this step, we need to use composer command to install jetstream, so let's run bellow command and install bellow library. 

composer require laravel/jetstream

Step 3: Create Auth with Livewire

php artisan jetstream:install livewire

    php artisan jetstream:install livewire --teams

Now, let's node js package:

npm install

let's run package:

npm run dev