Tailwind CSS 4 in Laravel Using Vite: Boosting Performance and Developer Productivity

Why Integrate Tailwind CSS 4 with Laravel Using Vite?

When you’re working on a Laravel project, efficient asset management is crucial for improving performance and developer productivity. Here's why integrating Tailwind CSS 4 with Vite is a game-changer:

1. Faster Builds with Vite
   Vite’s fast build times are achieved through native ES modules and hot module replacement (HMR). Compared to traditional bundlers like Webpack or Laravel Mix, Vite significantly reduces development time by compiling only the necessary parts of the code.
   • Vite's speed: Instant feedback during development.
   • Laravel Mix: Slower, requires manual compilation on every change.

2. JIT Compilation with Tailwind CSS 4
   Tailwind CSS 4 introduces Just-in-Time (JIT) compilation by default. This means that only the CSS classes used in your application are included in the final build, drastically reducing the final CSS file size.
   • Tailwind CSS 4 JIT: Dynamic class generation, optimized for production.
   • Old Tailwind versions: Larger CSS bundles with unused classes.

3. Hot Module Replacement (HMR)
   Vite’s HMR provides instant updates in the browser, making it easy to see your changes as you make them, without requiring a full page reload. This speeds up development by allowing you to test and tweak styles in real-time.

Setting Up Tailwind CSS 4 in Laravel with Vite.

Here’s how to integrate Tailwind CSS 4 into your Laravel project using Vite.

Step 1: Install Dependencies

Install Tailwind CSS 4 and the Vite plugin for Tailwind:

npm install -D tailwindcss @tailwindcss/vite

This installs Tailwind CSS and the required Vite plugin for smooth integration.

Step 2: Configure Vite

1. Install Vite and the Vite plugin for Laravel:

npm install --save-dev vite laravel-vite-plugin

1. Update the vite.config.js file to configure Vite with the Laravel 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(),  // Add Tailwind plugin
  ],
});

Step 3: Add Tailwind CSS to Your CSS File

Open resources/css/app.css and add the following Tailwind directives:

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

This ensures that Tailwind CSS styles are applied across your project.

Step 4: Add @vite Directive in Blade

In your main Blade layout file (typically located at resources/views/layouts/app.blade.php), add the following directive to include the necessary CSS and JavaScript files for Vite:

@vite(['resources/css/app.css', 'resources/js/app.js'])

This will link the compiled assets generated by Vite to your Laravel views.

Step 5: Build Your Assets

To compile your assets and run the Vite development server, use the following command:

npm run dev

This starts the development server and provides fast hot reloading, allowing you to see changes in real-time.

Benefits of Using Tailwind CSS 4 with Vite

1. Faster Development Cycle

With HMR in Vite and the JIT compilation of Tailwind CSS, your development workflow becomes faster and more efficient. You can quickly see the results of any changes without long build times, improving your productivity.

2. Smaller CSS Files

By enabling JIT, only the classes that are actually used in your project are included in the final build. This leads to smaller CSS files, reducing load times and improving performance.

3. Optimized Builds

Vite compiles assets on-demand, making the build process significantly faster than with traditional bundlers. As a result, your assets are optimized for production with minimal configuration.

Real-World Performance Comparison: Tailwind CSS 4 with Vite vs Laravel Mix

Problem:

We needed a solution that would speed up frontend development while optimizing the CSS file size for production.

Solution:

We replaced Laravel Mix with Vite and integrated Tailwind CSS 4 with JIT compilation. The results were impressive!

Before:

• Laravel Mix: Slower build times (30–40 seconds for large projects).

• Tailwind CSS: Large CSS file sizes with unused styles.

After:

• Vite: Development build time reduced to 3–5 seconds.

• Tailwind CSS 4: CSS file sizes reduced from 1.2MB → 120KB, improving LCP and FCP metrics.

Conclusion & CTA

Integrating Tailwind CSS 4 with Vite into your Laravel project not only speeds up build times but also reduces CSS file size, improving both performance and developer productivity.

Ready to supercharge your frontend development? Integrate Tailwind CSS 4 with Vite into your Laravel project today, and experience the performance boost and faster workflow!