Install Tailwind CSS in Laravel using Vite or Mix

Table of contents:

How to install Tailwind CSS in Laravel (Vite & Mix)
Quick overview
Prerequisites
1. Install Tailwind (common steps)
2. Tailwind config (template paths)
3. Add Tailwind directives to your CSS
4. Vite (Laravel 9, 10, 11 recommended)
5. Laravel Mix (Laravel 8 and older)
6. postcss.config.js (what -p creates)
7. Quick verification & troubleshooting
8. Blade test snippet (quick smoke test)
Conclusion

How to install Tailwind CSS in Laravel (Vite & Mix)

Quick overview

Laravel 9+ (Vite) use Vite and Laravel’s @vite Blade directive. Default for modern Laravel apps.
Laravel 8 and below (Mix / Webpack) use Laravel Mix and mix() Blade helper.

Prerequisites

Node.js (12.13.0+ recommended).
An existing Laravel project (new Laravel installation comes with Tailwind installed by default).
npm initialized (npm install before running build commands).

1. Install Tailwind (common steps)

Run in your project root:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npx tailwindcss init -p creates tailwind.config.js and postcss.config.js.

2. Tailwind config (template paths)

Tailwind needs to know which files to scan for classes. Add your Laravel resource paths:

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

Use export default (ESM) or module.exports = { ... } (CommonJS) depending on your toolchain. Both forms are accepted by Tailwind; the ESM example above matches Tailwind’s current guides.

3. Add Tailwind directives to your CSS

Create or overwrite resources/css/app.css with:

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

This is required for Tailwind to inject its layers into your build.

4. Vite (Laravel 9, 10, 11 recommended)

Ensure your package.json scripts include the standard Vite scripts (Laravel project stub does this by default):

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

Confirm vite.config.js includes Laravel’s plugin and your entry points:

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

Start the dev server:

npm run dev

In your Blade layout (e.g. resources/views/layouts/app.blade.php) include assets with @vite:

<!doctype html>
<html>
<head>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-50">
  <h1 class="text-3xl font-bold">Tailwind + Laravel (Vite)</h1>
</body>
</html>

5. Laravel Mix (Laravel 8 and older)

Install Tailwind (same as section A).
Configure webpack.mix.js to use Tailwind as a PostCSS plugin. Tailwind’s guide shows using the @tailwindcss/postcss helper for Mix:

const mix = require('laravel-mix')
 
mix
  .js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css', [
    require('@tailwindcss/postcss'),
  ])

Run Mix:

npm run dev
# or
npm run production

Include compiled assets in Blade using mix():

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

6. `postcss.config.js` (what `-p` creates)

Typical postcss.config.js created by npx tailwindcss init -p:

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

This is used by both Vite and Mix (PostCSS integration).

7. Quick verification & troubleshooting

If utilities don’t appear, confirm content paths include all your Blade/JS/TS/Vue files and rebuild.
Restart the dev server after changing tailwind.config.js.
Ensure your CSS file with @tailwind directives is actually imported by your bundler (Vite input or Mix postCss).
For production builds run npm run build (Vite) or npm run production (Mix).

8. Blade test snippet (quick smoke test)

Add this to any Blade view to verify classes render:

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="p-8 bg-white rounded shadow">
    <h2 class="text-2xl font-semibold text-sky-600">Tailwind is working</h2>
    <p class="mt-2 text-sm text-gray-600">If you see this styled, Tailwind is active.</p>
  </div>
</div>

Conclusion

This article provides the exact commands and config for installing Tailwind CSS in Laravel projects using Vite (recommended for Laravel 9+) and Mix (legacy).

Log File in Laravel: Location and Common Fixes

Get route and query parameters from URL in Laravel

Read and load a CSV file into an array in PHP

Install Tailwind CSS in Laravel using Vite or Mix

How to install Tailwind CSS in Laravel (Vite & Mix)

Quick overview

Prerequisites

1. Install Tailwind (common steps)

2. Tailwind config (template paths)

3. Add Tailwind directives to your CSS

4. Vite (Laravel 9, 10, 11 recommended)

5. Laravel Mix (Laravel 8 and older)

6. `postcss.config.js` (what `-p` creates)

7. Quick verification & troubleshooting

8. Blade test snippet (quick smoke test)

Conclusion

Install Tailwind CSS in Laravel using Vite or Mix

How to install Tailwind CSS in Laravel (Vite & Mix)

Quick overview

Prerequisites

1. Install Tailwind (common steps)

2. Tailwind config (template paths)

3. Add Tailwind directives to your CSS

4. Vite (Laravel 9, 10, 11 recommended)

5. Laravel Mix (Laravel 8 and older)

6. postcss.config.js (what -p creates)

7. Quick verification & troubleshooting

8. Blade test snippet (quick smoke test)

Conclusion

Log File in Laravel: Location and Common Fixes

Get route and query parameters from URL in Laravel

Read and load a CSV file into an array in PHP

6. `postcss.config.js` (what `-p` creates)