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 จะติดตั้ง tailwindcss และ Vite plugin ทางการ @tailwindcss/vite เชื่อมเข้ากับ astro.config.mjs ใต้ vite.plugins (Tailwind 4 เป็น Vite plugin ไม่ใช่ Astro integration — package เก่า @astrojs/tailwind เลิกใช้แล้ว เกี่ยวข้องกับโปรเจกต์ Tailwind 3 เท่านั้น) และสร้าง src/styles/global.css พร้อม Tailwind import ให้ ยืนยัน prompt ทั้งหมด

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

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

/* src/styles/global.css  — auto-generated */
@import "tailwindcss";

ไม่มี tailwind.config.mjs และไม่มี content glob ต้องดูแล — Tailwind 4 สแกนโปรเจกต์ให้อัตโนมัติ และตั้งค่าแบบ CSS-first (@theme { ... } ในไฟล์ CSS สำหรับ override design token) import stylesheet ครั้งเดียวใน layout ที่ใช้ร่วมกัน:

---
import '../styles/global.css';
---

การใช้ 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>