Bài 11. Tailwind với React, Next.js, PHP và Laravel

Một số khái niệm

Trong React, mỗi thành phần (Button, Card) chứa sẵn các lớp Tailwind và nhận props để chọn biến thể; mã HTML không còn dài vì bạn chỉ viết <Button variant="primary">. Với PHP, tương tự bằng hàm hoặc tệp include.

Thành phần React

// Button.jsx
import clsx from 'clsx';
const kieu = {
  primary: 'bg-green-600 text-white hover:bg-green-500',
  outline: 'ring-1 ring-slate-300 text-slate-800 hover:bg-slate-50',
  danger:  'bg-rose-600 text-white hover:bg-rose-500',
};
const co = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' };

export default function Button({ variant = 'primary', size = 'md', className, ...props }) {
  return (
    <button
      className={clsx('rounded-lg font-semibold transition disabled:opacity-50', kieu[variant], co[size], className)}
      {...props}
    />
  );
}
// <Button variant="outline" size="sm">Hủy</Button>

Thư viện tailwind-merge (twMerge) gộp lớp xung đột, ví dụ twMerge("px-4", "px-6") → "px-6", hữu ích khi cho phép ghi đè className.

Next.js

npx create-next-app@latest du-an --tailwind --app
# đã cài sẵn tailwindcss và @tailwindcss/postcss, app/globals.css có:  @import "tailwindcss";

Chi tiết dựng ứng dụng xem loạt Next.js.

PHP thuần và Laravel

<?php // the-khoa-hoc.php: thành phần dùng lại
function the_khoa_hoc(string $ten, int $so_bai, string $link): string {
  $ten = htmlspecialchars($ten);
  return <<<HTML
  <a href="/$link" class="block rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200 hover:ring-green-500">
    <h3 class="font-semibold">$ten</h3><p class="text-sm text-slate-500">$so_bai bài</p>
  </a>
  HTML;
}
foreach ($khoa_hoc as $k) echo the_khoa_hoc($k['ten'], $k['so_bai'], $k['link']);

# Laravel 11+ đã kèm Vite; cài Tailwind v4:
npm install tailwindcss @tailwindcss/vite
# vite.config.js thêm tailwindcss() vào plugins; resources/css/app.css:
#   @import "tailwindcss";
#   @source "../views";     (quét các tệp Blade)
# Blade: @vite('resources/css/app.css')

Với PHP thuần trên XAMPP, dùng Tailwind CLI (Bài 2) quét thư mục chứa tệp .php và xuất ra app.css.