Install Tailwind CSS with Laravel

Setting up Tailwind CSS in a Laravel project.

Create your project

Start by creating a new Laravel project if you don’t have one set up already. The most common approach is to use the Laravel installer.

Terminal

laravel new my-project
cd my-project

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Add the @tailwindcss/vite plugin to your Vite configuration.

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
    // …
  ],
})

Remove legacy PostCSS configuration

You can remove tailwindcss, postcss-import, and autoprefixer from your postcss.config.js — Tailwind CSS v4 handles them automatically via the Vite plugin. This simplifies setup when upgrading from v3. See the upgrade guide for details.

postcss.config.js

export default {
     plugins: {
         "postcss-import": {},
          tailwindcss: {},
          autoprefixer: {},
         "@tailwindcss/postcss": {},
     },
};

Import Tailwind CSS

Add an @import to ./resources/css/app.css that imports Tailwind CSS. Additionally, tell Tailwind CSS to scan your resources/views directory for utilities.

app.css

@import "tailwindcss";
@source "../views";

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Make sure your compiled CSS is included in the <head> then start using Tailwind’s utility classes to style your content.

app.blade.php

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @vite('resources/css/app.css')
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Install Tailwind CSS with Laravel

Using Vite

Using Laravel Mix

Create your project

Install Tailwind CSS

Configure Vite Plugin

Remove legacy PostCSS configuration

Import Tailwind CSS

Start your build process

Start using Tailwind in your project