Step 1. Install Laravel Project

Install Laravel 9 using the below command.

composer create-project laravel/laravel TailwindCSSExample;

Step 2: Setup Tailwind CSS

In this step, I will install Tailwind CSS and It’s dependency.

Tailwind CSS Dependency

PostCSS
auto-prefixer

We will install using below command.

First install Tailwind CSS.

npm install -D tailwindcss

Install the dependency.

npm install -D postcss autoprefixer

Now i have to generate Tailwind and post CSS configuration file. Will do using the below command.

npx tailwindcss init -p

The above command will create two configuration file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now in this file , we do some change for Laravel blade file. Like below code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 3: Add Tailwind CSS to app.css

Now add the below line in app/resources/css/app.css

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

now remove ‘resources/css/app.css‘, from vite.config.js. Now vite.config.js is look like below code.

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

Now i will do some change in resources/js/app.js , this changes will use for importing css via Javascript.

Add import ‘../css/app.css’ this to resources/js/app.js. And this file will looks like below.

resources/js/app.js

import './bootstrap';
import '../css/app.css'

Step 4: Import Vite Assets to Laravel Blade

I will change resources/views/welcome.blade.php , this is already in your project, You can also create a new blade.

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Install Tailwind CSS 3 in Laravel 9 With Vite 3</title>

        @vite('resources/js/app.js')
    </head>

    <body class="antialiased">
        <div class="flex justify-center items-center h-screen">
            <h1 class="text-3xl text-purple-600 font-bold">Install Tailwind CSS 3 in Laravel 9 With Vite 3</h1>
        </div>
    </body>

</html>