😀Dùng Tailwind v4 (ok)

resources\views\layouts\app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>{{ config('app.name', 'Laravel') }}</title>
  <!-- Fonts -->
  <link rel="dns-prefetch" href="//fonts.bunny.net">
  <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
  <!-- Scripts -->
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app">
    <main class="py-4 mt-5">
      @yield('content')
    </main>
  </div>
</body>
</html>

resources\views\home.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

resources\views\welcome.blade.php

@extends('layouts.app')
@section('content')
<div class="bg-[#FDFDFC] dark:bg-[#0a0a0a] text-[#1b1b18] flex p-6 lg:p-8 items-center lg:justify-center min-h-screen flex-col">
  <header class="w-full lg:max-w-4xl max-w-[335px] text-sm mb-6 not-has-[nav]:hidden">
    @if (Route::has('login'))
    <nav class="flex items-center justify-end gap-4">
      @auth
      <a
        href="{{ url('/dashboard') }}"
        class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
        Dashboard
      </a>
      @else
      <a
        href="{{ route('login') }}"
        class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] text-[#1b1b18] border border-transparent hover:border-[#19140035] dark:hover:border-[#3E3E3A] rounded-sm text-sm leading-normal">
        Log in
      </a>
      @if (Route::has('register'))
      <a
        href="{{ route('register') }}"
        class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
        Register
      </a>
      @endif
      @endauth
    </nav>
    @endif
  </header>
  <div>Welcome 😍</div>
  @if (Route::has('login'))
  <div class="h-14.5 hidden lg:block"></div>
  @endif
</div>
@endsection

postcss.config.js

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

vite.config.js

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

resources\css\app.css

@import "tailwindcss";
/* Laravel Blade */
@source "../../resources/views/**/*.blade.php";
/* JS */
@source "../../resources/js/**/*.js";
/* Cache view */
@source "../../storage/framework/views/*.php";
/* Pagination */
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";

Ok, nếu bạn quyết dùng Tailwind v4 + Laravel + Vite thì phải setup đúng kiểu mới — vì v4 KHÔNG còn dùng tailwind.config.js theo cách cũ và PostCSS plugin đã đổi.

Hiện tại code của bạn gần đúng nhưng thiếu config quan trọng, nên Tailwind không hoạt động.

✅ Setup chuẩn Tailwind v4 + Laravel + Vite

1. Cài đúng packages (QUAN TRỌNG)

npm install tailwindcss @tailwindcss/postcss postcss

👉 KHÔNG dùng autoprefixer nữa (v4 đã tích hợp)

2. Sửa `postcss.config.js` (BẮT BUỘC)

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

🚨 Nếu bạn vẫn để tailwindcss: {} → sẽ KHÔNG chạy

3. File `resources/css/app.css` (đúng v4)

Code của bạn gần đúng, nhưng nên sửa lại path cho chuẩn Laravel:

@import "tailwindcss";

/* Laravel Blade */
@source "../../resources/views/**/*.blade.php";

/* JS */
@source "../../resources/js/**/*.js";

/* Cache view */
@source "../../storage/framework/views/*.php";

/* Pagination */
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";

4. `vite.config.js` (giữ đơn giản)

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

👉 Không cần config Tailwind ở đây

5. Import CSS vào JS

import '../css/app.css'

6. Blade

@vite(['resources/css/app.css', 'resources/js/app.js'])

7. Restart dev server

npm run dev

🚨 Nếu vẫn lỗi → chạy:

rm -rf node_modules package-lock.json
npm install
npm run dev

🔥 Debug nhanh (rất quan trọng)

Test class

<div class="text-red-500 text-3xl font-bold">
    Tailwind v4 OK
</div>

Nếu KHÔNG hoạt động → check:

❌ 1. Sai plugin PostCSS

→ phải là "@tailwindcss/postcss"

❌ 2. Sai path `@source`

👉 Sai 1 ký tự là Tailwind không scan được

❌ 3. Chưa import CSS vào JS

❌ 4. Cache Vite

npm run build

⚠️ Lưu ý cực quan trọng về Tailwind v4

❌ Không cần tailwind.config.js (trừ khi custom sâu)
❌ Không dùng @tailwind base/components/utilities
✅ Dùng @import "tailwindcss"
✅ Dùng @source thay content

✅ Kết luận

👉 Code của bạn sai ở 2 điểm chính:

❌ Thiếu @tailwindcss/postcss
❌ Path @source chưa chuẩn

👉 Nếu bạn muốn, gửi mình:

package.json
toàn bộ folder structure (hoặc screenshot)

Mình sẽ fix cho bạn chuẩn production Laravel + Tailwind v4 (no lỗi, no missing class) 🚀

PreviousLaravel Examples full (ok)NextHướng dẫn tôi chạy Chạy trong Tinker hoặc dump SQL (Full)

Last updated 10 hours ago

hashtag✅ Setup chuẩn Tailwind v4 + Laravel + Vite

hashtag1. Cài đúng packages (QUAN TRỌNG)

hashtag2. Sửa postcss.config.js (BẮT BUỘC)

hashtag3. File resources/css/app.css (đúng v4)

hashtag4. vite.config.js (giữ đơn giản)

hashtag5. Import CSS vào JS

hashtag6. Blade

hashtag7. Restart dev server

hashtag🔥 Debug nhanh (rất quan trọng)

hashtagTest class

hashtagNếu KHÔNG hoạt động → check:

hashtag❌ 1. Sai plugin PostCSS

hashtag❌ 2. Sai path @source

hashtag❌ 3. Chưa import CSS vào JS

hashtag❌ 4. Cache Vite

hashtag⚠️ Lưu ý cực quan trọng về Tailwind v4

hashtag✅ Kết luận