Laravel with Tailwind CSS

Laravel with Tailwind CSS 4 is the gold standard for modern web design. Tailwind 4 introduced a CSS-first architecture, reducing JavaScript-heavy configuration. With the Oxide engine, build times are almost instantaneous, making Laravel + Tailwind 4 a highly efficient combination.

What’s New in Laravel + Tailwind 4 Integration?

Tailwind 4 dramatically simplified integration with Laravel . Key changes include:

1. The “Zero-Config” Vite Plugin

Laravel ships with a dedicated @tailwindcss/vite plugin that automatically detects Blade files, components, and JS files without manually listing them in a content array.

2. CSS-First Configuration

Instead of configuring your theme via a JavaScript object, you now define styles directly in your CSS using the @theme directive:

@import "tailwindcss";

@theme {
    --color-brand: #ff2d20; /* Laravel Red */
    --font-sans: "Figtree", ui-sans-serif, system-ui;
}

3. Container Queries

Tailwind 4 supports container queries natively, allowing reusable Blade components to adapt to their parent container without additional plugins.

Why Laravel + Tailwind CSS 4 Dominates

Setting Up Tailwind 4 in Laravel

With Laravel using Vite 6, setup is streamlined:

1. Install the Packages:

   npm install tailwindcss @tailwindcss/vite

   Copy Code
2. Configure vite.config.js:

   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(),
       ],
   });

   Copy Code
3. Import in CSS:

   @import "tailwindcss";
   
   /* Optional: Tell Tailwind to scan specific Laravel folders (rare in v4) */
   @source "../views/**/*.blade.php";
   @source "../js/**/*.js";

   Copy Code

Common Gotcha: Upgrading from Tailwind 3

If you are migrating an older Laravel project, use npx @tailwindcss/upgrade. This tool automatically converts old class names (e.g., shadow-sm to shadow-xs) and migrates JS configurations to the new CSS-first format.

When to Choose Laravel + Tailwind 4

Use this pairing for modern web applications, SaaS platforms, dashboards, and marketing pages where **rapid development, responsive design, and maintainable components** are required. The combination is fast, efficient, and fully optimized for development standards.