พื้นฐาน TailwindCSS

ยินดีด้วยครับ! หลังจากเรามีพื้นฐาน HTML CSS JS แล้ว คุณกำลังก้าวเข้าสู่โลกของ Modern Web Development อย่างเต็มตัว เพราะในยุค Agentic Coding นี้ AI จะเขียน Tailwind CSS ได้เก่งและแม่นยำมาก

Tailwind CSS คืออะไร?

ถ้า CSS ปกติคือการ "ตัดชุดใหม่ทุกครั้ง" (เขียนไฟล์แยก ตั้งชื่อ Class เอง) Tailwind ก็คือ "เสื้อผ้าสำเร็จรูป" (Utility-First) ที่มีป้ายบอกไซส์และสีไว้แล้ว คุณแค่หยิบมาแปะใน HTML ได้เลย ไม่ต้องสลับไฟล์ไปมาครับ

1. เปรียบเทียบ CSS ปกติ vs Tailwind

ลองดูความต่างเวลาเราจะสร้างปุ่ม 1 ปุ่มนะครับ:

แบบ CSS ปกติ:

<button class="my-button">ตกลง</button>

<style>
  .my-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
  }
</style>

แบบ Tailwind CSS: (ไม่ต้องเขียนไฟล์ CSS เลย!)

<button class="bg-blue-500 text-white px-5 py-2 rounded-md">
  ตกลง
</button>

2. โครงสร้างคำสั่งที่ต้องรู้ (Utility Classes)

คำสั่งของ Tailwind จะสื่อความหมายตรงตัว แบ่งเป็นหมวดหมู่หลักๆ ดังนี้ครับ:

Colors (สี): bg-red-500 (พื้นหลังแดง), text-green-600 (ตัวอักษรเขียว)
Spacing (ระยะห่าง): * p-4 (Padding ทุกด้าน)
- m-2 (Margin ทุกด้าน)
- mt-10 (Margin-Top ด้านบนอย่างเดียว)
Sizing (ขนาด): w-full (กว้างเต็มหน้าจอ), h-20 (สูง 20 หน่วย)
Typography (ตัวอักษร): text-xl (ตัวใหญ่), font-bold (ตัวหนา)
Layout (การจัดวาง): flex, grid, justify-center, items-center

3. หัวใจสำคัญ: Hover & Responsive

Tailwind ทำให้การทำเว็บที่รองรับมือถือ (Responsive) และลูกเล่น (Interactions) ง่ายขึ้นมากด้วย Prefix:

Hover: ใส่ hover: ข้างหน้าคำสั่ง
- hover:bg-blue-700 (พอเอาเมาส์ชี้ สีจะเข้มขึ้น)
Responsive: ใส่ md: หรือ lg: เพื่อบอกว่าให้ทำงานบนหน้าจอขนาดไหน
- w-full md:w-1/2 (มือถือกว้างเต็มหน้าจอ แต่ในคอมกว้างแค่ครึ่งเดียว)

4. ลองสร้าง Card สวยๆ ด้วย Tailwind

นี่คือตัวอย่างการรวมร่าง HTML + Tailwind เพื่อสร้างกล่องข้อความที่มีมิติครับ:

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-2xl overflow-hidden border border-gray-200">
  <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500"></div>
  
  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-800">Tailwind คืออนาคต</h2>
    <p class="mt-2 text-gray-600">
      เรียนรู้ง่าย เขียนเร็ว และ AI ชอบมาก เพราะมันไม่ต้องเดาชื่อ Class ที่เราตั้งเอง
    </p>
    
    <button class="mt-6 w-full bg-indigo-600 text-white py-2 rounded-xl hover:bg-indigo-700 transition">
      เริ่มเรียนรู้เลย
    </button>
  </div>
</div>

5. ทำไมยุค AI ถึงต้องใช้ Tailwind?

Context-Rich: AI ไม่ต้องสลับไปอ่านไฟล์ .css อื่นๆ มันเห็นแค่ไฟล์ HTML ก็รู้ทันทีว่าหน้าตาเว็บเป็นยังไง
No Naming Conflicts: ไม่ต้องทะเลาะกับ AI ว่าจะตั้งชื่อ Class ว่า container-main หรือ main-box ดี
Speed: คุณสามารถสั่ง AI ว่า "เอาปุ่มสีแดง ขอบมน มีเงา และเด้งเวลาชี้" AI จะเจน class="bg-red-500 rounded shadow hover:scale-105" มาให้ทันที