Laravel 12 + TailwindCSS with Blade: A Beginner’s Guide (2025)

Want to build beautiful, responsive Laravel applications quickly? Laravel 12 and TailwindCSS make it easier than ever to create stunning UIs without writing custom CSS.

In this guide, you’ll learn:
✔ How to set up TailwindCSS in Laravel 12
✔ Using Tailwind classes in Blade templates
✔ Best practices for structuring your styles

Perfect for beginners—let’s get started!

🔧 Prerequisites

Before we begin, ensure you have:
✔ Laravel 12 installed (composer create-project laravel/laravel project-name)
✔ Node.js 20+ (for TailwindCSS)
✔ Basic familiarity with Laravel Blade

🛠 Step 1: Install TailwindCSS

1. Install Tailwind via npm

Run these commands in your Laravel project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This installs Tailwind and generates a config file (tailwind.config.js).

2. Configure `tailwind.config.js`

Update the file to scan Blade templates:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add Tailwind to CSS

Create or modify resources/css/app.css:

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

4. Include CSS in Vite

Update vite.config.js to process CSS:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

5. Link CSS in Your Blade File

In resources/views/welcome.blade.php, add:

<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css'])
</head>
<body>
    <!-- Your content here -->
</body>
</html>

6. Run the Dev Server

npm run dev

Now Tailwind is ready!

🎨 Step 2: Using Tailwind in Blade Templates

Tailwind provides utility classes for styling. Let’s build a simple page.

Example: Styled Welcome Page

Update welcome.blade.php:

<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css'])
    <title>Laravel + Tailwind</title>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto p-8">
        <h1 class="text-4xl font-bold text-blue-600 mb-6">
            Welcome to Laravel 12 + Tailwind!
        </h1>
        
        <div class="bg-white p-6 rounded-lg shadow-md">
            <p class="text-gray-700 mb-4">
                This is a beginner-friendly guide to using TailwindCSS with Laravel Blade.
            </p>
            
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
                Get Started
            </button>
        </div>
    </div>
</body>
</html>

Key Tailwind Classes Used:

Class	Effect
`bg-gray-100`	Light gray background
`min-h-screen`	Full viewport height
`container mx-auto`	Centered container
`text-4xl font-bold`	Large bold text
`rounded-lg shadow-md`	Card-like styling
`hover:bg-blue-600`	Hover effect

🚀 Step 3: Best Practices

1. Use `@apply` for Reusable Styles

Instead of repeating classes, extract them in CSS:

.btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;
}

Then use in Blade:

<button class="btn-primary">Click Me</button>

2. Keep Blade Files Clean

Avoid long class strings—use components or partials.

3. Optimize for Production

npm run build

This generates minified CSS.

🔑 Key Takeaways

✅ TailwindCSS integrates smoothly with Laravel Blade.
✅ Utility-first CSS speeds up development.
✅ Vite processes Tailwind efficiently.
✅ Use @apply for reusable styles.

🎉 What’s Next?

Build a dashboard layout
Try Dark Mode with Tailwind
Explore Tailwind plugins (like @tailwindcss/forms)

Happy styling! 🎨

Questions? Ask below! 👇

🔧 Prerequisites

🛠 Step 1: Install TailwindCSS

1. Install Tailwind via npm

2. Configure `tailwind.config.js`

3. Add Tailwind to CSS

4. Include CSS in Vite

5. Link CSS in Your Blade File

6. Run the Dev Server

🎨 Step 2: Using Tailwind in Blade Templates

Example: Styled Welcome Page

Key Tailwind Classes Used:

🚀 Step 3: Best Practices

1. Use `@apply` for Reusable Styles

2. Keep Blade Files Clean

3. Optimize for Production

🔑 Key Takeaways

🎉 What’s Next?

Ajay Yadav

Transforming Ideas Into Digital Solutions

Tags

Comments

Related Posts

Laravel 12 + TailwindCSS with Blade: A Beginner’s Guide (2025)

🔧 Prerequisites

🛠 Step 1: Install TailwindCSS

1. Install Tailwind via npm

2. Configure tailwind.config.js

3. Add Tailwind to CSS

4. Include CSS in Vite

5. Link CSS in Your Blade File

6. Run the Dev Server

🎨 Step 2: Using Tailwind in Blade Templates

Example: Styled Welcome Page

Key Tailwind Classes Used:

🚀 Step 3: Best Practices

1. Use @apply for Reusable Styles

2. Keep Blade Files Clean

3. Optimize for Production

🔑 Key Takeaways

🎉 What’s Next?

Ajay Yadav

Transforming Ideas Into Digital Solutions

Tags

Comments

Related Posts

2. Configure `tailwind.config.js`

1. Use `@apply` for Reusable Styles