How To Install Tailwind CSS In Laravel 9 With Vite

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.


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


Add the Tailwind directives to your CSS.


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


Remove resources/css/app.css from vite.config.js like below:


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

export default defineConfig({
    plugins: [
            input: [
            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:


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


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



Read also: Laravel 9 Repository Design Pattern Example Tutorial


Hope it can help you.


#laravel #laravel-9x