Install Tailwind CSS 3 in Laravel 9 With Vite 3

In this section we will install tailwind css from scratch in laravel 9 with vite 3. You can install tailwind v3 laravel 9 vite 3 using laravel breeze and Jetstream.


1.Install Tailwind CSS scratch in laravel 9 with Vite 3

Create laravel Project

composer create-project laravel/laravel tailwind-vite

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p


Next, you need add template path in tailwind.config.js.

tailwind.config.js

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


Add the Tailwind directives to your CSS.

resources/css/app.css

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

Remove resources/css/app.css in vite.config.js

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,
        }),
    ],
});


Next,  you need to import your CSS via JavaScript. Typically, this would be done in your application's resources/js/app.js file:

resources/js/app.js

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


Add @vite('resources/js/app.js') in main blade file to access asset file.

views/welcome.blade.php

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

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

        <title>Laravel 9 Vite 3 With Tailwind CSS</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">Laravel 9 Vite with Tailwind CSS</h1>
        </div>
    </body>

</html>
laravel 9 vie 3 and tailwind css 3

laravel 9 vie 3 and tailwind css 3


# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

In next terminal serve laravel app.

php artisan serve


2.Install Tailwind CSS 3 with laravel 9 Breeze vite

Create Laravel Project

composer create-project --prefer-dist laravel/laravel breeze-vite

Install laravel breeze via composer

composer require laravel/breeze --dev

run below command publish config file

php artisan breeze:install

install & run npm

npm install && npm run dev

run below command to migrate

php artisan migrate

Run vite

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

In next terminal serve laravel app.

php artisan serve

3.Install Tailwind CSS 3 in laravel 9 Jetstream Vite

Create Laravel Project

composer create-project --prefer-dist laravel/laravel jetstream-vite

Install jetstream via composer

composer require laravel/jetstream

Install Jetstream With Livewire

php artisan jetstream:install livewire

php artisan jetstream:install livewire --teams

install & run npm

npm install && npm run dev

run below command to migrate

php artisan migrate

In next terminal serve laravel app.

php artisan serve

Run vite

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build