Tailwind

ใน Next.js คุณเพิ่ม Tailwind โดยติดตั้งสาม package สร้าง tailwind.config.js เพิ่ม @tailwind directives ใน globals.css แล้ว import ไฟล์นั้นใน _app.tsx Astro มี official integration ที่ทำทุกอย่างนั้นด้วยคำสั่งเดียว

Playground note: Tailwind ต้องการ Vite integration ที่ติดตั้งในโปรเจกต์ — ไฟล์ .astro เดี่ยวใน StackBlitz ไม่สามารถโหลดได้โดยไม่มี setup ครบถ้วน บทเรียนนี้จึงเป็น code-only คัดลอก snippet ใดก็ได้ไปยัง local project ที่สร้างด้วย npx create astro@latest แล้วทำตามขั้นตอนด้านล่างเพื่อทดลอง

การเพิ่ม Tailwind ใน Astro

# inside your Astro project
npx astro add tailwind

CLI จะติดตั้ง @astrojs/tailwind และ tailwindcss สร้าง tailwind.config.mjs และเพิ่ม integration ใน astro.config.mjs ยืนยัน prompt ทั้งหมด

// astro.config.mjs  — after running the command
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

// tailwind.config.mjs  — auto-generated
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,ts,tsx,svelte,vue}'],
  theme: { extend: {} },
  plugins: [],
};

ไม่ต้อง import globals.css — integration จัดการให้อัตโนมัติ

การใช้ utility classes ใน .astro เทียบกับ React

// Card.tsx  (Next.js + Tailwind)
export default function Card({
  title,
  description,
  featured = false,
}: {
  title: string;
  description: string;
  featured?: boolean;
}) {
  return (
    <div className={`rounded-xl border p-6 shadow-sm ${
      featured ? 'border-indigo-500 bg-indigo-50' : 'border-slate-200 bg-white'
    }`}>
      <h2 className="mb-2 text-lg font-semibold text-slate-900">{title}</h2>
      <p className="text-sm text-slate-600">{description}</p>
    </div>
  );
}

---
// Card.astro  (Astro + Tailwind)
interface Props { title: string; description: string; featured?: boolean; }
const { title, description, featured = false } = Astro.props;
---
<div class:list={[
  "rounded-xl border p-6 shadow-sm",
  featured ? "border-indigo-500 bg-indigo-50" : "border-slate-200 bg-white",
]}>
  <h2 class="mb-2 text-lg font-semibold text-slate-900">{title}</h2>
  <p class="text-sm text-slate-600">{description}</p>
</div>

การเปลี่ยนแปลงที่จำเป็นเพียงอย่างเดียว: className กลายเป็น class ทุกอย่างอื่น — utility classes, responsive prefixes, dark-mode variants, arbitrary values — ทำงานเหมือนกันทุกประการ

ผสม Tailwind กับ scoped styles

คุณใช้ Tailwind utilities และ <style> block ในไฟล์ .astro เดียวกันได้ มีประโยชน์เมื่อ component ต้องการ complex selector (เช่น nth-child, ::before) ที่ Tailwind ไม่สามารถแสดงออกได้อย่างสวยงาม

<section class="py-24 px-6 bg-gradient-to-br from-indigo-600 to-purple-700">
  <h1 class="text-4xl font-bold text-white mb-4">Ship faster</h1>
  <p class="text-indigo-200 max-w-xl">Tailwind utilities + scoped styles in one component.</p>
</section>

<style>
  /* Scoped rule for a complex selector Tailwind cannot express */
  section > *:not(:last-child) { margin-bottom: 1rem; }
</style>

Tailwind กับ framework components (React / Vue ภายใน Astro)

Utility classes ทำงานได้กับ framework components ที่ render ภายใน Astro pages ด้วย ส่ง class เป็น class บน Astro wrapper หรือเป็น className ภายใน JSX ถ้าคุณอยู่ใน .tsx Island component

---
import Counter from './Counter.tsx';
---
<!-- Tailwind class on the Astro element wrapper -->
<div class="max-w-screen-lg mx-auto px-4">
  <!-- className inside the React Island -->
  <Counter className="mt-8" client:visible />
</div>