Using Tailwind CSS with Laravel

By

Learn how to set up Tailwind CSS v4 in a Laravel project with Vite, using the @tailwindcss/vite plugin and a single CSS import.

~~~

The first thing we do is configure Vite, so we can style the app with Tailwind CSS.

Laravel already ships with Vite. Since Laravel 12, a fresh laravel new project also ships with Tailwind CSS v4 and its Vite plugin already wired: package.json, vite.config.js and resources/css/app.css come preconfigured, so on Laravel 12 or 13 you run npm install and npm run dev and jump to the Blade part below. Laravel 11 bundled Tailwind v3 with PostCSS, and Laravel 10 and earlier had no Tailwind at all. The steps below bring one of those projects to the v4 setup by hand.

First open the terminal in the Laravel project, and run this:

npm install tailwindcss @tailwindcss/vite

If you don’t have npm installed yet, install Node.js first.

This installs Tailwind CSS v4 and the official Vite plugin. You do not need postcss, autoprefixer, or npx tailwindcss init for this setup.

Configure the Vite plugin

Open vite.config.js (or vite.config.ts) and add the Tailwind plugin:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    tailwindcss(),
  ],
})

Import Tailwind in your CSS

In resources/css/app.css replace any old @tailwind directives with this:

@import "tailwindcss";
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";

Tailwind v4 finds your Blade views and JavaScript in resources on its own, no content array needed. It skips folders listed in .gitignore though, and vendor and storage are in there. The two @source lines add back the pagination views that ship with the framework and the compiled Blade templates. Without them, classes used only in Laravel’s pagination views can go missing. This is the same app.css a fresh Laravel 13 project ships with.

There is no tailwind.config.js in this flow. Theme customizations go in CSS with @theme when you need them.

Run the dev servers

Back to the terminal, run npm run dev and keep it running while developing the site, as php artisan serve (run both in 2 different terminal windows).

Terminal showing npm run dev command output with Vite development server running for Laravel project

Now we’re ready to use Tailwind CSS in our Blade templates!

Add this line to the page head:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')

If you refresh the page, you can see immediately that something changed on your page. It’s Tailwind adding some default normalization, so that’s a sign it’s working!

Now we can add classes to our HTML body to style the page a bit, like this

<p class="font-bold border-b-gray-300 border-b pb-2 mb-3">
    Test
</p>

Notice that changes are applied automatically when you save the file in VS Code, without refreshing the page. Both changes in the Blade template, and in the Tailwind CSS classes. That’s some “magic” provided by Vite and Laravel in development mode.

If you want the same Tailwind v4 Vite setup outside Laravel, I also wrote Setting up Tailwind CSS on Vite.

Tagged: Laravel · All topics

Want me to talk about your product? You can sponsor this site.

~~~

Related posts about laravel: