Hello artisan,
In this tutorial, I will show you from scratch how to install tailwind CSS in Laravel 9 with vite. In this example, I will install tailwind CSS from scratch in laravel 9 with vite 3. You can also install tailwind v3 Laravel 9 vite 3 using laravel breeze and Jetstream. I will show you next.
If you don't know how to install tailwind CSS in Laravel 9 with vite then this example is for you. So let's see laravel vite tailwind installation example tutorial:
Step 1: Download Laravel
Download a fresh Laravel project by running the following command:
composer create-project laravel/laravel tailwind-vite
Step 2: Install Tailwind CSS
In this step, we will install tailwind css by the following command:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Next, you need to add a 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
from vite.config.js like below:
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 the main blade file to access the asset file.
views/welcome.blade.php
Read also: Laravel 9 Repository Design Pattern Example Tutorial
Hope it can help you.
#laravel #laravel-9x