[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-ep2-utility-first-tailwind-css-class-system-thai-all--*":3,"academy-blog-translations-s1zmcugr4s22kyl":74},{"data":4,"page":73,"perPage":73,"totalItems":73,"totalPages":73},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":67,"keywords":68,"locale":44,"published_at":69,"scheduled_at":13,"school_blog":65,"short_description":70,"slug":71,"status":63,"title":6,"updated":72,"updated_by":13,"views":66},"EP 2: Utility-First คืออะไร? เข้าใจระบบคลาสของ Tailwind แบบเซียน","sclblg987654321","school_blog_translations","\u003Cp>หลังจาก EP 1 ที่เราได้รู้จักกับ Tailwind CSS และเข้าใจว่าทำไมมันถึงได้รับความนิยม วันนี้เราจะมาลงลึกถึงหัวใจสำคัญของ Tailwind CSS ที่ทำให้มันแตกต่างจาก CSS Framework อื่นๆ นั่นคือ \"Utility-First\"\u003C\u002Fp>\u003Cp>คุณเคยสงสัยไหมว่าทำไม Tailwind CSS ถึงใช้แนวคิด Utility-First? มันดีกว่าการเขียน CSS แบบเดิมยังไง? และที่สำคัญ - เราจะจำคลาสเยอะขนาดนี้ได้ยังไง?\u003C\u002Fp>\u003Cp>วันนี้เราจะมาตอบคำถามเหล่านี้กัน พร้อมกับเทคนิคการจำคลาสแบบเซียน และเคล็ดลับที่จะทำให้คุณเขียน Tailwind CSS ได้อย่างมืออาชีพ!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>Utility-First คืออะไร? ทำไมถึงเป็นจุดเปลี่ยนของ CSS\u003C\u002Fh2>\u003Ch3>หลักการพื้นฐานของ Utility-First\u003C\u002Fh3>\u003Cp>Utility-First เป็นแนวคิดการออกแบบ CSS ที่ใช้คลาสขนาดเล็กที่มีหน้าที่เฉพาะเจาะจง (Single-purpose) มาประกอบกันเพื่อสร้างการออกแบบที่ซับซ้อน\u003C\u002Fp>\u003Cp>แทนที่จะเขียนแบบนี้:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* แบบเดิม (Component-First) *\u002F\n.hero-section {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  padding: 4rem 2rem;\n  text-align: center;\n  color: white;\n}\n\n.hero-title {\n  font-size: 3rem;\n  font-weight: bold;\n  margin-bottom: 1rem;\n  line-height: 1.2;\n}\n\n.hero-button {\n  background-color: #ffffff;\n  color: #667eea;\n  padding: 0.75rem 2rem;\n  border-radius: 0.5rem;\n  border: none;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n.hero-button:hover {\n  background-color: #f1f5f9;\n  transform: translateY(-2px);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>เราจะเขียนแบบนี้:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- แบบใหม่ (Utility-First) -->\n<section class=\"bg-gradient-to-br from-indigo-500 to-purple-600 py-16 px-8 text-center text-white\">\n  <h1 class=\"text-5xl font-bold mb-4 leading-tight\">\n    ยินดีต้อนรับสู่อนาคต\n  <\u002Fh1>\n  <button class=\"bg-white text-indigo-500 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 hover:-translate-y-0.5 transition-all duration-300\">\n    เริ่มต้นเลย\n  <\u002Fbutton>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ทำไม Utility-First ถึงแตกต่าง?\u003C\u002Fh3>\u003Cp>\u003Cstrong>1. ความรวดเร็วในการพัฒนา\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>ไม่ต้องคิดชื่อคลาส\u003C\u002Fli>\u003Cli>ไม่ต้องสลับไฟล์ไปมา\u003C\u002Fli>\u003Cli>เปลี่ยนแปลงได้ทันที\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>2. ความยืดหยุ่น\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>สร้างการออกแบบได้ไม่จำกัด\u003C\u002Fli>\u003Cli>ไม่ติดอยู่กับ Component ที่กำหนดไว้\u003C\u002Fli>\u003Cli>ปรับแต่งได้ในระดับรายละเอียด\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>3. ความสอดคล้อง\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>ใช้ Design System ที่สม่ำเสมอ\u003C\u002Fli>\u003Cli>ระบบสีและขนาดที่เป็นมาตรฐาน\u003C\u002Fli>\u003Cli>ลดความผิดพลาดในการออกแบบ\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ลองดูตัวอย่างการสร้างการ์ดที่ซับซ้อน:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden md:max-w-2xl\">\n  <div class=\"md:flex\">\n    <div class=\"md:shrink-0\">\n      <img class=\"h-48 w-full object-cover md:h-full md:w-48\" src=\"\u002Fimg\u002Fbuilding.jpg\" alt=\"Modern building architecture\">\n    <\u002Fdiv>\n    <div class=\"p-8\">\n      <div class=\"uppercase tracking-wide text-sm text-indigo-500 font-semibold\">Company retreat<\u002Fdiv>\n      <a href=\"#\" class=\"block mt-1 text-lg leading-tight font-medium text-black hover:underline\">Incredible accommodation for your team<\u002Fa>\n      <p class=\"mt-2 text-slate-500\">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.<\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ระบบการจัดหมวดหมู่คลาสใน Tailwind CSS\u003C\u002Fh2>\u003Ch3>1. Layout Classes - จัดการโครงสร้าง\u003C\u002Fh3>\u003Cp>\u003Cstrong>Container และ Display\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Container -->\n<div class=\"container mx-auto\">กำหนดความกว้างสูงสุดและจัดกึ่งกลาง<\u002Fdiv>\n\n<!-- Display -->\n<div class=\"block\">display: block<\u002Fdiv>\n<div class=\"inline-block\">display: inline-block<\u002Fdiv>\n<div class=\"inline\">display: inline<\u002Fdiv>\n<div class=\"flex\">display: flex<\u002Fdiv>\n<div class=\"grid\">display: grid<\u002Fdiv>\n<div class=\"hidden\">display: none<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Flexbox System\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Flex Direction -->\n<div class=\"flex flex-row\">แนวนอน (default)<\u002Fdiv>\n<div class=\"flex flex-col\">แนวตั้ง<\u002Fdiv>\n<div class=\"flex flex-row-reverse\">แนวนอนกลับด้าน<\u002Fdiv>\n\n<!-- Justify Content -->\n<div class=\"flex justify-start\">จัดชิดซ้าย<\u002Fdiv>\n<div class=\"flex justify-center\">จัดกึ่งกลาง<\u002Fdiv>\n<div class=\"flex justify-between\">กระจายห่าง<\u002Fdiv>\n<div class=\"flex justify-around\">กระจายรอบ<\u002Fdiv>\n\n<!-- Align Items -->\n<div class=\"flex items-start\">จัดชิดบน<\u002Fdiv>\n<div class=\"flex items-center\">จัดกึ่งกลางแนวตั้ง<\u002Fdiv>\n<div class=\"flex items-end\">จัดชิดล่าง<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Grid System\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Grid Template Columns -->\n<div class=\"grid grid-cols-1\">1 คอลัมน์<\u002Fdiv>\n<div class=\"grid grid-cols-2\">2 คอลัมน์<\u002Fdiv>\n<div class=\"grid grid-cols-3\">3 คอลัมน์<\u002Fdiv>\n<div class=\"grid grid-cols-12\">12 คอลัมน์<\u002Fdiv>\n\n<!-- Grid Gap -->\n<div class=\"grid grid-cols-3 gap-4\">ช่องว่าง 1rem<\u002Fdiv>\n<div class=\"grid grid-cols-3 gap-x-4 gap-y-2\">ช่องว่างแยกแนวนอน-ตั้ง<\u002Fdiv>\n\n<!-- Grid Span -->\n<div class=\"col-span-2\">ขยายครอบ 2 คอลัมน์<\u002Fdiv>\n<div class=\"row-span-3\">ขยายครอบ 3 แถว<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Spacing Classes - จัดการระยะห่าง\u003C\u002Fh3>\u003Cp>\u003Cstrong>Padding และ Margin System\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Padding (p = padding) -->\n<div class=\"p-4\">padding: 1rem (ทุกด้าน)<\u002Fdiv>\n<div class=\"px-4\">padding: 0 1rem (ซ้าย-ขวา)<\u002Fdiv>\n<div class=\"py-4\">padding: 1rem 0 (บน-ล่าง)<\u002Fdiv>\n<div class=\"pt-4\">padding-top: 1rem<\u002Fdiv>\n<div class=\"pr-4\">padding-right: 1rem<\u002Fdiv>\n<div class=\"pb-4\">padding-bottom: 1rem<\u002Fdiv>\n<div class=\"pl-4\">padding-left: 1rem<\u002Fdiv>\n\n<!-- Margin (m = margin) -->\n<div class=\"m-4\">margin: 1rem (ทุกด้าน)<\u002Fdiv>\n<div class=\"mx-auto\">margin: 0 auto (จัดกึ่งกลาง)<\u002Fdiv>\n<div class=\"my-8\">margin: 2rem 0 (บน-ล่าง)<\u002Fdiv>\n<div class=\"mt-4\">margin-top: 1rem<\u002Fdiv>\n<div class=\"-mt-4\">margin-top: -1rem (ค่าติดลบ)<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>ระบบขนาดมาตรฐาน\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">0 = 0px\n0.5 = 0.125rem (2px)\n1 = 0.25rem (4px)\n1.5 = 0.375rem (6px)\n2 = 0.5rem (8px)\n2.5 = 0.625rem (10px)\n3 = 0.75rem (12px)\n3.5 = 0.875rem (14px)\n4 = 1rem (16px)\n5 = 1.25rem (20px)\n6 = 1.5rem (24px)\n7 = 1.75rem (28px)\n8 = 2rem (32px)\n9 = 2.25rem (36px)\n10 = 2.5rem (40px)\n11 = 2.75rem (44px)\n12 = 3rem (48px)\n14 = 3.5rem (56px)\n16 = 4rem (64px)\n20 = 5rem (80px)\n24 = 6rem (96px)\n28 = 7rem (112px)\n32 = 8rem (128px)\n36 = 9rem (144px)\n40 = 10rem (160px)\n44 = 11rem (176px)\n48 = 12rem (192px)\n52 = 13rem (208px)\n56 = 14rem (224px)\n60 = 15rem (240px)\n64 = 16rem (256px)\n72 = 18rem (288px)\n80 = 20rem (320px)\n96 = 24rem (384px)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Color System - ระบบสี\u003C\u002Fh3>\u003Cp>\u003Cstrong>ประเภทสีหลัก\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Background Colors -->\n<div class=\"bg-red-500\">พื้นหลังสีแดง<\u002Fdiv>\n<div class=\"bg-blue-600\">พื้นหลังสีน้ำเงิน<\u002Fdiv>\n<div class=\"bg-green-400\">พื้นหลังสีเขียว<\u002Fdiv>\n\n<!-- Text Colors -->\n<p class=\"text-gray-800\">ข้อความสีเทาเข้ม<\u002Fp>\n<p class=\"text-indigo-500\">ข้อความสีม่วงน้ำเงิน<\u002Fp>\n\n<!-- Border Colors -->\n<div class=\"border border-red-300\">เส้นขอบสีแดงอ่อน<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>ระดับความเข้มของสี\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- สีเทา (Gray) -->\n<div class=\"bg-gray-50\">สีเทาอ่อนมาก<\u002Fdiv>\n<div class=\"bg-gray-100\">สีเทาอ่อน<\u002Fdiv>\n<div class=\"bg-gray-200\">สีเทาอ่อนปานกลาง<\u002Fdiv>\n<div class=\"bg-gray-300\">สีเทาปานกลาง<\u002Fdiv>\n<div class=\"bg-gray-400\">สีเทาปานกลางเข้ม<\u002Fdiv>\n<div class=\"bg-gray-500\">สีเทาเข้ม<\u002Fdiv>\n<div class=\"bg-gray-600\">สีเทาเข้มมาก<\u002Fdiv>\n<div class=\"bg-gray-700\">สีเทาเข้มมากพิเศษ<\u002Fdiv>\n<div class=\"bg-gray-800\">สีเทาเข้มที่สุด<\u002Fdiv>\n<div class=\"bg-gray-900\">สีเทาดำ<\u002Fdiv>\n\n<!-- สีฟ้า (Blue) -->\n<div class=\"bg-blue-50\">สีฟ้าอ่อนมาก<\u002Fdiv>\n<div class=\"bg-blue-100\">สีฟ้าอ่อน<\u002Fdiv>\n<div class=\"bg-blue-500\">สีฟ้ามาตรฐาน<\u002Fdiv>\n<div class=\"bg-blue-900\">สีฟ้าเข้มที่สุด<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>สีพิเศษและ Gradient\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- สีขาว-ดำ -->\n<div class=\"bg-white\">พื้นหลังสีขาว<\u002Fdiv>\n<div class=\"bg-black\">พื้นหลังสีดำ<\u002Fdiv>\n<div class=\"bg-transparent\">พื้นหลังโปร่งใส<\u002Fdiv>\n\n<!-- Gradient -->\n<div class=\"bg-gradient-to-r from-purple-500 to-pink-500\">Gradient ซ้าย-ขวา<\u002Fdiv>\n<div class=\"bg-gradient-to-br from-green-400 to-blue-600\">Gradient มุมล่างขวา<\u002Fdiv>\n<div class=\"bg-gradient-to-t from-yellow-400 via-red-500 to-pink-500\">Gradient 3 สี<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>4. Typography Classes - จัดการข้อความ\u003C\u002Fh3>\u003Cp>\u003Cstrong>ขนาดและน้ำหนักตัวอักษร\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Font Size -->\n<p class=\"text-xs\">12px - ข้อความเล็กที่สุด<\u002Fp>\n<p class=\"text-sm\">14px - ข้อความเล็ก<\u002Fp>\n<p class=\"text-base\">16px - ข้อความปกติ (default)<\u002Fp>\n<p class=\"text-lg\">18px - ข้อความใหญ่<\u002Fp>\n<p class=\"text-xl\">20px - ข้อความใหญ่มาก<\u002Fp>\n<p class=\"text-2xl\">24px - หัวข้อเล็ก<\u002Fp>\n<p class=\"text-3xl\">30px - หัวข้อกลาง<\u002Fp>\n<p class=\"text-4xl\">36px - หัวข้อใหญ่<\u002Fp>\n<p class=\"text-5xl\">48px - หัวข้อใหญ่มาก<\u002Fp>\n<p class=\"text-6xl\">60px - หัวข้อยักษ์<\u002Fp>\n\n<!-- Font Weight -->\n<p class=\"font-thin\">100 - บางมาก<\u002Fp>\n<p class=\"font-light\">300 - บาง<\u002Fp>\n<p class=\"font-normal\">400 - ปกติ<\u002Fp>\n<p class=\"font-medium\">500 - กลาง<\u002Fp>\n<p class=\"font-semibold\">600 - หนา<\u002Fp>\n<p class=\"font-bold\">700 - หนามาก<\u002Fp>\n<p class=\"font-black\">900 - หนาที่สุด<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>การจัดตำแหน่งและระยะห่าง\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Text Alignment -->\n<p class=\"text-left\">จัดชิดซ้าย<\u002Fp>\n<p class=\"text-center\">จัดกึ่งกลาง<\u002Fp>\n<p class=\"text-right\">จัดชิดขวา<\u002Fp>\n<p class=\"text-justify\">จัดเต็มแถว<\u002Fp>\n\n<!-- Line Height -->\n<p class=\"leading-tight\">ระยะห่างบรรทัดแน่น<\u002Fp>\n<p class=\"leading-normal\">ระยะห่างบรรทัดปกติ<\u002Fp>\n<p class=\"leading-loose\">ระยะห่างบรรทัดหลวม<\u002Fp>\n\n<!-- Letter Spacing -->\n<p class=\"tracking-tight\">ระยะห่างตัวอักษรแน่น<\u002Fp>\n<p class=\"tracking-normal\">ระยะห่างตัวอักษรปกติ<\u002Fp>\n<p class=\"tracking-wide\">ระยะห่างตัวอักษรกว้าง<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>การตกแต่งข้อความ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Text Decoration -->\n<p class=\"underline\">ขีดเส้นใต้<\u002Fp>\n<p class=\"line-through\">ขีดฆ่า<\u002Fp>\n<p class=\"no-underline\">ไม่มีขีดเส้นใต้<\u002Fp>\n\n<!-- Text Transform -->\n<p class=\"uppercase\">ตัวพิมพ์ใหญ่ทั้งหมด<\u002Fp>\n<p class=\"lowercase\">ตัวพิมพ์เล็กทั้งหมด<\u002Fp>\n<p class=\"capitalize\">ตัวแรกของแต่ละคำพิมพ์ใหญ่<\u002Fp>\n\n<!-- Text Style -->\n<p class=\"italic\">ตัวเอียง<\u002Fp>\n<p class=\"not-italic\">ไม่เอียง<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>5. Border และ Radius Classes\u003C\u002Fh3>\u003Cp>\u003Cstrong>เส้นขอบ (Border)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Border Width -->\n<div class=\"border\">เส้นขอบ 1px ทุกด้าน<\u002Fdiv>\n<div class=\"border-2\">เส้นขอบ 2px ทุกด้าน<\u002Fdiv>\n<div class=\"border-4\">เส้นขอบ 4px ทุกด้าน<\u002Fdiv>\n<div class=\"border-t\">เส้นขอบด้านบนเท่านั้น<\u002Fdiv>\n<div class=\"border-r\">เส้นขอบด้านขวาเท่านั้น<\u002Fdiv>\n<div class=\"border-b\">เส้นขอบด้านล่างเท่านั้น<\u002Fdiv>\n<div class=\"border-l\">เส้นขอบด้านซ้ายเท่านั้น<\u002Fdiv>\n\n<!-- Border Style -->\n<div class=\"border border-solid\">เส้นทึบ<\u002Fdiv>\n<div class=\"border border-dashed\">เส้นประ<\u002Fdiv>\n<div class=\"border border-dotted\">เส้นจุด<\u002Fdiv>\n<div class=\"border-none\">ไม่มีเส้นขอบ<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>มุมโค้ง (Border Radius)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Rounded Corners -->\n<div class=\"rounded-none\">ไม่มีมุมโค้ง<\u002Fdiv>\n<div class=\"rounded-sm\">มุมโค้งเล็ก (2px)<\u002Fdiv>\n<div class=\"rounded\">มุมโค้งปกติ (4px)<\u002Fdiv>\n<div class=\"rounded-md\">มุมโค้งกลาง (6px)<\u002Fdiv>\n<div class=\"rounded-lg\">มุมโค้งใหญ่ (8px)<\u002Fdiv>\n<div class=\"rounded-xl\">มุมโค้งใหญ่มาก (12px)<\u002Fdiv>\n<div class=\"rounded-full\">มุมโค้งเต็ม (วงกลม)<\u002Fdiv>\n\n<!-- Specific Corners -->\n<div class=\"rounded-t-lg\">มุมโค้งด้านบน<\u002Fdiv>\n<div class=\"rounded-r-lg\">มุมโค้งด้านขวา<\u002Fdiv>\n<div class=\"rounded-tl-lg\">มุมโค้งบนซ้าย<\u002Fdiv>\n<div class=\"rounded-tr-lg\">มุมโค้งบนขวา<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>เทคนิคการจำคลาสแบบเซียน\u003C\u002Fh2>\u003Ch3>1. จำตามรูปแบบ (Pattern Recognition)\u003C\u002Fh3>\u003Cp>\u003Cstrong>รูปแบบการตั้งชื่อ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">[property]-[direction]-[size]\n[property]-[color]-[shade]\n[breakpoint]:[property]-[value]\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>ตัวอย่าง:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>mt-4\u003C\u002Fcode> = margin-top: 1rem\u003C\u002Fli>\u003Cli>\u003Ccode>px-6\u003C\u002Fcode> = padding-left: 1.5rem, padding-right: 1.5rem\u003C\u002Fli>\u003Cli>\u003Ccode>bg-blue-500\u003C\u002Fcode> = background-color: #3b82f6\u003C\u002Fli>\u003Cli>\u003Ccode>md:text-lg\u003C\u002Fcode> = @media (min-width: 768px) { font-size: 1.125rem }\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. กลุ่มคลาสที่ใช้บ่อย\u003C\u002Fh3>\u003Cp>\u003Cstrong>Layout Combo\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- กึ่งกลางทั้งหมด -->\n<div class=\"flex items-center justify-center\">\n\n<!-- การ์ดพื้นฐาน -->\n<div class=\"bg-white rounded-lg shadow-md p-6\">\n\n<!-- Container responsive -->\n<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n\n<!-- Grid responsive -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Typography Combo\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- หัวข้อหลัก -->\n<h1 class=\"text-3xl md:text-4xl font-bold text-gray-900\">\n\n<!-- ข้อความรอง -->\n<p class=\"text-lg text-gray-600 leading-relaxed\">\n\n<!-- ปุ่ม -->\n<button class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. เทคนิค Mnemonics (การจำด้วยสัญลักษณ์)\u003C\u002Fh3>\u003Cp>\u003Cstrong>ทิศทาง (Direction)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>t\u003C\u002Fcode> = Top (บน)\u003C\u002Fli>\u003Cli>\u003Ccode>r\u003C\u002Fcode> = Right (ขวา)\u003C\u002Fli>\u003Cli>\u003Ccode>b\u003C\u002Fcode> = Bottom (ล่าง)\u003C\u002Fli>\u003Cli>\u003Ccode>l\u003C\u002Fcode> = Left (ซ้าย)\u003C\u002Fli>\u003Cli>\u003Ccode>x\u003C\u002Fcode> = X-axis (ซ้าย-ขวา)\u003C\u002Fli>\u003Cli>\u003Ccode>y\u003C\u002Fcode> = Y-axis (บน-ล่าง)\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>ขนาด (Size)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>0\u003C\u002Fcode> = ไม่มี\u003C\u002Fli>\u003Cli>\u003Ccode>1-3\u003C\u002Fcode> = เล็ก\u003C\u002Fli>\u003Cli>\u003Ccode>4-6\u003C\u002Fcode> = กลาง\u003C\u002Fli>\u003Cli>\u003Ccode>8-12\u003C\u002Fcode> = ใหญ่\u003C\u002Fli>\u003Cli>\u003Ccode>16+\u003C\u002Fcode> = ใหญ่มาก\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>4. สร้างระบบจำของตัวเอง\u003C\u002Fh3>\u003Cp>\u003Cstrong>การจัดกลุ่มตามหน้าที่\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ใช้ @apply เพื่อสร้างคลาสกลุ่ม *\u002F\n@layer components {\n  .layout-center { \n    @apply flex items-center justify-center; \n  }\n  \n  .layout-container { \n    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; \n  }\n  \n  .text-heading { \n    @apply text-3xl font-bold text-gray-900; \n  }\n  \n  .text-body { \n    @apply text-base text-gray-600 leading-relaxed; \n  }\n  \n  .btn-primary { \n    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-3 rounded-lg transition-colors; \n  }\n  \n  .card-basic { \n    @apply bg-white rounded-lg shadow-md p-6; \n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Responsive Design ด้วย Breakpoint System\u003C\u002Fh2>\u003Ch3>ระบบ Breakpoint ใน Tailwind\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Default (Mobile First) -->\n<div class=\"text-sm\">ขนาดเล็กในทุกขนาดหน้าจอ<\u002Fdiv>\n\n<!-- sm: >= 640px -->\n<div class=\"text-sm sm:text-base\">เล็กในมือถือ, ปกติในแท็บเล็ต<\u002Fdiv>\n\n<!-- md: >= 768px -->\n<div class=\"text-sm md:text-lg\">เล็กในมือถือ, ใหญ่ในแท็บเล็ต<\u002Fdiv>\n\n<!-- lg: >= 1024px -->\n<div class=\"text-sm lg:text-xl\">เล็กในมือถือ, ใหญ่มากใน Desktop<\u002Fdiv>\n\n<!-- xl: >= 1280px -->\n<div class=\"text-sm xl:text-2xl\">เล็กในมือถือ, ใหญ่มากใน Desktop ใหญ่<\u002Fdiv>\n\n<!-- 2xl: >= 1536px -->\n<div class=\"text-sm 2xl:text-3xl\">เล็กในมือถือ, ยักษ์มากใน Desktop ยักษ์<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ตัวอย่างการใช้งานจริง\u003C\u002Fh3>\u003Cp>\u003Cstrong>Navigation Responsive\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><nav class=\"bg-white shadow-lg\">\n  <div class=\"max-w-7xl mx-auto px-4\">\n    <div class=\"flex justify-between items-center py-4\">\n      <!-- Logo -->\n      <div class=\"flex items-center\">\n        <img class=\"h-8 w-auto\" src=\"\u002Flogo.svg\" alt=\"Logo\">\n      <\u002Fdiv>\n      \n      <!-- Desktop Menu -->\n      <div class=\"hidden md:flex space-x-8\">\n        <a href=\"#\" class=\"text-gray-600 hover:text-gray-900\">Home<\u002Fa>\n        <a href=\"#\" class=\"text-gray-600 hover:text-gray-900\">About<\u002Fa>\n        <a href=\"#\" class=\"text-gray-600 hover:text-gray-900\">Contact<\u002Fa>\n      <\u002Fdiv>\n      \n      <!-- Mobile Menu Button -->\n      <div class=\"md:hidden\">\n        <button class=\"text-gray-600 hover:text-gray-900 focus:outline-none\">\n          <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" \u002F>\n          <\u002Fsvg>\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fnav>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Hero Section Responsive\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><section class=\"bg-gradient-to-r from-blue-600 to-purple-600 text-white\">\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24\">\n    <div class=\"text-center\">\n      <h1 class=\"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6\">\n        สร้างเว็บไซต์สุดเจ๋ง\n      <\u002Fh1>\n      <p class=\"text-lg sm:text-xl md:text-2xl mb-6 sm:mb-8 max-w-3xl mx-auto\">\n        ด้วย Tailwind CSS Framework ที่ทำให้การพัฒนาเว็บไซต์เร็วขึ้น 10 เท่า\n      <\u002Fp>\n      <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n        <button class=\"bg-white text-blue-600 px-6 sm:px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors\">\n          เริ่มต้นฟรี\n        <\u002Fbutton>\n        <button class=\"border-2 border-white text-white px-6 sm:px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition-colors\">\n          ดูตัวอย่าง\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>State Variants - จัดการสถานะต่างๆ\u003C\u002Fh2>\u003Ch3>Hover, Focus, และ Active States\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Hover Effects -->\n<button class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded\">\n  Hover เปลี่ยนสี\n<\u002Fbutton>\n\n<div class=\"transform hover:scale-105 transition-transform\">\n  Hover ขยายขนาด\n<\u002Fdiv>\n\n<a href=\"#\" class=\"text-blue-500 hover:text-blue-700 hover:underline\">\n  Hover เปลี่ยนสีและขีดเส้นใต้\n<\u002Fa>\n\n<!-- Focus Effects -->\n<input class=\"border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 px-3 py-2 rounded\" \n       type=\"text\" placeholder=\"Focus เปลี่ยนสี\">\n\n<button class=\"bg-green-500 focus:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-200 text-white px-4 py-2 rounded\">\n  Focus Button\n<\u002Fbutton>\n\n<!-- Active Effects -->\n<button class=\"bg-red-500 active:bg-red-700 text-white px-4 py-2 rounded\">\n  Active เปลี่ยนสี\n<\u002Fbutton>\n\n<!-- Group Hover (เอฟเฟ็กต์เมื่อ hover parent) -->\n<div class=\"group bg-white p-6 rounded-lg hover:bg-gray-50\">\n  <h3 class=\"text-gray-900 group-hover:text-blue-600\">หัวข้อ<\u002Fh3>\n  <p class=\"text-gray-600 group-hover:text-gray-700\">รายละเอียด<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Responsive States\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Responsive Hover (hover เฉพาะใน desktop) -->\n<button class=\"bg-blue-500 md:hover:bg-blue-600 text-white px-4 py-2 rounded\">\n  Hover เฉพาะ Desktop\n<\u002Fbutton>\n\n<!-- Combined Responsive + State -->\n<div class=\"text-sm md:text-base hover:text-lg md:hover:text-xl\">\n  ขนาดเปลี่ยนตาม breakpoint และ hover\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Dark Mode Support\u003C\u002Fh3>\u003Cp>\u003Cstrong>⚠️ หมายเหตุ:\u003C\u002Fstrong> Dark Mode ต้องเปิดใช้งานใน \u003Ccode>tailwind.config.js\u003C\u002Fcode> ก่อน:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  darkMode: 'class', \u002F\u002F หรือ 'media'\n  \u002F\u002F ... config อื่นๆ\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ธีมมืด-สว่าง -->\n<div class=\"bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6\">\n  <h2 class=\"text-xl font-bold\">หัวข้อ<\u002Fh2>\n  <p class=\"text-gray-600 dark:text-gray-300\">เนื้อหาที่รองรับ Dark Mode<\u002Fp>\n<\u002Fdiv>\n\n<!-- ปุ่มสำหรับ Dark Mode -->\n<button class=\"bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded\">\n  ปุ่ม Dark Mode\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Animation และ Transition Classes\u003C\u002Fh2>\u003Ch3>Transition Effects\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Transition พื้นฐาน -->\n<div class=\"transition-colors duration-300 bg-blue-500 hover:bg-blue-600\">\n  เปลี่ยนสีอย่างนุ่มนวล\n<\u002Fdiv>\n\n<div class=\"transition-all duration-500 transform hover:scale-110 hover:rotate-3\">\n  เปลี่ยนทุกอย่าง + หมุน + ขยาย\n<\u002Fdiv>\n\n<!-- Transition เฉพาะ Property -->\n<div class=\"transition-opacity duration-300 opacity-50 hover:opacity-100\">\n  เปลี่ยนความโปร่งใส\n<\u002Fdiv>\n\n<div class=\"transition-transform duration-200 hover:-translate-y-1\">\n  เลื่อนขึ้น\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Animation Classes\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Animation พื้นฐาน -->\n<div class=\"animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full\">\n  หมุนไม่หยุด\n<\u002Fdiv>\n\n<div class=\"animate-pulse bg-gray-200 h-4 rounded\">\n  กระพริบ\n<\u002Fdiv>\n\n<div class=\"animate-bounce\">\n  เด้งๆ\n<\u002Fdiv>\n\n<!-- Custom Animation ด้วย arbitrary values (JIT Mode) -->\n<div class=\"animate-[fadeIn_0.5s_ease-in-out]\">\n  Fade In Animation (ต้องกำหนด @keyframes fadeIn เอง)\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Transform Classes\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Scale (ขยาย-ย่อ) -->\n<div class=\"transform scale-50\">ย่อเหลือ 50%<\u002Fdiv>\n<div class=\"transform scale-110 hover:scale-125\">ขยาย 110% และ hover ขยาย 125%<\u002Fdiv>\n\n<!-- Rotate (หมุน) -->\n<div class=\"transform rotate-45\">หมุน 45 องศา<\u002Fdiv>\n<div class=\"transform hover:rotate-180 transition-transform\">หมุนเมื่อ hover<\u002Fdiv>\n\n<!-- Translate (เลื่อน) -->\n<div class=\"transform translate-x-4\">เลื่อนขวา 1rem<\u002Fdiv>\n<div class=\"transform -translate-y-2\">เลื่อนขึ้น 0.5rem<\u002Fdiv>\n<div class=\"transform hover:translate-x-2 hover:-translate-y-1 transition-transform\">\n  เลื่อนขวาและขึ้นเมื่อ hover\n<\u002Fdiv>\n\n<!-- Skew (เอียง) -->\n<div class=\"transform skew-x-12\">เอียงแนวนอน<\u002Fdiv>\n<div class=\"transform skew-y-6\">เอียงแนวตั้ง<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>เทคนิคการใช้งานขั้นสูง\u003C\u002Fh2>\u003Ch3>1. JIT Mode และ Arbitrary Values\u003C\u002Fh3>\u003Cp>\u003Cstrong>ใช้ค่าที่กำหนดเอง (JIT Mode เปิดอยู่ตามค่าเริ่มต้น)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ขนาดและระยะห่างที่กำหนดเอง -->\n<div class=\"w-[350px]\">ความกว้าง 350px<\u002Fdiv>\n<div class=\"h-[calc(100vh-64px)]\">ความสูงคำนวณจาก viewport<\u002Fdiv>\n<div class=\"mt-[18px]\">margin-top 18px<\u002Fdiv>\n\n<!-- สีที่กำหนดเอง -->\n<div class=\"bg-[#bada55]\">สีพื้นหลังที่กำหนดเอง<\u002Fdiv>\n<div class=\"text-[rgb(123,45,67)]\">สีข้อความ RGB<\u002Fdiv>\n\n<!-- ขนาดตัวอักษรที่กำหนดเอง -->\n<div class=\"text-[22px]\">ขนาดตัวอักษร 22px<\u002Fdiv>\n<div class=\"text-[1.375rem]\">ขนาดตัวอักษร 1.375rem<\u002Fdiv>\n\n<!-- Grid columns ที่กำหนดเอง -->\n<div class=\"grid-cols-[1fr_2fr_1fr]\">Grid 3 คอลัมน์ แบบ fraction<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>⚠️ คำเตือน:\u003C\u002Fstrong> Arbitrary values จะทำงานได้เฉพาะเมื่อ JIT Mode เปิดใช้งาน\u003C\u002Fp>\u003Ch3>2. การใช้ CSS Variables\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ต้องมี CSS Variables กำหนดไว้ก่อน -->\n<style>\n:root {\n  --primary-color: #3b82f6;\n  --secondary-color: #64748b;\n}\n<\u002Fstyle>\n\n<div class=\"bg-[var(--primary-color)]\">ใช้ CSS Variable<\u002Fdiv>\n<div class=\"text-[var(--secondary-color)]\">ข้อความใช้ CSS Variable<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. การใช้ Pseudo-elements และ Pseudo-selectors\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- First และ Last Child -->\n<ul>\n  <li class=\"first:mt-0 last:mb-0 mt-4 mb-4\">รายการที่ 1<\u002Fli>\n  <li class=\"first:mt-0 last:mb-0 mt-4 mb-4\">รายการที่ 2<\u002Fli>\n  <li class=\"first:mt-0 last:mb-0 mt-4 mb-4\">รายการที่ 3<\u002Fli>\n<\u002Ful>\n\n<!-- Odd และ Even -->\n<table class=\"w-full\">\n  <tbody>\n    <tr class=\"odd:bg-gray-50 even:bg-white\">\n      <td class=\"px-4 py-2\">แถวคี่จะมีพื้นหลังสีเทา<\u002Ftd>\n    <\u002Ftr>\n    <tr class=\"odd:bg-gray-50 even:bg-white\">\n      <td class=\"px-4 py-2\">แถวคู่จะมีพื้นหลังสีขาว<\u002Ftd>\n    <\u002Ftr>\n  <\u002Ftbody>\n<\u002Ftable>\n\n<!-- Disabled State -->\n<button class=\"bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50\" \n        disabled>\n  Disabled Button\n<\u002Fbutton>\n\n<!-- Before และ After (ต้องใช้ content) -->\n<div class=\"before:content-['→'] before:mr-2 after:content-['←'] after:ml-2\">\n  ข้อความมีเครื่องหมายก่อนหลัง\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ข้อผิดพลาดที่ควรหลีกเลี่ยง\u003C\u002Fh2>\u003Ch3>1. การใช้คลาสซ้ำซ้อน\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ ผิด: ใช้คลาสที่ซ้ำกัน -->\n<div class=\"p-4 px-6 py-2\">\n  <!-- px-6 และ py-2 จะ override p-4 -->\n  <!-- ผลลัพธ์: padding: 0.5rem 1.5rem (ไม่ใช่ 1rem ทั้งหมด) -->\n<\u002Fdiv>\n\n<!-- ✅ ถูก: ใช้คลาสที่เฉพาะเจาะจง -->\n<div class=\"px-6 py-2\">\n  <!-- ใช้เฉพาะ px และ py ตามที่ต้องการ -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. ไม่เข้าใจลำดับความสำคัญของคลาส\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ ปัญหา: คลาสหลังจะ override คลาสแรก -->\n<div class=\"text-red-500 text-blue-500\">\n  <!-- จะเป็นสีน้ำเงิน เพราะ text-blue-500 มาทีหลัง -->\n<\u002Fdiv>\n\n<!-- ✅ แก้ไข: ใช้คลาสเดียว -->\n<div class=\"text-blue-500\">\n  <!-- ชัดเจนว่าเป็นสีน้ำเงิน -->\n<\u002Fdiv>\n\n<!-- ✅ หรือใช้ important (หลีกเลี่ยงถ้าไม่จำเป็น) -->\n<div class=\"!text-red-500 text-blue-500\">\n  <!-- จะเป็นสีแดง เพราะมี !important -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. การลืมใช้ Responsive Classes\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ ไม่ responsive -->\n<div class=\"grid grid-cols-4 gap-4\">\n  <!-- 4 คอลัมน์ในทุกขนาดหน้าจอ (เกินไปสำหรับมือถือ) -->\n<\u002Fdiv>\n\n<!-- ✅ Responsive -->\n<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n  <!-- 1 คอลัมน์ในมือถือ, 2 ในแท็บเล็ต, 4 ใน desktop -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>4. การไม่ใช้ Transition\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ เปลี่ยนแปลงแบบกะทันหัน -->\n<button class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded\">\n  Button แบบกะทันหัน\n<\u002Fbutton>\n\n<!-- ✅ เปลี่ยนแปลงแบบนุ่มนวล -->\n<button class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors duration-200\">\n  Button แบบนุ่มนวล\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>เครื่องมือช่วยเหลือและ Resources\u003C\u002Fh2>\u003Ch3>1. Browser Extensions\u003C\u002Fh3>\u003Cp>\u003Cstrong>Tailwind CSS DevTools\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>ตรวจสอบคลาสที่ใช้\u003C\u002Fli>\u003Cli>แสดงค่า CSS ที่แท้จริง\u003C\u002Fli>\u003Cli>Debug Responsive breakpoints\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>2. VS Code Extensions\u003C\u002Fh3>\u003Cp>\u003Cstrong>Tailwind CSS IntelliSense\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">\u002F\u002F settings.json\n{\n  \"tailwindCSS.includeLanguages\": {\n    \"html\": \"html\",\n    \"javascript\": \"javascript\",\n    \"vue\": \"vue\",\n    \"react\": \"javascriptreact\",\n    \"typescript\": \"typescript\"\n  },\n  \"tailwindCSS.classAttributes\": [\n    \"class\",\n    \"className\",\n    \"classList\",\n    \"ngClass\"\n  ],\n  \"editor.quickSuggestions\": {\n    \"strings\": true\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Headwind (Class Sorter)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>จัดเรียงคลาสให้เป็นระเบียบ\u003C\u002Fli>\u003Cli>ทำให้โค้ดอ่านง่ายขึ้น\u003C\u002Fli>\u003Cli>ใช้ลำดับมาตรฐานของ Tailwind\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>3. Online Tools\u003C\u002Fh3>\u003Cp>\u003Cstrong>Tailwind CSS Playground\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fplay.tailwindcss.com\u002F\">https:\u002F\u002Fplay.tailwindcss.com\u003C\u002Fa>\u003C\u002Fli>\u003Cli>ทดลองเขียนออนไลน์\u003C\u002Fli>\u003Cli>ไม่ต้องติดตั้งอะไร\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>Tailwind UI Components\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Ftailwindui.com\u002F\">https:\u002F\u002Ftailwindui.com\u003C\u002Fa>\u003C\u002Fli>\u003Cli>ตัวอย่าง Component สำเร็จรูป\u003C\u002Fli>\u003Cli>เรียนรู้จากโค้ดคุณภาพสูง\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>Official Documentation\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\">https:\u002F\u002Ftailwindcss.com\u002Fdocs\u003C\u002Fa>\u003C\u002Fli>\u003Cli>Documentation ที่ครบถ้วน\u003C\u002Fli>\u003Cli>มีตัวอย่างทุกคลาส\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>โปรเจ็กต์ปฏิบัติ: สร้าง Feature Card\u003C\u002Fh2>\u003Cp>มาลองสร้าง Component ที่ครอบคลุมการใช้งานหลายๆ เทคนิค:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Feature Card Example<\u002Ftitle>\n    <script src=\"https:\u002F\u002Fcdn.tailwindcss.com\"><\u002Fscript>\n<\u002Fhead>\n<body class=\"bg-gray-50 p-8\">\n\n<div class=\"max-w-md mx-auto\">\n  <!-- Feature Card -->\n  <div class=\"group bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100\">\n    \n    <!-- Header Image -->\n    <div class=\"relative h-48 bg-gradient-to-br from-blue-500 to-purple-600 overflow-hidden\">\n      <div class=\"absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-10 transition-all duration-300\"><\u002Fdiv>\n      <div class=\"relative h-full flex items-center justify-center\">\n        <div class=\"w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300\">\n          <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" \u002F>\n          <\u002Fsvg>\n        <\u002Fdiv>\n      <\u002Fdiv>\n    <\u002Fdiv>\n\n    <!-- Content -->\n    <div class=\"p-6\">\n      <div class=\"flex items-center justify-between mb-3\">\n        <span class=\"inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full\">\n          เทคโนโลยี\n        <\u002Fspan>\n        <span class=\"text-sm text-gray-500\">2 นาทีในการอ่าน<\u002Fspan>\n      <\u002Fdiv>\n\n      <h3 class=\"text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200\">\n        ประสิทธิภาพสูงสุด\n      <\u002Fh3>\n\n      <p class=\"text-gray-600 text-sm leading-relaxed mb-4\">\n        เพิ่มความเร็วและประสิทธิภาพของเว็บไซต์ด้วยเทคนิคที่ทันสมัย รองรับการใช้งานบนทุกอุปกรณ์\n      <\u002Fp>\n\n      <!-- Stats -->\n      <div class=\"flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg\">\n        <div class=\"text-center\">\n          <div class=\"text-lg font-bold text-gray-900\">99%<\u002Fdiv>\n          <div class=\"text-xs text-gray-500\">Uptime<\u002Fdiv>\n        <\u002Fdiv>\n        <div class=\"text-center\">\n          <div class=\"text-lg font-bold text-gray-900\">< 1s<\u002Fdiv>\n          <div class=\"text-xs text-gray-500\">Loading<\u002Fdiv>\n        <\u002Fdiv>\n        <div class=\"text-center\">\n          <div class=\"text-lg font-bold text-gray-900\">A+<\u002Fdiv>\n          <div class=\"text-xs text-gray-500\">Security<\u002Fdiv>\n        <\u002Fdiv>\n      <\u002Fdiv>\n\n      <!-- Action Buttons -->\n      <div class=\"flex gap-2\">\n        <button class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\">\n          เรียนรู้เพิ่ม\n        <\u002Fbutton>\n        <button class=\"p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" \u002F>\n          <\u002Fsvg>\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n\n    <!-- Footer -->\n    <div class=\"px-6 py-3 bg-gray-50 border-t border-gray-100\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center space-x-2\">\n          <div class=\"w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center\">\n            <span class=\"text-xs font-bold text-white\">T<\u002Fspan>\n          <\u002Fdiv>\n          <span class=\"text-sm text-gray-600\">โดย Team Tailwind<\u002Fspan>\n        <\u002Fdiv>\n        <span class=\"text-xs text-gray-400\">อัพเดทเมื่อ 2 ชม. ที่แล้ว<\u002Fspan>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>สรุป\u003C\u002Fh2>\u003Cp>ใน EP 2 นี้ เราได้เรียนรู้เกี่ยวกับหัวใจสำคัญของ Tailwind CSS ที่ทำให้มันแตกต่างจาก CSS Framework อื่นๆ:\u003C\u002Fp>\u003Ch3>สิ่งสำคัญที่เราได้เรียนรู้:\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Utility-First\u003C\u002Fstrong> คือการใช้คลาสเล็กๆ หลายคลาสมาประกอบกัน แทนการเขียน CSS แยกไฟล์\u003C\u002Fli>\u003Cli>\u003Cstrong>ระบบการจัดหมวดหมู่คลาส\u003C\u002Fstrong> ที่ครอบคลุม Layout, Spacing, Colors, Typography, และอื่นๆ\u003C\u002Fli>\u003Cli>\u003Cstrong>เทคนิคการจำคลาสแบบเซียน\u003C\u002Fstrong> ด้วยการจำ Pattern และสร้างระบบของตัวเอง\u003C\u002Fli>\u003Cli>\u003Cstrong>Responsive Design\u003C\u002Fstrong> ที่ใช้งานง่ายด้วย Breakpoint System\u003C\u002Fli>\u003Cli>\u003Cstrong>State Variants\u003C\u002Fstrong> สำหรับ Hover, Focus, และสถานะต่างๆ\u003C\u002Fli>\u003Cli>\u003Cstrong>Animation และ Transition\u003C\u002Fstrong> ที่ทำให้เว็บไซต์มีชีวิตชีวา\u003C\u002Fli>\u003Cli>\u003Cstrong>JIT Mode\u003C\u002Fstrong> และการใช้ Arbitrary Values สำหรับความยืดหยุ่น\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>จุดสำคัญที่ต้องจำ:\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cstrong>Mobile-First\u003C\u002Fstrong>: เริ่มจากมือถือแล้วขยายไป Desktop\u003C\u002Fli>\u003Cli>\u003Cstrong>คลาสหลังชนะ\u003C\u002Fstrong>: เมื่อมีคลาสที่ conflict กัน คลาสที่มาทีหลังจะชนะ\u003C\u002Fli>\u003Cli>\u003Cstrong>ใช้ Transition\u003C\u002Fstrong>: ทำให้การเปลี่ยนแปลงนุ่มนวล\u003C\u002Fli>\u003Cli>\u003Cstrong>JIT Mode\u003C\u002Fstrong>: ใช้ arbitrary values ได้แบบไม่จำกัด\u003C\u002Fli>\u003Cli>\u003Cstrong>Dark Mode\u003C\u002Fstrong>: ต้องเปิดใช้งานใน config ก่อน\u003C\u002Fli>\u003C\u002Fol>\u003Cp>\u003Cstrong>EP 3\u003C\u002Fstrong> เรื่อง \"เล่นสีและฟอนต์ให้เก่ง: เทคนิคสร้าง Design System ด้วย Tailwind\" เราจะมาเรียนรู้เทคนิคการใช้สีและ Typography อย่างมืออาชีพ การสร้าง Design System ที่สม่ำเสมอ และการปรับแต่ง Tailwind ให้เข้ากับแบรนด์ของเรา\u003C\u002Fp>\u003Cp>พร้อมที่จะก้าวสู่การเป็นมือโปร Tailwind CSS แล้วใช่ไหม? ติดตาม Superdev School เพื่อไม่พลาดเทคนิคเด็ดๆ ในตอนต่อไป!\u003C\u002Fp>\u003Cp>มาสร้างเว็บไซต์สวยๆ ด้วย Tailwind CSS กันเถอะ! 🚀\u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp class=\"\" data-start=\"5978\" data-end=\"6095\">\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","3_11zon_6_1rjlpmgd4p.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Foex8h30omh16sl5\u002F3_11zon_6_1rjlpmgd4p.webp","2026-03-04 08:26:53.867Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:26:51.076Z","jn88tu5uo8a2bjj","Utility-First CSS","2026-04-10 16:07:35.460Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:52.161Z","fk076a5j3zt8l2q","ระบบคลาส Tailwind","2026-04-10 16:07:35.809Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:53.334Z","wsttxh3j0g5mpff","Tailwind CSS Classes","2026-04-10 16:07:36.119Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":49,"collectionId":50,"collectionName":51,"expand":52,"id":65,"views":66},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":26,"priority":61,"publish_at":62,"scheduled_at":13,"status":63,"updated":64,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:26:33.946Z","vzv2yduhfk_hs035tvsww.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fi22e96fj41lsws7\u002Fvzv2yduhfk_hs035tvsww.webp",{"en":26,"th":26},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","s1zmcugr4s22kyl",433,"oex8h30omh16sl5",[20,25,30,35],"2025-07-21 10:58:18.513Z","ลงลึกหัวใจของ Tailwind CSS ด้วยแนวคิด Utility-First เรียนรู้ระบบการจัดหมวดหมู่คลาส เทคนิคการจำแบบเซียน Responsive Design และ State Variants พร้อมโปรเจ็กต์ปฏิบัติสร้าง Dashboard Card","ep2-utility-first-tailwind-css-class-system-thai","2026-04-25 02:47:19.741Z",1,{"th":71}]