Introduction to Tailwind CSS in Laravel

Tailwind CSS is a modern utility-first CSS framework designed to speed up UI development. If you haven’t explored it yet, I’ve written a comprehensive guide to Tailwind CSS that’s perfect for beginners.

This tutorial walks you through integrating Tailwind CSS into any Laravel project, whether you’re starting fresh or adding it to an existing codebase.

Create a New Laravel Project with Jetstream
Install Tailwind CSS in an Existing Laravel Project
Publish Tailwind and PostCSS Configuration
Add Tailwind Directives to Your CSS File
Compile Assets Using Vite
Link Compiled CSS in Blade Templates
Conclusion

1. Create a New Laravel Project with Jetstream

If you're starting a fresh Laravel project and want Tailwind CSS pre-installed, Jetstream is the fastest option. It also sets up a JavaScript framework like Vue or React for you.

laravel new example --jet
cd example
npm install
npm run dev

After this, Tailwind is ready to use out of the box.

2. Install Tailwind CSS in an Existing Laravel Project

For existing Laravel projects, use your preferred package manager to install Tailwind and its dependencies.

NPM:

npm install tailwindcss postcss autoprefixer

Yarn:

yarn add tailwindcss postcss autoprefixer

Bun:

bun add tailwindcss postcss autoprefixer

Tailwind is a PostCSS plugin, and it relies on autoprefixer for proper browser compatibility.

3. Publish Tailwind and PostCSS Configuration

Generate the Tailwind and PostCSS config files with:

NPM:

npx tailwindcss init -p

Yarn:

yarn tailwindcss init -p

Bun:

bun run tailwindcss init -p

You’ll get two files:

`tailwind.config.js`

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

`postcss.config.js`

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. Add Tailwind Directives to Your CSS File

Open or create the file at resources/css/app.css And add the following:

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

Do not add @tailwind variants; — it’s deprecated and no longer needed.

5. Compile Assets Using Vite

Laravel uses Vite for fast asset bundling. Use these commands depending on your package manager:

Development:

npm run dev      # or yarn dev / bun run dev

Production:

npm run build    # or yarn build / bun run build

The the dev command supports hot-reloading; build is for production-ready minified output.

Link Compiled CSS in Blade Templates

In your main Blade file (e.g., resources/views/layouts/app.blade.php), include Tailwind using Laravel's @vite directive:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Laravel App</title>
    @vite('resources/css/app.css')
</head>
<body>
    <!-- Your content here -->
</body>
</html>

7. Conclusion

That’s it! You’ve now integrated Tailwind CSS into your Laravel project. Whether you started from scratch with Jetstream or added it manually, you’re ready to build responsive, fast, and beautiful interfaces.

Now go build something amazing with Laravel + Tailwind!

Souy Soeng

Add Tailwind CSS to any Laravel project

Introduction to Tailwind CSS in Laravel

Table of Contents

1. Create a New Laravel Project with Jetstream

2. Install Tailwind CSS in an Existing Laravel Project

NPM:

Yarn:

Bun:

3. Publish Tailwind and PostCSS Configuration

NPM:

Yarn:

Bun:

`tailwind.config.js`

`postcss.config.js`

4. Add Tailwind Directives to Your CSS File

5. Compile Assets Using Vite

Development:

Production:

Link Compiled CSS in Blade Templates

7. Conclusion

Post a Comment

Souy Soeng