#การใช้งาน Tailwind CSS กับ Laravel 13

Tailwind CSS เป็น CSS Framework แบบ Utility-First ที่ช่วยให้เราสร้าง User Interface ได้อย่างรวดเร็วโดยไม่จำเป็นต้องเขียน CSS class ใหม่สำหรับทุกองค์ประกอบ ตัวอย่างเช่นแทนที่จะสร้าง class เช่น .btn-primary เราสามารถนำ utility classes ของ Tailwind มาประกอบกันได้โดยตรง

<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
    Save
</button>

สำหรับ Laravel รุ่นปัจจุบัน การทำงานร่วมกับ Tailwind CSS ทำได้สะดวกผ่าน Vite ซึ่งเป็น frontend build tool หลักของ Laravel

บทความนี้เน้นแนวทางสำหรับ:

  • Laravel 13
  • Tailwind CSS 4.x
  • Vite
  • Blade Template

Tailwind CSS 4 เปลี่ยนรูปแบบ configuration หลายส่วนจาก Tailwind 3 โดยเฉพาะการใช้ @import "tailwindcss"; และการ configuration ผ่าน CSS มากขึ้น

#1. Architecture โดยรวม

โครงสร้างการทำงานสามารถมองได้ดังนี้

Blade / JavaScript
       |
       v
Tailwind CSS
       |
       v
resources/css/app.css
       |
       v
Vite
       |
       v
Browser

Laravel ใช้ Vite สำหรับ compile และ bundle CSS/JavaScript ขณะที่ Tailwind จะตรวจหา utility classes ที่ถูกใช้ใน Blade และ JavaScript แล้วสร้าง CSS ที่จำเป็นออกมา

#2. สร้าง Laravel Project

หากยังไม่มี Laravel project สามารถสร้างได้ด้วย Laravel Installer

laravel new tailwind-laravel

จากนั้นเข้า directory

cd tailwind-laravel

หรือใช้ Composer

composer create-project laravel/laravel tailwind-laravel
cd tailwind-laravel

ตรวจสอบ Laravel version

php artisan --version

ตัวอย่าง

Laravel Framework 13.x

#3. ติดตั้ง Frontend Dependencies

สำหรับ Laravel 13 project ใหม่ Tailwind และ Vite ถูกเตรียม configuration ไว้ให้แล้วในโครงสร้างมาตรฐาน

ติดตั้ง package จาก package.json

npm install

จากนั้นสามารถเริ่มระบบด้วย

composer run dev

คำสั่งนี้สามารถใช้สำหรับเปิด development environment ของ Laravel และ Vite ตาม configuration ของ project

หรือแยก terminal ได้

Terminal 1:

php artisan serve

Terminal 2:

npm run dev

#4. กรณี Project เดิมที่ยังไม่มี Tailwind

หากเป็น Laravel project เดิมและยังไม่ได้ติดตั้ง Tailwind CSS สามารถติดตั้ง Tailwind 4 ผ่าน Vite plugin

npm install tailwindcss @tailwindcss/vite

จากนั้นแก้ไฟล์

vite.config.js

ตัวอย่าง

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

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

        tailwindcss(),
    ],
});

จุดสำคัญคือ

tailwindcss()

ซึ่งทำให้ Vite ใช้งาน Tailwind CSS plugin ได้โดยตรง

#5. ตั้งค่า app.css

เปิดไฟล์

resources/css/app.css

สำหรับ Tailwind CSS 4 ใช้

@import "tailwindcss";

สำหรับ Laravel สามารถระบุ source ที่ Tailwind ต้อง scan เพิ่มได้ เช่น

@import "tailwindcss";

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

@source ช่วยกำหนด source files ที่ Tailwind ควรตรวจหา class names

ตัวอย่างเช่น

<div class="bg-blue-600 text-white p-6">
    Laravel + Tailwind CSS
</div>

Tailwind จะตรวจพบ class

bg-blue-600
text-white
p-6

และสร้าง CSS ที่ต้องใช้งาน

#6. เรียก CSS ผ่าน Blade

สร้างหรือแก้ไฟล์

resources/views/welcome.blade.php

ภายใน <head> เพิ่ม

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

ตัวอย่างเต็ม

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Laravel Tailwind</title>

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

<body>

    <h1 class="text-4xl font-bold text-blue-600">
        Laravel + Tailwind CSS
    </h1>

</body>
</html>

หาก project ใช้เฉพาะ CSS entry point สามารถใช้

@vite('resources/css/app.css')

ได้เช่นกัน

#7. ทดสอบ Tailwind CSS

เพิ่มตัวอย่างนี้ลงใน Blade

<div class="min-h-screen bg-gray-100 p-10">

    <div class="mx-auto max-w-xl rounded-2xl bg-white p-8 shadow-lg">

        <h1 class="text-3xl font-bold text-gray-900">
            Laravel + Tailwind CSS
        </h1>

        <p class="mt-4 text-gray-600">
            Build modern web applications with Laravel and Tailwind CSS.
        </p>

        <button
            class="mt-6 rounded-lg bg-blue-600 px-5 py-2.5
                   font-semibold text-white
                   transition hover:bg-blue-700"
        >
            Get Started
        </button>

    </div>

</div>

รัน

npm run dev

และ Laravel

php artisan serve

จากนั้นเปิด

http://127.0.0.1:8000

#8. ทำความเข้าใจ Utility Classes

แนวคิดหลักของ Tailwind คือการใช้ utility classes ขนาดเล็กมาประกอบกัน

ตัวอย่าง

<div class="rounded-xl bg-white p-6 shadow">

สามารถแยกความหมายได้ดังนี้

Class ความหมาย
rounded-xl ทำมุมโค้ง
bg-white พื้นหลังสีขาว
p-6 Padding
shadow เพิ่มเงา

ตัวอย่าง Typography

<h1 class="text-4xl font-bold text-gray-900">
    Dashboard
</h1>

ตัวอย่าง Spacing

<div class="mt-6 px-4 py-8">

ตัวอย่าง Width

<div class="mx-auto max-w-7xl">

#9. Layout ด้วย Flexbox

Tailwind รองรับ Flexbox ผ่าน utility classes

<nav class="flex items-center justify-between bg-gray-900 px-8 py-4">

    <div class="text-xl font-bold text-white">
        Laravel App
    </div>

    <div class="flex gap-6">

        <a href="/" class="text-gray-300 hover:text-white">
            Home
        </a>

        <a href="/products" class="text-gray-300 hover:text-white">
            Products
        </a>

        <a href="/about" class="text-gray-300 hover:text-white">
            About
        </a>

    </div>

</nav>

class สำคัญคือ

flex
items-center
justify-between
gap-6

#10. Layout ด้วย CSS Grid

ตัวอย่าง Product Grid

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">

    @foreach ($products as $product)

        <div class="rounded-xl bg-white p-6 shadow">

            <h2 class="text-xl font-bold">
                {{ $product->name }}
            </h2>

            <p class="mt-2 text-gray-600">
                {{ $product->description }}
            </p>

        </div>

    @endforeach

</div>

หน้าจอเล็ก

1 column

Tablet

2 columns

Desktop

3 columns

#11. Responsive Design

Tailwind ใช้ breakpoint prefix

sm:
md:
lg:
xl:
2xl:

ตัวอย่าง

<h1 class="text-2xl md:text-4xl lg:text-6xl">
    Responsive Heading
</h1>

ความหมายคือ

Mobile       text-2xl
Tablet       text-4xl
Desktop      text-6xl

อีกตัวอย่าง

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

แนวคิดของ Tailwind คือ mobile-first

#12. Hover และ State

Tailwind รองรับ state ผ่าน variant

ตัวอย่าง

<button
    class="rounded-lg bg-blue-600 px-4 py-2 text-white
           hover:bg-blue-700
           focus:outline-none
           focus:ring-4
           focus:ring-blue-300"
>
    Save
</button>

สามารถใช้ variant อื่นได้ เช่น

hover:
focus:
active:
disabled:
checked:
group-hover:

#13. สร้าง Form ด้วย Tailwind

ตัวอย่างฟอร์ม Laravel

<form
    method="POST"
    action="{{ route('users.store') }}"
    class="space-y-6"
>

    @csrf

    <div>

        <label
            for="name"
            class="mb-2 block text-sm font-medium text-gray-700"
        >
            Name
        </label>

        <input
            id="name"
            name="name"
            type="text"
            class="w-full rounded-lg border border-gray-300
                   px-4 py-2
                   focus:border-blue-500
                   focus:ring-2
                   focus:ring-blue-200"
        >

    </div>

    <button
        type="submit"
        class="rounded-lg bg-blue-600 px-5 py-2.5
               font-semibold text-white
               hover:bg-blue-700"
    >
        Save
    </button>

</form>

#14. แสดง Validation Error

Laravel Validation สามารถใช้ร่วมกับ Tailwind ได้โดยตรง

<input
    name="email"
    value="{{ old('email') }}"
    class="w-full rounded-lg border px-4 py-2
           @error('email')
               border-red-500
           @else
               border-gray-300
           @enderror"
>

@error('email')

    <p class="mt-1 text-sm text-red-600">
        {{ $message }}
    </p>

@enderror

วิธีนี้ช่วยเปลี่ยน style ตาม validation state ของ Laravel

#15. สร้าง Blade Component

เมื่อ utility classes เริ่มซ้ำกันหลายหน้า ควรแยกออกเป็น Blade Component

สร้าง component

php artisan make:component Button

Laravel จะสร้าง

app/View/Components/Button.php
resources/views/components/button.blade.php

แก้ไฟล์

resources/views/components/button.blade.php

เป็น

<button
    {{ $attributes->merge([
        'class' =>
            'rounded-lg bg-blue-600 px-4 py-2
             font-semibold text-white
             transition hover:bg-blue-700'
    ]) }}
>
    {{ $slot }}
</button>

จากนั้นเรียกใช้

<x-button>
    Save
</x-button>

หรือ

<x-button type="submit">
    Create Product
</x-button>

Blade Components + Tailwind เป็นแนวทางที่เหมาะมากสำหรับการสร้าง Design System ภายใน Laravel

#16. สร้าง Card Component

สร้าง

resources/views/components/card.blade.php

<div
    {{ $attributes->merge([
        'class' => 'rounded-2xl bg-white p-6 shadow'
    ]) }}
>
    {{ $slot }}
</div>

เรียกใช้

<x-card>

    <h2 class="text-xl font-bold">
        Laravel
    </h2>

    <p class="mt-2 text-gray-600">
        Build modern web applications.
    </p>

</x-card>

#17. Navigation Bar

ตัวอย่าง Navbar

<nav class="border-b bg-white">

    <div
        class="mx-auto flex max-w-7xl
               items-center justify-between
               px-6 py-4"
    >

        <a
            href="/"
            class="text-xl font-bold text-blue-600"
        >
            Laravel App
        </a>

        <div class="flex gap-6">

            <a
                href="/"
                class="text-gray-600 hover:text-blue-600"
            >
                Home
            </a>

            <a
                href="/products"
                class="text-gray-600 hover:text-blue-600"
            >
                Products
            </a>

            <a
                href="/dashboard"
                class="text-gray-600 hover:text-blue-600"
            >
                Dashboard
            </a>

        </div>

    </div>

</nav>

#18. Dashboard Layout

ตัวอย่าง layout ที่พบบ่อยใน Laravel Admin Application

<div class="min-h-screen bg-gray-100">

    <div class="flex">

        <aside class="min-h-screen w-64 bg-gray-900 p-6 text-white">

            <h2 class="text-2xl font-bold">
                Admin
            </h2>

            <nav class="mt-8 space-y-2">

                <a
                    href="/dashboard"
                    class="block rounded-lg px-4 py-2 hover:bg-gray-800"
                >
                    Dashboard
                </a>

                <a
                    href="/users"
                    class="block rounded-lg px-4 py-2 hover:bg-gray-800"
                >
                    Users
                </a>

                <a
                    href="/products"
                    class="block rounded-lg px-4 py-2 hover:bg-gray-800"
                >
                    Products
                </a>

            </nav>

        </aside>

        <main class="flex-1 p-8">

            <h1 class="text-3xl font-bold text-gray-900">
                Dashboard
            </h1>

        </main>

    </div>

</div>

#19. ตารางข้อมูล

ตัวอย่าง Laravel table

<div class="overflow-hidden rounded-xl bg-white shadow">

    <table class="w-full">

        <thead class="bg-gray-50">

            <tr>

                <th class="px-6 py-3 text-left text-sm font-semibold">
                    Name
                </th>

                <th class="px-6 py-3 text-left text-sm font-semibold">
                    Email
                </th>

            </tr>

        </thead>

        <tbody class="divide-y">

            @foreach ($users as $user)

                <tr class="hover:bg-gray-50">

                    <td class="px-6 py-4">
                        {{ $user->name }}
                    </td>

                    <td class="px-6 py-4">
                        {{ $user->email }}
                    </td>

                </tr>

            @endforeach

        </tbody>

    </table>

</div>

#20. Pagination

Laravel pagination รองรับ Tailwind อยู่แล้ว

Controller

$users = User::paginate(10);

return view('users.index', compact('users'));

Blade

{{ $users->links() }}

สำหรับ Tailwind 4 Laravel สามารถกำหนด source ของ pagination views ใน app.css

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

เพื่อให้ Tailwind ตรวจพบ classes ที่ใช้ใน pagination templates

#21. Dark Mode

สามารถใช้ dark: variant ได้ เช่น

<div
    class="bg-white text-gray-900
           dark:bg-gray-900 dark:text-white"
>
    Laravel Dark Mode
</div>

ตัวอย่าง Card

<div
    class="rounded-xl bg-white p-6 shadow
           dark:bg-gray-800"
>
    <h2
        class="text-xl font-bold text-gray-900
               dark:text-white"
    >
        Dashboard
    </h2>
</div>

การควบคุม dark mode สามารถทำผ่าน CSS, JavaScript หรือ theme strategy ของ application ได้

#22. Custom Theme ใน Tailwind CSS 4

Tailwind 4 สามารถกำหนด theme variables ผ่าน CSS

ตัวอย่าง

@import "tailwindcss";

@theme {
    --color-primary: #2563eb;
    --color-secondary: #7c3aed;
}

จากนั้นใช้

<button class="bg-primary text-white">
    Save
</button>

และ

<div class="bg-secondary text-white">
    Secondary
</div>

แนวทางนี้ช่วยให้สร้าง Design Tokens ได้ง่ายขึ้น

#23. ใช้ Tailwind กับ Blade Loop

ตัวอย่าง Product Card

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">

    @foreach ($products as $product)

        <article
            class="overflow-hidden rounded-2xl
                   bg-white shadow
                   transition
                   hover:-translate-y-1
                   hover:shadow-lg"
        >

            <div class="p-6">

                <h2 class="text-xl font-bold text-gray-900">
                    {{ $product->name }}
                </h2>

                <p class="mt-3 text-gray-600">
                    {{ $product->description }}
                </p>

                <div class="mt-5 flex items-center justify-between">

                    <span class="text-lg font-bold text-blue-600">
                        {{ number_format($product->price, 2) }} บาท
                    </span>

                    <a
                        href="{{ route('products.show', $product) }}"
                        class="rounded-lg bg-blue-600 px-4 py-2
                               text-sm font-semibold text-white
                               hover:bg-blue-700"
                    >
                        View
                    </a>

                </div>

            </div>

        </article>

    @endforeach

</div>

นี่เป็นตัวอย่างที่แสดงข้อดีของการใช้ Blade สำหรับข้อมูลจาก Backend และ Tailwind สำหรับ UI

#24. Dynamic Classes ต้องระวัง

Tailwind ตรวจ class names จาก source code ดังนั้นไม่ควรสร้างชื่อ class แบบ dynamic ที่ Tailwind มองไม่เห็น

ตัวอย่างที่ควรหลีกเลี่ยง

<div class="bg-{{ $color }}-500">

เพราะ Tailwind อาจไม่สามารถตรวจได้ว่าต้องสร้าง

bg-red-500
bg-blue-500
bg-green-500

วิธีที่เหมาะสมกว่า

$classes = [
    'success' => 'bg-green-500',
    'warning' => 'bg-yellow-500',
    'danger'  => 'bg-red-500',
];

Blade

<div class="{{ $classes[$status] }}">
    {{ $message }}
</div>

class names จะปรากฏแบบสมบูรณ์ใน source code

#25. ใช้ Tailwind กับ Laravel Validation

Controller

$request->validate([
    'name' => ['required', 'max:255'],
    'email' => ['required', 'email'],
]);

Blade

<input
    name="name"
    value="{{ old('name') }}"
    class="
        w-full rounded-lg px-4 py-2
        border
        @error('name')
            border-red-500
        @else
            border-gray-300
        @enderror
    "
>

สามารถใช้ Tailwind เพื่อแสดง error state ได้อย่างชัดเจนโดยไม่ต้องสร้าง CSS แยก

#26. Production Build

ระหว่างพัฒนาใช้

npm run dev

เมื่อต้อง deploy production

npm run build

Vite จะ compile และ version assets สำหรับ production

โดย Laravel @vite directive จะเลือกใช้ development server ใน development mode และ compiled assets เมื่อใช้งาน production build

#27. Recommended Project Structure

ตัวอย่าง

resources
├── css
│   └── app.css
│
├── js
│   └── app.js
│
└── views
    ├── components
    │   ├── button.blade.php
    │   ├── card.blade.php
    │   └── input.blade.php
    │
    ├── layouts
    │   └── app.blade.php
    │
    ├── products
    │   ├── index.blade.php
    │   └── show.blade.php
    │
    └── dashboard.blade.php

เมื่อ project ใหญ่ขึ้น ควรแยก UI ที่ใช้ซ้ำออกเป็น Blade Components แทนการ copy utility classes ซ้ำไปทุกหน้า

#28. Laravel + Tailwind Workflow

Workflow โดยทั่วไปคือ

Laravel
   |
   +-- Routes
   |
   +-- Controllers
   |
   +-- Models
   |
   +-- Blade Views
          |
          v
    Tailwind Classes
          |
          v
      app.css
          |
          v
        Vite
          |
          v
       Browser

Development

composer run dev

หรือ

php artisan serve
npm run dev

Production

npm run build

#29. Tailwind 3 กับ Tailwind 4 ต่างกันอย่างไร

ถ้าพบบทความเก่าอาจเห็น

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

นี่คือรูปแบบที่ใช้กันใน Tailwind 3

Tailwind 4 ใช้

@import "tailwindcss";

และใช้ CSS-first configuration มากขึ้น

ดังนั้นเมื่อทำ project ใหม่ควรตรวจสอบ version ก่อน copy configuration จาก tutorial เก่า

ตรวจ version ได้ด้วย

npm list tailwindcss

#30. Upgrade จาก Tailwind 3

Tailwind มี upgrade tool

npx @tailwindcss/upgrade

ควรทำใน Git branch ใหม่ก่อน เช่น

git checkout -b upgrade-tailwind-v4

แล้วจึงรัน

npx @tailwindcss/upgrade

Tailwind ระบุว่า upgrade tool สำหรับ v4 ต้องใช้ Node.js 20 หรือใหม่กว่า

#31. Best Practices

แนวทางที่แนะนำเมื่อนำ Tailwind มาใช้กับ Laravel:

  1. ใช้ Blade Components สำหรับ UI ที่ซ้ำกัน
  2. หลีกเลี่ยงการสร้าง dynamic class names ที่ Tailwind ตรวจไม่พบ
  3. ใช้ responsive utilities แทนการเขียน media query เองเมื่อเหมาะสม
  4. ใช้ @theme สำหรับ design tokens ของ application
  5. ใช้ npm run dev ระหว่างพัฒนา
  6. ใช้ npm run build ก่อน deploy production
  7. ใช้ Laravel Validation ร่วมกับ conditional Tailwind classes
  8. ใช้ @vite แทนการ link compiled file แบบ hard-code
  9. ตรวจ tutorial เก่าว่าเป็น Tailwind 3 หรือ Tailwind 4
  10. แยก component เช่น Button, Input, Card, Alert และ Modal เพื่อให้ UI สม่ำเสมอ

#32. ตัวอย่าง Mini Dashboard

<!DOCTYPE html>
<html lang="th">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Laravel Dashboard</title>

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

</head>

<body class="bg-gray-100">

<div class="min-h-screen">

    <nav class="bg-gray-900 text-white">

        <div
            class="mx-auto flex max-w-7xl
                   items-center justify-between
                   px-6 py-4"
        >

            <h1 class="text-xl font-bold">
                Laravel Admin
            </h1>

            <a
                href="/"
                class="text-gray-300 hover:text-white"
            >
                Home
            </a>

        </div>

    </nav>

    <main class="mx-auto max-w-7xl px-6 py-10">

        <h2 class="text-3xl font-bold text-gray-900">
            Dashboard
        </h2>

        <div
            class="mt-8 grid grid-cols-1
                   gap-6 md:grid-cols-2 lg:grid-cols-3"
        >

            <div class="rounded-2xl bg-white p-6 shadow">

                <p class="text-sm text-gray-500">
                    Users
                </p>

                <p class="mt-2 text-3xl font-bold">
                    1,250
                </p>

            </div>

            <div class="rounded-2xl bg-white p-6 shadow">

                <p class="text-sm text-gray-500">
                    Products
                </p>

                <p class="mt-2 text-3xl font-bold">
                    320
                </p>

            </div>

            <div class="rounded-2xl bg-white p-6 shadow">

                <p class="text-sm text-gray-500">
                    Orders
                </p>

                <p class="mt-2 text-3xl font-bold">
                    845
                </p>

            </div>

        </div>

    </main>

</div>

</body>
</html>

ตัวอย่างนี้ไม่ต้องเขียน custom CSS เพิ่มเลย แต่สามารถสร้าง layout ที่ responsive และมี spacing/style ที่เป็นระบบได้จาก utility classes

#33. สรุป

การใช้ Tailwind CSS กับ Laravel เหมาะสำหรับการสร้าง Web Application ที่ต้องการพัฒนา UI ได้รวดเร็วและควบคุม design ได้ละเอียด

Stack หลักคือ

Laravel
   +
Blade
   +
Tailwind CSS
   +
Vite

สำหรับ Laravel 13 project ใหม่ ขั้นตอนหลักสั้นมาก

laravel new my-project
cd my-project

npm install

composer run dev

จากนั้นสามารถใช้ Tailwind classes ใน Blade ได้ทันทีตาม configuration ของ project

สำหรับ project เดิมที่ยังไม่มี Tailwind ให้ติดตั้ง

npm install tailwindcss @tailwindcss/vite

ตั้งค่า Vite plugin และเพิ่ม

@import "tailwindcss";

ใน resources/css/app.css

จุดแข็งของ Laravel + Tailwind คือ Laravel รับผิดชอบ Backend, Routing, Validation, Database และ Blade Template ขณะที่ Tailwind ช่วยสร้าง UI แบบ responsive และ reusable ได้อย่างรวดเร็ว

#References