การทำงานกับ Tailwind ใน NextJS

ใน NextJS สำหรับการจัดสไตล์สามารถใช้ CSS framework Tailwind, ซึ่งมักใช้ร่วมกับ React มาดูกันว่าจะใช้งานมันอย่างไร

สำหรับการทำงานกับสไตล์ Tailwind ต้องการไฟล์สองไฟล์: tailwind.config.js และ postcss.config.js เนื่องจากในตอนติดตั้ง โปรเจกต์ เราได้เลือกข้อความ "ใช้ สไตล์ Tailwind" ไฟล์เหล่านี้ถูกสร้างขึ้นแล้ว ในโปรเจกต์ของเราและ อยู่ใน root ของมัน หากไม่มีไฟล์ดังกล่าว คุณจำเป็นต้องติดตั้ง Tailwind ตาม เอกสารอย่างเป็นทางการ

ลองเพิ่มตัวหนา และสีเหลืองให้กับข้อความจากย่อหน้าโดยใช้สไตล์ Tailwind ใน Tailwind CSS ตัวเลข ที่ใช้ในคลาสสำหรับสี หมายถึงความเข้มหรือเฉดสี ตัวเลขเหล่านี้อยู่ในช่วงตั้งแต่ 50 ถึง 900 สำหรับข้อความย่อหน้า ให้เลือก เฉดกลาง:

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    ข้อความ ข้อความ ข้อความ
  </p>;
}