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.

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.