The Laravel Tailwind pairing is one of the fastest ways to build a UI in a project: it combines Tailwind, a utility-first CSS framework, with Laravel's Vite-based asset compiler so you can design straight inside Blade instead of hopping between separate stylesheets. In this article I'll walk you through installing Tailwind in a clean Laravel project from start to finish, using utility classes in Blade templates, tidying up repeated patterns with Blade components, and keeping your production bundle small.
Why Tailwind and Laravel work well together
Laravel 11 and 12 use Vite to compile assets. Because Vite ships a fast dev server with hot module replacement, the browser updates almost instantly the moment you add a class. Tailwind, in turn, gives you small single-purpose utility classes rather than prebuilt components: things like flex, pt-4, text-center and bg-slate-900. Put together, you build interfaces without leaving your HTML, without inventing names, and without bloating one giant stylesheet. And since Tailwind only compiles the classes you actually use, the final CSS output is usually tiny.
Installing Tailwind in a Laravel project
If you're starting on a fresh Laravel project, create it and step inside first. Then install Tailwind and its official Vite plugin via npm. In modern Tailwind versions the setup is done with a single Vite plugin, with no separate PostCSS configuration required:
npm install tailwindcss @tailwindcss/viteNext, open vite.config.js and add the Tailwind plugin alongside 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(),
],
});To pull Tailwind into your CSS entry file, open resources/css/app.css and add a single import line. Modern Tailwind uses a plain import instead of the old @tailwind base; @tailwind components; @tailwind utilities; trio:
@import "tailwindcss";Finally, load the assets in the <head> of your main Blade layout. Laravel provides the @vite directive for this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900">
@yield('content')
</body>
</html>During development run npm run dev; this starts the Vite dev server and reflects class changes instantly. At the same time you run the app with php artisan serve. That's it — you're ready to use Tailwind classes in Blade.
Utility classes in Blade templates
Tailwind's idea is that you style directly in the element's class attribute. The card below defines spacing, shadow, corner rounding and colours with classes alone:
<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
<h2 class="text-lg font-semibold text-slate-900">Project title</h2>
<p class="mt-2 text-sm text-slate-600">A short description.</p>
<a href="#" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2
text-sm font-medium text-white hover:bg-indigo-700">Details</a>
</div>Prefixes like hover:bg-indigo-700 are Tailwind's variant system. The same logic powers responsive design through breakpoints: the sm:, md: and lg: prefixes kick in at that screen size and above. For example, grid grid-cols-1 md:grid-cols-3 gives a single column on small screens and three columns on medium and large ones. For dark mode there's the dark: prefix; dark:bg-slate-900 applies only in the dark theme.
Combining Blade directives with Tailwind
Tailwind isn't limited to plain HTML; it gets along beautifully with Blade's conditional class helpers. The @class directive is a clean way to add classes based on a condition:
<span @class([
'rounded px-2 py-1 text-xs font-medium',
'bg-green-100 text-green-800' => $active,
'bg-slate-100 text-slate-500' => ! $active,
])>
{{ $active ? 'Active' : 'Inactive' }}
</span>This lets you manage status badges, alert boxes or active-tab styles in one readable place. The same utility classes repeat happily inside loops too: styling a list item inside @foreach is far faster than writing separate CSS elsewhere.
Avoiding repetition with Blade components
The most common criticism of the utility-first approach is repeating the same long class string everywhere. In Laravel the answer is Blade components. Create a button component:
php artisan make:component PrimaryButton --viewIn the generated resources/views/components/primary-button.blade.php file, write the Tailwind classes once and merge in any outside attributes with $attributes:
<button {{ $attributes->merge([
'class' => 'rounded-lg bg-indigo-600 px-4 py-2 text-sm
font-medium text-white hover:bg-indigo-700',
]) }}>
{{ $slot }}
</button>Now everywhere you simply write <x-primary-button>Save</x-primary-button>. You change the classes in one spot and the update propagates across the whole project. This blends Tailwind's flexibility with the order of Laravel's component system.
Customising the theme and building for production
When you want to add brand-specific colours or fonts, define your own design tokens with a @theme block in your CSS file. In modern Tailwind, configuration largely happens in CSS:
@import "tailwindcss";
@theme {
--color-brand: #4f46e5;
--font-heading: "Inter", sans-serif;
}After this declaration, classes like bg-brand or font-heading become available automatically. To ship to production you run npm run build; this minifies the assets, adds versioning and writes to the public/build folder. Tailwind automatically purges unused classes, so the final CSS file is usually just a few dozen kilobytes. To avoid building on the server, it's good practice to include npm run build in your deploy step and then run php artisan optimize.
Frequently Asked Questions
Is Vite required to use Tailwind?
For Laravel projects, in practice yes, because Laravel ships Vite as the default asset compiler and the official @tailwindcss/vite plugin is the smoothest path. Tailwind can be compiled with the standalone CLI without Vite, but you'd give up Laravel's @vite directive and hot reload advantages.
Don't such long class strings make HTML unreadable?
It can look busy at first, but in practice once you move recurring patterns into Blade components and the @class directive, the HTML quickly tidies up. Many developers prefer reading the style right where they see it over navigating separate CSS files.
Why is the production CSS file so small?
Tailwind scans your project templates and only emits the classes you actually use. Combined with minification after npm run build, the final CSS on most sites stays under a few dozen kilobytes.
Want to speed up your Laravel UI with Tailwind? From setup to a design system, from Blade component architecture to production optimisation, let's build your project together. Get in touch and tell me what you have in mind.