[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-ep3-tailwind-css-color-typography-design-system-thai-all--*":3,"academy-blog-translations-jjjyg0g9i5x9l5w":79},{"data":4,"page":78,"perPage":78,"totalItems":78,"totalPages":78},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":72,"keywords":73,"locale":49,"published_at":74,"scheduled_at":13,"school_blog":70,"short_description":75,"slug":76,"status":68,"title":6,"updated":77,"updated_by":13,"views":71},"EP 3: เล่นสีและฟอนต์ให้เก่ง: เทคนิคสร้าง Design System ด้วย Tailwind CSS","sclblg987654321","school_blog_translations","\u003Cp>คุณเคยสงสัยไหมว่าทำไมเว็บไซต์บางเว็บดูดีมาก สีสันลงตัว ฟอนต์อ่านง่าย และดูมีระดับ แต่บางเว็บกลับดูใช้งานยาก ฟอนต์อ่านลำบาก สีใช้ไม่เข้ากัน?\u003C\u002Fp>\u003Cp>ความลับอยู่ที่การใช้สีและฟอนต์อย่างมีระบบ! ไม่ใช่แค่เลือกสีที่ชอบ หรือใช้ฟอนต์ที่หน้าตาสวย แต่เป็นการสร้าง Design System ที่สมดุล สม่ำเสมอ และเหมาะสมกับผู้ใช้งาน\u003C\u002Fp>\u003Cp>วันนี้เราจะมาเรียนรู้การใช้สีและฟอนต์ใน Tailwind CSS อย่างเซียน ตั้งแต่เทคนิคการเลือกสี การสร้าง Color Palette ที่สวยงาม ระบบ Typography ที่อ่านง่าย จนถึงการทำ Dark Mode ที่ใช้งานได้จริง พร้อมสร้าง Design System ที่ครบครัน!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมสีและฟอนต์ถึงสำคัญกับ User Experience\u003C\u002Fh2>\u003Ch3>ผลกระทบของสีต่อการรับรู้\u003C\u002Fh3>\u003Cp>สีไม่ได้เป็นแค่เรื่องความสวยงาม แต่มีผลต่อจิตวิทยาและพฤติกรรมของผู้ใช้:\u003C\u002Fp>\u003Cp>\u003Cstrong>สีแดง (Red)\u003C\u002Fstrong> - ความเร่งด่วน, อันตราย, ความตื่นเต้น\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ปุ่มลบหรือยกเลิก -->\n<button class=\"bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600\">\n  ลบข้อมูล\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>สีเขียว (Green)\u003C\u002Fstrong> - ความสำเร็จ, ความปลอดภัย, การดำเนินการ\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ปุ่มบันทึกหรือยืนยัน -->\n<button class=\"bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600\">\n  บันทึก\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>สีน้ำเงิน (Blue)\u003C\u002Fstrong> - ความน่าเชื่อถือ, ความเป็นมืออาชีพ\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ปุ่มหลักของเว็บไซต์ -->\n<button class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600\">\n  เริ่มต้นใช้งาน\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ปัญหาที่เจอบ่อยและผลกระทบ\u003C\u002Fh3>\u003Cp>\u003Cstrong>1. Contrast ไม่พอ\u003C\u002Fstrong> - ทำให้อ่านยาก โดยเฉพาะผู้ใช้ที่มีปัญหาสายตา\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ ผิด: Contrast ไม่พอ -->\n<p class=\"text-gray-400 bg-gray-300\">ข้อความนี้อ่านยาก<\u002Fp>\n\n<!-- ✅ ถูก: Contrast เพียงพอ -->\n<p class=\"text-gray-800 bg-gray-100\">ข้อความนี้อ่านง่าย<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>2. ใช้สีมากเกินไป\u003C\u002Fstrong> - ทำให้ดูรก ไม่มี Focus\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ ผิด: สีมากเกินไป -->\n<div class=\"bg-red-500\">\n  <h1 class=\"text-blue-600\">หัวข้อ<\u002Fh1>\n  <p class=\"text-green-500\">รายละเอียด<\u002Fp>\n  <button class=\"bg-yellow-400 text-purple-600\">ปุ่ม<\u002Fbutton>\n<\u002Fdiv>\n\n<!-- ✅ ถูก: ใช้สีอย่างมีระบบ -->\n<div class=\"bg-gray-50\">\n  <h1 class=\"text-gray-900\">หัวข้อ<\u002Fh1>\n  <p class=\"text-gray-600\">รายละเอียด<\u002Fp>\n  <button class=\"bg-blue-500 text-white\">ปุ่ม<\u002Fbutton>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ระบบสีใน Tailwind CSS แบบครบครัน\u003C\u002Fh2>\u003Ch3>Color Palette ที่ออกแบบมาอย่างดี\u003C\u002Fh3>\u003Cp>Tailwind CSS มีระบบสีที่ครอบคลุม โดยแต่ละสีมี 10-11 ระดับความเข้ม:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- สีเทา 11 ระดับ (50-950) -->\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<div class=\"bg-gray-950\">สีเทาดำ (v3.3+)<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิคการเลือกสีแบบมืออาชีพ\u003C\u002Fh3>\u003Cp>\u003Cstrong>1. Color Harmony (การเข้ากันของสี)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\u003Cstrong>Monochromatic\u003C\u002Fstrong> - ใช้สีเดียวกันหลายโทน\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-4\">\n  <div class=\"bg-blue-100 p-4 rounded\">Background อ่อน<\u002Fdiv>\n  <div class=\"bg-blue-300 p-4 rounded\">Background กลาง<\u002Fdiv>\n  <div class=\"bg-blue-500 p-4 rounded text-white\">Background เข้ม<\u002Fdiv>\n  <div class=\"bg-blue-700 p-4 rounded text-white\">Background เข้มมาก<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Complementary\u003C\u002Fstrong> - ใช้สีที่ตรงข้ามกัน\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"bg-blue-500 text-orange-500 p-4 rounded\">\n  สีน้ำเงินกับส้ม (ตรงข้ามกัน)\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Analogous\u003C\u002Fstrong> - ใช้สีที่อยู่ข้างๆ กัน\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"flex space-x-2\">\n  <div class=\"bg-blue-500 p-4 rounded text-white\">Blue<\u002Fdiv>\n  <div class=\"bg-indigo-500 p-4 rounded text-white\">Indigo<\u002Fdiv>\n  <div class=\"bg-purple-500 p-4 rounded text-white\">Purple<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>2. Semantic Colors (สีตามความหมาย)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ระบบสีที่สื่อความหมาย -->\n<div class=\"space-y-4\">\n  <!-- Success -->\n  <div class=\"bg-green-100 border border-green-300 text-green-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Success<\u002Fh3>\n    <p>การดำเนินการสำเร็จ<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Warning -->\n  <div class=\"bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Warning<\u002Fh3>\n    <p>ควรระวังหรือตรวจสอบ<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Error -->\n  <div class=\"bg-red-100 border border-red-300 text-red-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Error<\u002Fh3>\n    <p>เกิดข้อผิดพลาด<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Info -->\n  <div class=\"bg-blue-100 border border-blue-300 text-blue-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Information<\u002Fh3>\n    <p>ข้อมูลเพิ่มเติม<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การปรับแต่งสีใน Tailwind Config\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand': {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n          900: '#1e3a8a',\n        },\n        'secondary': {\n          500: '#6b7280',\n          600: '#4b5563',\n          700: '#374151',\n        }\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้สีที่กำหนดเอง -->\n<div class=\"bg-brand-500 text-white p-6\">\n  <h1 class=\"text-brand-100\">Brand Colors<\u002Fh1>\n  <p class=\"text-secondary-300\">Custom color system<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Gradient และ Effects\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Gradient Backgrounds -->\n<div class=\"bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white rounded-lg\">\n  <h2 class=\"text-2xl font-bold\">Gradient Background<\u002Fh2>\n<\u002Fdiv>\n\n<div class=\"bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 p-8 text-white rounded-lg\">\n  <h2 class=\"text-2xl font-bold\">Multi-color Gradient<\u002Fh2>\n<\u002Fdiv>\n\n<!-- Gradient Text (ต้องใช้ CSS เพิ่มเติม) -->\n<style>\n.gradient-text {\n  background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n<\u002Fstyle>\n\n<h1 class=\"text-6xl font-bold gradient-text\">\n  Gradient Text\n<\u002Fh1>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Typography System ที่ทำให้เว็บไซต์ดูโปรเฟสชันนัล\u003C\u002Fh2>\u003Ch3>Font Family และการจัดการ\u003C\u002Fh3>\u003Cp>Tailwind มี font family utilities พื้นฐาน:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Font Families พื้นฐาน -->\n<p class=\"font-sans\">\n  Sans-serif: ฟอนต์ที่ใช้งานทั่วไป เหมาะสำหรับเนื้อหาและ UI\n<\u002Fp>\n\n<p class=\"font-serif\">\n  Serif: ฟอนต์แบบดั้งเดิม เหมาะสำหรับหัวข้อและเนื้อหายาว\n<\u002Fp>\n\n<p class=\"font-mono\">\n  Monospace: ฟอนต์ความกว้างเท่ากัน เหมาะสำหรับโค้ดและตัวเลข\n<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การเพิ่ม Custom Fonts\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      fontFamily: {\n        'heading': ['Inter', 'system-ui', 'sans-serif'],\n        'body': ['Inter', 'system-ui', 'sans-serif'],\n        'mono': ['JetBrains Mono', 'Courier New', 'monospace'],\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้ Custom Fonts -->\n<h1 class=\"font-heading text-4xl font-bold\">หัวข้อด้วย Inter Font<\u002Fh1>\n<p class=\"font-body text-lg\">เนื้อหาด้วย Inter Font<\u002Fp>\n<code class=\"font-mono text-sm\">console.log('Hello World');<\u002Fcode>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Font Size และ Line Height ที่เหมาะสม\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ระบบขนาดฟอนต์ที่สมดุล -->\n<div class=\"space-y-4\">\n  <h1 class=\"text-5xl leading-tight font-bold text-gray-900\">\n    หัวข้อหลัก (5xl + leading-tight)\n  <\u002Fh1>\n  \n  <h2 class=\"text-3xl leading-relaxed font-semibold text-gray-800\">\n    หัวข้อรอง (3xl + leading-relaxed)\n  <\u002Fh2>\n  \n  <h3 class=\"text-xl leading-normal font-medium text-gray-700\">\n    หัวข้อย่อย (xl + leading-normal)\n  <\u002Fh3>\n  \n  <p class=\"text-base leading-relaxed text-gray-600\">\n    เนื้อหาปกติ (base + leading-relaxed) - ขนาดพอดี อ่านสบายตา\n  <\u002Fp>\n  \n  <p class=\"text-sm leading-normal text-gray-500\">\n    ข้อความรอง (sm + leading-normal)\n  <\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Typography Scale ที่แนะนำ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Scale สำหรับการใช้งานจริง -->\n<div class=\"space-y-6\">\n  <!-- Display Text -->\n  <h1 class=\"text-6xl leading-none font-bold\">Display Text<\u002Fh1>\n  \n  <!-- Page Title -->\n  <h1 class=\"text-4xl leading-tight font-bold\">Page Title<\u002Fh1>\n  \n  <!-- Section Title -->\n  <h2 class=\"text-2xl leading-snug font-semibold\">Section Title<\u002Fh2>\n  \n  <!-- Card Title -->\n  <h3 class=\"text-lg leading-normal font-medium\">Card Title<\u002Fh3>\n  \n  <!-- Body Text -->\n  <p class=\"text-base leading-relaxed\">Body text for comfortable reading<\u002Fp>\n  \n  <!-- Caption -->\n  <p class=\"text-sm leading-normal\">Caption or metadata<\u002Fp>\n  \n  <!-- Fine Print -->\n  <p class=\"text-xs leading-normal\">Fine print or labels<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Font Weight และ Visual Hierarchy\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- การสร้าง Visual Hierarchy -->\n<article class=\"max-w-4xl mx-auto p-8\">\n  <!-- Primary Heading -->\n  <h1 class=\"text-4xl font-black text-gray-900 mb-2\">\n    The Ultimate Guide to Typography\n  <\u002Fh1>\n  \n  <!-- Subtitle -->\n  <p class=\"text-xl font-light text-gray-600 mb-8\">\n    Everything you need to know about choosing and using fonts\n  <\u002Fp>\n  \n  <!-- Section Heading -->\n  <h2 class=\"text-2xl font-bold text-gray-800 mt-12 mb-4\">\n    Why Typography Matters\n  <\u002Fh2>\n  \n  <!-- Body Text -->\n  <p class=\"text-base font-normal text-gray-700 mb-4 leading-relaxed\">\n    Typography is not just about making text look pretty. It's about creating a hierarchy \n    that guides your readers through your content in a logical and comfortable way.\n  <\u002Fp>\n  \n  <!-- Emphasized Text -->\n  <p class=\"text-base font-medium text-gray-800 mb-4\">\n    Good typography improves readability and user experience.\n  <\u002Fp>\n  \n  <!-- Quote -->\n  <blockquote class=\"text-lg font-medium italic text-gray-900 border-l-4 border-blue-500 pl-6 my-8\">\n    \"Typography is the craft of endowing human language with a durable visual form.\"\n  <\u002Fblockquote>\n<\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>สร้าง Design System ด้วย Tailwind\u003C\u002Fh2>\u003Ch3>กำหนด Design Tokens\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - ระบบ Design Tokens ที่ครบครัน\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Primary Colors\n        primary: {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n        },\n        \u002F\u002F Secondary Colors\n        secondary: {\n          50: '#f5f3ff',\n          500: '#8b5cf6',\n          600: '#7c3aed',\n        },\n        \u002F\u002F Neutral Colors\n        neutral: {\n          50: '#f9fafb',\n          100: '#f3f4f6',\n          500: '#6b7280',\n          800: '#1f2937',\n          900: '#111827',\n        }\n      },\n      fontFamily: {\n        'heading': ['Inter', 'system-ui', 'sans-serif'],\n        'body': ['Inter', 'system-ui', 'sans-serif'],\n        'mono': ['JetBrains Mono', 'Courier New', 'monospace'],\n      },\n      spacing: {\n        'xs': '0.5rem',\n        'sm': '1rem',\n        'md': '1.5rem',\n        'lg': '2rem',\n        'xl': '3rem',\n      },\n      borderRadius: {\n        'sm': '0.25rem',\n        'md': '0.375rem',\n        'lg': '0.5rem',\n        'xl': '0.75rem',\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Component Library พื้นฐาน\u003C\u002Fh3>\u003Cp>\u003Cstrong>Button System:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Button Variants -->\n<div class=\"space-x-4 space-y-4\">\n  <!-- Primary Button -->\n  <button class=\"bg-primary-500 hover:bg-primary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n    Primary Action\n  <\u002Fbutton>\n  \n  <!-- Secondary Button -->\n  <button class=\"bg-secondary-500 hover:bg-secondary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n    Secondary Action\n  <\u002Fbutton>\n  \n  <!-- Outline Button -->\n  <button class=\"border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-medium px-6 py-3 rounded-lg transition-all\">\n    Outline Button\n  <\u002Fbutton>\n  \n  <!-- Ghost Button -->\n  <button class=\"text-primary-500 hover:bg-primary-50 font-medium px-6 py-3 rounded-lg transition-colors\">\n    Ghost Button\n  <\u002Fbutton>\n  \n  <!-- Disabled Button -->\n  <button class=\"bg-neutral-300 text-neutral-500 font-medium px-6 py-3 rounded-lg cursor-not-allowed\" disabled>\n    Disabled Button\n  <\u002Fbutton>\n<\u002Fdiv>\n\n<!-- Button Sizes -->\n<div class=\"space-x-4\">\n  <button class=\"bg-primary-500 text-white font-medium px-3 py-1.5 text-sm rounded\">Small<\u002Fbutton>\n  <button class=\"bg-primary-500 text-white font-medium px-4 py-2 rounded-md\">Medium<\u002Fbutton>\n  <button class=\"bg-primary-500 text-white font-medium px-6 py-3 rounded-lg\">Large<\u002Fbutton>\n  <button class=\"bg-primary-500 text-white font-medium px-8 py-4 text-lg rounded-xl\">Extra Large<\u002Fbutton>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Card System:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Card Variants -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n  <!-- Basic Card -->\n  <div class=\"bg-white rounded-xl shadow-sm border border-neutral-200 p-6\">\n    <h3 class=\"text-lg font-semibold text-neutral-900 mb-2\">Basic Card<\u002Fh3>\n    <p class=\"text-neutral-600\">Simple card with basic styling<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Featured Card -->\n  <div class=\"bg-gradient-to-br from-primary-500 to-secondary-500 rounded-xl shadow-lg p-6 text-white\">\n    <h3 class=\"text-lg font-semibold mb-2\">Featured Card<\u002Fh3>\n    <p class=\"opacity-90\">Special card with gradient background<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Interactive Card -->\n  <div class=\"bg-white rounded-xl shadow-sm border border-neutral-200 p-6 hover:shadow-lg hover:border-primary-300 transition-all cursor-pointer\">\n    <h3 class=\"text-lg font-semibold text-neutral-900 mb-2\">Interactive Card<\u002Fh3>\n    <p class=\"text-neutral-600\">Card with hover effects<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Form Elements:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Form System -->\n<form class=\"space-y-6 max-w-md\">\n  <!-- Input Field -->\n  <div>\n    <label class=\"block text-sm font-medium text-neutral-700 mb-2\">\n      Email Address\n    <\u002Flabel>\n    <input \n      type=\"email\" \n      class=\"w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors\"\n      placeholder=\"your@email.com\"\n    >\n  <\u002Fdiv>\n  \n  <!-- Textarea -->\n  <div>\n    <label class=\"block text-sm font-medium text-neutral-700 mb-2\">\n      Message\n    <\u002Flabel>\n    <textarea \n      rows=\"4\"\n      class=\"w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none\"\n      placeholder=\"Your message here...\"\n    ><\u002Ftextarea>\n  <\u002Fdiv>\n  \n  <!-- Select -->\n  <div>\n    <label class=\"block text-sm font-medium text-neutral-700 mb-2\">\n      Category\n    <\u002Flabel>\n    <select class=\"w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors\">\n      <option>Choose a category<\u002Foption>\n      <option>General<\u002Foption>\n      <option>Technical<\u002Foption>\n      <option>Billing<\u002Foption>\n    <\u002Fselect>\n  <\u002Fdiv>\n  \n  <!-- Checkbox -->\n  <div class=\"flex items-center\">\n    <input \n      type=\"checkbox\" \n      id=\"newsletter\"\n      class=\"w-4 h-4 text-primary-500 border-neutral-300 rounded focus:ring-primary-500\"\n    >\n    <label for=\"newsletter\" class=\"ml-2 text-sm text-neutral-700\">\n      Subscribe to newsletter\n    <\u002Flabel>\n  <\u002Fdiv>\n<\u002Fform>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Dark Mode ที่ใช้งานได้จริง\u003C\u002Fh2>\u003Ch3>การตั้งค่า Dark Mode ใน Tailwind\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  darkMode: 'class', \u002F\u002F เปิดใช้งาน dark mode\n  theme: {\n    extend: {\n      \u002F\u002F colors configuration\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Color Strategy สำหรับ Dark Mode\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- คอมโพเนนต์ที่รองรับ Dark Mode -->\n<div class=\"bg-white dark:bg-gray-900 min-h-screen transition-colors\">\n  <!-- Header -->\n  <header class=\"bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-7xl mx-auto px-4 py-4\">\n      <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">\n        My Website\n      <\u002Fh1>\n    <\u002Fdiv>\n  <\u002Fheader>\n  \n  <!-- Main Content -->\n  <main class=\"max-w-4xl mx-auto p-8\">\n    <article class=\"bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-gray-900\u002F20 p-8\">\n      <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-4\">\n        Dark Mode Article\n      <\u002Fh2>\n      \n      <p class=\"text-gray-700 dark:text-gray-300 mb-6 leading-relaxed\">\n        This article demonstrates how to create a proper dark mode implementation \n        with good contrast ratios and comfortable reading experience.\n      <\u002Fp>\n      \n      <!-- Code Block -->\n      <div class=\"bg-gray-100 dark:bg-gray-900 rounded-lg p-4 mb-6\">\n        <code class=\"text-sm text-gray-800 dark:text-gray-200 font-mono\">\n          const darkMode = document.querySelector('.dark');\n        <\u002Fcode>\n      <\u002Fdiv>\n      \n      <!-- Buttons -->\n      <div class=\"flex space-x-4\">\n        <button class=\"bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-6 py-3 rounded-lg transition-colors\">\n          Primary Action\n        <\u002Fbutton>\n        \n        <button class=\"bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-6 py-3 rounded-lg transition-colors\">\n          Secondary Action\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Farticle>\n  <\u002Fmain>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Dark Mode Toggle Implementation\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Dark Mode Toggle Button -->\n<button \n  id=\"theme-toggle\" \n  class=\"relative p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors\"\n>\n  <!-- Sun Icon (Light Mode) -->\n  <svg id=\"sun-icon\" class=\"w-5 h-5 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n    <path fill-rule=\"evenodd\" d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" clip-rule=\"evenodd\"><\u002Fpath>\n  <\u002Fsvg>\n  \n  <!-- Moon Icon (Dark Mode) -->\n  <svg id=\"moon-icon\" class=\"w-5 h-5 block dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n    <path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"><\u002Fpath>\n  <\u002Fsvg>\n<\u002Fbutton>\n\n<script>\n\u002F\u002F Dark Mode Toggle JavaScript\nfunction initTheme() {\n  \u002F\u002F ตรวจสอบ preference ที่บันทึกไว้\n  const savedTheme = localStorage.getItem('theme');\n  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  \n  if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n    document.documentElement.classList.add('dark');\n  } else {\n    document.documentElement.classList.remove('dark');\n  }\n}\n\n\u002F\u002F เรียกใช้เมื่อโหลดหน้า\ninitTheme();\n\n\u002F\u002F Toggle function\ndocument.getElementById('theme-toggle').addEventListener('click', function() {\n  const isDark = document.documentElement.classList.contains('dark');\n  \n  if (isDark) {\n    document.documentElement.classList.remove('dark');\n    localStorage.setItem('theme', 'light');\n  } else {\n    document.documentElement.classList.add('dark');\n    localStorage.setItem('theme', 'dark');\n  }\n});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Typography ใน Dark Mode\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Typography ที่เหมาะสมกับ Dark Mode -->\n<div class=\"bg-white dark:bg-gray-900 p-8 rounded-xl\">\n  <!-- หัวข้อหลัก -->\n  <h1 class=\"text-4xl font-bold text-gray-900 dark:text-white mb-4\">\n    Typography in Dark Mode\n  <\u002Fh1>\n  \n  <!-- หัวข้อรอง -->\n  <h2 class=\"text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6\">\n    Proper Contrast and Readability\n  <\u002Fh2>\n  \n  <!-- เนื้อหาหลัก -->\n  <p class=\"text-base text-gray-700 dark:text-gray-300 mb-4 leading-relaxed\">\n    ในการออกแบบ Typography สำหรับ Dark Mode จำเป็นต้องคำนึงถึง contrast ratio \n    ที่เหมาะสม เพื่อให้อ่านง่ายและไม่เมื่อยตา\n  <\u002Fp>\n  \n  <!-- ข้อความเน้น -->\n  <p class=\"text-lg font-medium text-gray-800 dark:text-gray-200 mb-4\">\n    ข้อความสำคัญควรมี contrast ที่สูงขึ้น\n  <\u002Fp>\n  \n  <!-- ข้อความรอง -->\n  <p class=\"text-sm text-gray-600 dark:text-gray-400\">\n    ข้อความรองสามารถมี contrast ที่ต่ำกว่าได้ แต่ยังคงอ่านได้ชัดเจน\n  <\u002Fp>\n  \n  <!-- ลิงก์ -->\n  <p class=\"mt-4\">\n    <a href=\"#\" class=\"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline\">\n      ลิงก์ที่มี contrast เหมาะสมในทั้งสองโหมด\n    <\u002Fa>\n  <\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>เทคนิคขั้นสูง: Animation และ Visual Effects\u003C\u002Fh2>\u003Ch3>Color Transitions\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Smooth Color Transitions -->\n<div class=\"space-y-6\">\n  <!-- Color Shift on Hover -->\n  <div class=\"group bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-blue-900\u002F20 p-6 rounded-xl border border-gray-200 dark:border-gray-700 transition-all duration-300\">\n    <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\n      Interactive Card\n    <\u002Fh3>\n    <p class=\"text-gray-600 dark:text-gray-300 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors\">\n      Colors change smoothly on hover\n    <\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Background Animation -->\n  <div class=\"relative overflow-hidden bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-8 rounded-xl text-white\">\n    <div class=\"absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 opacity-0 hover:opacity-100 transition-opacity duration-700\"><\u002Fdiv>\n    <div class=\"relative z-10\">\n      <h3 class=\"text-2xl font-bold\">Gradient Overlay<\u002Fh3>\n      <p>Hover to see the gradient shift<\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Typography Animations\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Text Effects ที่ใช้ CSS Animation -->\n<div class=\"space-y-8\">\n  <!-- Fade In Text -->\n  <div class=\"opacity-0 animate-pulse\">\n    <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white\">\n      Animated Text\n    <\u002Fh2>\n  <\u002Fdiv>\n  \n  <!-- Hover Text Effect -->\n  <div class=\"group cursor-pointer\">\n    <p class=\"text-lg text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300\">\n      Text with smooth color transition on hover\n    <\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Custom CSS for more advanced animations -->\n<style>\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fadeInUp 0.8s ease-out;\n}\n<\u002Fstyle>\n\n<!-- ใช้ custom animation -->\n<div class=\"animate-fade-in-up\">\n  <h3 class=\"text-2xl font-semibold\">Text slides up and fades in<\u002Fh3>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>โปรเจ็กต์ปฏิบัติ: สร้าง Design System สมบูรณ์\u003C\u002Fh2>\u003Cp>มาสร้าง Style Guide และ Component Library ที่ครบครัน:\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>Design System - Style Guide<\u002Ftitle>\n    <script src=\"https:\u002F\u002Fcdn.tailwindcss.com\"><\u002Fscript>\n    <script>\n        tailwind.config = {\n            darkMode: 'class',\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            50: '#eff6ff',\n                            100: '#dbeafe', \n                            500: '#3b82f6',\n                            600: '#2563eb',\n                            700: '#1d4ed8',\n                        }\n                    }\n                }\n            }\n        }\n    <\u002Fscript>\n<\u002Fhead>\n<body class=\"bg-gray-50 dark:bg-gray-900 transition-colors\">\n\n<!-- Header with Theme Toggle -->\n<header class=\"bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-7xl mx-auto px-4 py-4 flex justify-between items-center\">\n        <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Design System<\u002Fh1>\n        \n        <button id=\"theme-toggle\" class=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors\">\n            <svg class=\"w-5 h-5 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path fill-rule=\"evenodd\" d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" clip-rule=\"evenodd\"><\u002Fpath>\n            <\u002Fsvg>\n            <svg class=\"w-5 h-5 block dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"><\u002Fpath>\n            <\u002Fsvg>\n        <\u002Fbutton>\n    <\u002Fdiv>\n<\u002Fheader>\n\n<main class=\"max-w-7xl mx-auto p-8\">\n    <!-- Color Palette Section -->\n    <section class=\"mb-16\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-8\">Color Palette<\u002Fh2>\n        \n        <!-- Primary Colors -->\n        <div class=\"mb-8\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4\">Primary Colors<\u002Fh3>\n            <div class=\"grid grid-cols-2 md:grid-cols-5 gap-4\">\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-50 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-50<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-100 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-100<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-500<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-600 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-600<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-700 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-700<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n        \n        <!-- Semantic Colors -->\n        <div class=\"mb-8\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4\">Semantic Colors<\u002Fh3>\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n                <div class=\"bg-green-100 dark:bg-green-900\u002F30 p-4 rounded-lg text-center border border-green-200 dark:border-green-700\">\n                    <div class=\"w-full h-16 bg-green-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-green-800 dark:text-green-200\">Success<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-yellow-100 dark:bg-yellow-900\u002F30 p-4 rounded-lg text-center border border-yellow-200 dark:border-yellow-700\">\n                    <div class=\"w-full h-16 bg-yellow-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-yellow-800 dark:text-yellow-200\">Warning<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-red-100 dark:bg-red-900\u002F30 p-4 rounded-lg text-center border border-red-200 dark:border-red-700\">\n                    <div class=\"w-full h-16 bg-red-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-red-800 dark:text-red-200\">Error<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-blue-100 dark:bg-blue-900\u002F30 p-4 rounded-lg text-center border border-blue-200 dark:border-blue-700\">\n                    <div class=\"w-full h-16 bg-blue-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-blue-800 dark:text-blue-200\">Info<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fsection>\n    \n    <!-- Typography Section -->\n    <section class=\"mb-16\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-8\">Typography<\u002Fh2>\n        \n        <div class=\"bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700\">\n            <div class=\"space-y-6\">\n                <div>\n                    <h1 class=\"text-6xl font-bold text-gray-900 dark:text-white\">Display Text<\u002Fh1>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-6xl font-bold<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <h1 class=\"text-4xl font-bold text-gray-900 dark:text-white\">Heading 1<\u002Fh1>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-4xl font-bold<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <h2 class=\"text-2xl font-semibold text-gray-800 dark:text-gray-100\">Heading 2<\u002Fh2>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-2xl font-semibold<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <h3 class=\"text-lg font-medium text-gray-700 dark:text-gray-200\">Heading 3<\u002Fh3>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-lg font-medium<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <p class=\"text-base text-gray-700 dark:text-gray-300\">Body text สำหรับเนื้อหาทั่วไป ขนาดพอดี อ่านสบายตา<\u002Fp>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-base<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <p class=\"text-sm text-gray-600 dark:text-gray-400\">Small text สำหรับ caption หรือข้อมูลเพิ่มเติม<\u002Fp>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-sm<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fsection>\n    \n    <!-- Components Section -->\n    <section class=\"mb-16\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-8\">Components<\u002Fh2>\n        \n        <!-- Buttons -->\n        <div class=\"mb-12\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6\">Buttons<\u002Fh3>\n            <div class=\"flex flex-wrap gap-4\">\n                <button class=\"bg-brand-500 hover:bg-brand-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n                    Primary\n                <\u002Fbutton>\n                <button class=\"border-2 border-brand-500 text-brand-500 hover:bg-brand-500 hover:text-white font-medium px-6 py-3 rounded-lg transition-all\">\n                    Secondary\n                <\u002Fbutton>\n                <button class=\"text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-900\u002F20 font-medium px-6 py-3 rounded-lg transition-colors\">\n                    Ghost\n                <\u002Fbutton>\n                <button class=\"bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 font-medium px-6 py-3 rounded-lg cursor-not-allowed\">\n                    Disabled\n                <\u002Fbutton>\n            <\u002Fdiv>\n        <\u002Fdiv>\n        \n        <!-- Cards -->\n        <div class=\"mb-12\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6\">Cards<\u002Fh3>\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                <div class=\"bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6\">\n                    <h4 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-2\">Basic Card<\u002Fh4>\n                    <p class=\"text-gray-600 dark:text-gray-300\">Simple card with border and shadow<\u002Fp>\n                <\u002Fdiv>\n                \n                <div class=\"bg-gradient-to-br from-brand-500 to-purple-600 rounded-xl shadow-lg p-6 text-white\">\n                    <h4 class=\"text-lg font-semibold mb-2\">Featured Card<\u002Fh4>\n                    <p class=\"opacity-90\">Card with gradient background<\u002Fp>\n                <\u002Fdiv>\n                \n                <div class=\"bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg hover:border-brand-300 dark:hover:border-brand-600 transition-all cursor-pointer\">\n                    <h4 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-2\">Interactive Card<\u002Fh4>\n                    <p class=\"text-gray-600 dark:text-gray-300\">Hover to see the effect<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n        \n        <!-- Forms -->\n        <div class=\"mb-12\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6\">Form Elements<\u002Fh3>\n            <div class=\"bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700 max-w-md\">\n                <form class=\"space-y-6\">\n                    <div>\n                        <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n                            Email\n                        <\u002Flabel>\n                        <input \n                            type=\"email\" \n                            class=\"w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors\"\n                            placeholder=\"your@email.com\"\n                        >\n                    <\u002Fdiv>\n                    \n                    <div>\n                        <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n                            Message\n                        <\u002Flabel>\n                        <textarea \n                            rows=\"4\"\n                            class=\"w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors resize-none\"\n                            placeholder=\"Your message...\"\n                        ><\u002Ftextarea>\n                    <\u002Fdiv>\n                    \n                    <button type=\"submit\" class=\"w-full bg-brand-500 hover:bg-brand-600 text-white font-medium py-3 rounded-lg transition-colors\">\n                        Send Message\n                    <\u002Fbutton>\n                <\u002Fform>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fsection>\n<\u002Fmain>\n\n<script>\n\u002F\u002F Dark Mode Toggle\nfunction initTheme() {\n    const savedTheme = localStorage.getItem('theme');\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    \n    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n        document.documentElement.classList.add('dark');\n    }\n}\n\ninitTheme();\n\ndocument.getElementById('theme-toggle').addEventListener('click', function() {\n    const isDark = document.documentElement.classList.contains('dark');\n    \n    if (isDark) {\n        document.documentElement.classList.remove('dark');\n        localStorage.setItem('theme', 'light');\n    } else {\n        document.documentElement.classList.add('dark');\n        localStorage.setItem('theme', 'dark');\n    }\n});\n<\u002Fscript>\n\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Performance และ Best Practices\u003C\u002Fh2>\u003Ch3>1. Optimizing Colors และ Typography\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - การ optimize สีและฟอนต์\nmodule.exports = {\n  content: [\n    \".\u002Fsrc\u002F**\u002F*.{html,js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      \u002F\u002F เลือกเฉพาะสีที่ใช้จริง\n      colors: {\n        primary: '#3b82f6',\n        secondary: '#6b7280',\n        success: '#10b981',\n        warning: '#f59e0b',\n        error: '#ef4444',\n      },\n      \u002F\u002F ใช้ system fonts เพื่อประสิทธิภาพที่ดี\n      fontFamily: {\n        sans: ['system-ui', '-apple-system', 'sans-serif'],\n        serif: ['Georgia', 'serif'],\n        mono: ['Menlo', 'Monaco', 'monospace'],\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Accessibility Guidelines\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ตัวอย่างการใช้สีที่เป็นมิตรกับผู้พิการ -->\n<div class=\"space-y-4\">\n  <!-- Contrast ratio ที่เหมาะสม (4.5:1 สำหรับ normal text) -->\n  <div class=\"bg-white text-gray-900 p-4 rounded\">\n    <p>ข้อความนี้มี contrast ratio ที่เหมาะสม<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- ข้อความสำคัญ (3:1 สำหรับ large text) -->\n  <div class=\"bg-red-50 border border-red-200 text-red-800 p-4 rounded\">\n    <p class=\"font-medium\">ข้อผิดพลาด: กรุณาตรวจสอบข้อมูล<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- ลิงก์ที่เข้าถึงได้ -->\n  <p>\n    อ่านเพิ่มเติมใน \n    <a href=\"#\" class=\"text-blue-600 underline hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded\">\n      เอกสารประกอบ\n    <\u002Fa>\n  <\u002Fp>\n  \n  <!-- การใช้สีไม่ใช่วิธีเดียวในการสื่อสาร -->\n  <div class=\"flex items-center space-x-2\">\n    <span class=\"w-3 h-3 bg-green-500 rounded-full\"><\u002Fspan>\n    <span class=\"text-green-700\">✓ สำเร็จ<\u002Fspan>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. เทคนิคการลด CSS Bundle Size\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  content: [\n    \".\u002Fsrc\u002F**\u002F*.{html,js}\",\n  ],\n  theme: {\n    \u002F\u002F ใช้เฉพาะสีที่จำเป็น\n    colors: {\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#ffffff',\n      black: '#000000',\n      gray: {\n        100: '#f3f4f6',\n        500: '#6b7280',\n        900: '#111827',\n      },\n      blue: {\n        500: '#3b82f6',\n        600: '#2563eb',\n      }\n    },\n    \u002F\u002F ลบ utility classes ที่ไม่ใช้\n    extend: {}\n  },\n  \u002F\u002F ปิด plugin ที่ไม่จำเป็น\n  corePlugins: {\n    float: false,\n    clear: false,\n    skew: false,\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>สรุป\u003C\u002Fh3>\u003Cp>ใน EP 3 นี้ เราได้เรียนรู้การใช้สีและฟอนต์ใน Tailwind CSS อย่างครบถ้วน:\u003C\u002Fp>\u003Ch4>สิ่งสำคัญที่ได้เรียนรู้:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>ระบบสีใน Tailwind CSS\u003C\u002Fstrong> ที่มี 22 กลุ่มสี แต่ละสีมี 11 ระดับความเข้ม\u003C\u002Fli>\u003Cli>\u003Cstrong>เทคนิคการเลือกสี\u003C\u002Fstrong> แบบมืออาชีพด้วย Color Harmony และ Semantic Colors\u003C\u002Fli>\u003Cli>\u003Cstrong>Typography System\u003C\u002Fstrong> ที่สร้าง Visual Hierarchy ที่ดี\u003C\u002Fli>\u003Cli>\u003Cstrong>การสร้าง Design System\u003C\u002Fstrong> ที่สม่ำเสมอและใช้งานง่าย\u003C\u002Fli>\u003Cli>\u003Cstrong>Dark Mode Implementation\u003C\u002Fstrong> ที่ใช้งานได้จริงและไม่มี flicker\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance และ Accessibility\u003C\u002Fstrong> ที่ควรคำนึงถึง\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>เทคนิคสำคัญที่ต้องจำ:\u003C\u002Fh4>\u003Col>\u003Cli>\u003Cstrong>ใช้ contrast ratio ที่เหมาะสม\u003C\u002Fstrong> - อย่างน้อย 4.5:1 สำหรับ normal text\u003C\u002Fli>\u003Cli>\u003Cstrong>สร้างระบบสีแบบ semantic\u003C\u002Fstrong> - success, warning, error, info\u003C\u002Fli>\u003Cli>\u003Cstrong>ใช้ Typography scale อย่างสม่ำเสมอ\u003C\u002Fstrong> - จาก text-xs ถึง text-6xl\u003C\u002Fli>\u003Cli>\u003Cstrong>ออกแบบ Dark Mode ตั้งแต่เริ่มต้น\u003C\u002Fstrong> - ไม่ใช่เพิ่มทีหลัง\u003C\u002Fli>\u003Cli>\u003Cstrong>ทดสอบ accessibility เสมอ\u003C\u002Fstrong> - ใช้เครื่องมือตรวจ contrast\u003C\u002Fli>\u003C\u002Fol>\u003Cp>การเข้าใจและใช้สี-ฟอนต์อย่างถูกต้องจะทำให้เว็บไซต์ของคุณดูมืออาชีพ สร้างประสบการณ์ที่ดีแก่ผู้ใช้ และโดดเด่นจากคู่แข่ง\u003C\u002Fp>\u003Cp>\u003Cstrong>EP 4\u003C\u002Fstrong> เรื่อง \"Flexbox และ Grid ใน Tailwind: สร้าง Layout ระดับโปรได้ภายใน 10 นาที\" เราจะมาเรียนรู้การใช้ Flexbox และ CSS Grid อย่างเซียน การสร้าง Layout ที่ซับซ้อน Responsive Design ขั้นสูง และเทคนิคการจัดวางองค์ประกอบที่ทำให้เว็บไซต์ดูสวยงามและใช้งานง่าย\u003C\u002Fp>\u003Cp>พร้อมที่จะเป็นมาสเตอร์ Layout ด้วย Tailwind CSS แล้วใช่ไหม? ติดตาม Superdev School เพื่อไม่พลาดเทคนิคโปรที่จะทำให้คุณสร้าง Layout ได้อย่างมืออาชีพ!\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>","5_11zon_4_g8nambjb8s.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fahxxg8w443w51hx\u002F5_11zon_4_g8nambjb8s.webp","2026-03-04 08:26:53.500Z","",{"keywords":15,"locale":43,"school_blog":53},[16,23,28,33,38],{"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:47.589Z","qr1u8bgx9ibh2lx","ฟอนต์เว็บไซต์","2026-04-10 16:07:35.070Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:35.769Z","hp7u7nbteeiubmv","Dark Mode CSS","2026-04-10 16:07:31.407Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:41.870Z","wv50sjfwzdy5wc3","Design Systems","2026-04-10 16:07:33.205Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:51.784Z","fti5m3b3xtixijo","Typography Tailwind","2026-04-10 16:07:35.655Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:26:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"code":44,"collectionId":45,"collectionName":46,"created":47,"flag":48,"id":49,"is_default":50,"label":51,"updated":52},"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":54,"collectionId":55,"collectionName":56,"expand":57,"id":70,"views":71},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":58},{"blogIds":59,"collectionId":60,"collectionName":61,"created":62,"created_by":13,"id":54,"image":63,"image_alt":13,"image_path":64,"label":65,"name":41,"priority":66,"publish_at":67,"scheduled_at":13,"status":68,"updated":69,"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":41,"th":41},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","jjjyg0g9i5x9l5w",249,"ahxxg8w443w51hx",[20,25,30,35,40],"2025-07-22 02:34:09.006Z","มาสเตอร์การใช้สีและฟอนต์ใน Tailwind CSS อย่างมืออาชีพ เรียนรู้ Color Harmony, Typography System, Dark Mode Implementation และสร้าง Design System สมบูรณ์พร้อม Component Library ที่ใช้งานได้จริง","ep3-tailwind-css-color-typography-design-system-thai","2026-04-25 02:47:19.522Z",1,{"th":76}]