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
# 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
Read Also
Laravel 9 Add Simple Sidebar with Tailwind CSS Example
How to Use Carousel Slider in Laravel 9 Example
Laravel 9 Posts with Tags Many to Many Relationships Example
Laravel 9 Insert Category in Posts CRUD Example
How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS
Laravel 9 Simple Image Upload in Ckeditor 5 Example
Laravel 9 Flash Message Timeout and Hide Message Example
Install & Setup Markdown Editor in Laravel 9
Nuxt 3 Data Fetching Using Laravel 9 Api Example
Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS
Laravel 9 with Tailwind CSS Form Validation Example
Laravel 9 Backend Api Connect with Vue 3 Using Axios Example
Laravel 9 Authentication with Next js Example
Laravel 9 Sanctum Authentication with Nuxt JS Example
Laravel 9 Simple Search with Pagination Example
Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel
How to Fix and Clean Code Style in laravel 9
Laravel 9 Image File Upload Example
3 Way to Create Slug in Laravel 9 without Package
How to Add Dark Mode in Laravel 9 with Tailwind CSS
