EP 3: เล่นสีและฟอนต์ให้เก่ง: เทคนิคสร้าง Design System ด้วย Tailwind CSS

คุณเคยสงสัยไหมว่าทำไมเว็บไซต์บางเว็บดูดีมาก สีสันลงตัว ฟอนต์อ่านง่าย และดูมีระดับ แต่บางเว็บกลับดูใช้งานยาก ฟอนต์อ่านลำบาก สีใช้ไม่เข้ากัน?

ความลับอยู่ที่การใช้สีและฟอนต์อย่างมีระบบ! ไม่ใช่แค่เลือกสีที่ชอบ หรือใช้ฟอนต์ที่หน้าตาสวย แต่เป็นการสร้าง Design System ที่สมดุล สม่ำเสมอ และเหมาะสมกับผู้ใช้งาน

วันนี้เราจะมาเรียนรู้การใช้สีและฟอนต์ใน Tailwind CSS อย่างเซียน ตั้งแต่เทคนิคการเลือกสี การสร้าง Color Palette ที่สวยงาม ระบบ Typography ที่อ่านง่าย จนถึงการทำ Dark Mode ที่ใช้งานได้จริง พร้อมสร้าง Design System ที่ครบครัน!

ทำไมสีและฟอนต์ถึงสำคัญกับ User Experience

ผลกระทบของสีต่อการรับรู้

สีไม่ได้เป็นแค่เรื่องความสวยงาม แต่มีผลต่อจิตวิทยาและพฤติกรรมของผู้ใช้:

สีแดง (Red) - ความเร่งด่วน, อันตราย, ความตื่นเต้น

<!-- ปุ่มลบหรือยกเลิก -->
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
  ลบข้อมูล
</button>

สีเขียว (Green) - ความสำเร็จ, ความปลอดภัย, การดำเนินการ

<!-- ปุ่มบันทึกหรือยืนยัน -->
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
  บันทึก
</button>

สีน้ำเงิน (Blue) - ความน่าเชื่อถือ, ความเป็นมืออาชีพ

<!-- ปุ่มหลักของเว็บไซต์ -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  เริ่มต้นใช้งาน
</button>

ปัญหาที่เจอบ่อยและผลกระทบ

1. Contrast ไม่พอ - ทำให้อ่านยาก โดยเฉพาะผู้ใช้ที่มีปัญหาสายตา

<!-- ❌ ผิด: Contrast ไม่พอ -->
<p class="text-gray-400 bg-gray-300">ข้อความนี้อ่านยาก</p>

<!-- ✅ ถูก: Contrast เพียงพอ -->
<p class="text-gray-800 bg-gray-100">ข้อความนี้อ่านง่าย</p>

2. ใช้สีมากเกินไป - ทำให้ดูรก ไม่มี Focus

<!-- ❌ ผิด: สีมากเกินไป -->
<div class="bg-red-500">
  <h1 class="text-blue-600">หัวข้อ</h1>
  <p class="text-green-500">รายละเอียด</p>
  <button class="bg-yellow-400 text-purple-600">ปุ่ม</button>
</div>

<!-- ✅ ถูก: ใช้สีอย่างมีระบบ -->
<div class="bg-gray-50">
  <h1 class="text-gray-900">หัวข้อ</h1>
  <p class="text-gray-600">รายละเอียด</p>
  <button class="bg-blue-500 text-white">ปุ่ม</button>
</div>

ระบบสีใน Tailwind CSS แบบครบครัน

Color Palette ที่ออกแบบมาอย่างดี

Tailwind CSS มีระบบสีที่ครอบคลุม โดยแต่ละสีมี 10-11 ระดับความเข้ม:

<!-- สีเทา 11 ระดับ (50-950) -->
<div class="bg-gray-50">สีเทาอ่อนที่สุด</div>
<div class="bg-gray-100">สีเทาอ่อนมาก</div>
<div class="bg-gray-200">สีเทาอ่อน</div>
<div class="bg-gray-300">สีเทาปานกลาง</div>
<div class="bg-gray-400">สีเทาปานกลางเข้ม</div>
<div class="bg-gray-500">สีเทามาตรฐาน</div>
<div class="bg-gray-600">สีเทาเข้ม</div>
<div class="bg-gray-700">สีเทาเข้มมาก</div>
<div class="bg-gray-800">สีเทาเข้มมากพิเศษ</div>
<div class="bg-gray-900">สีเทาเข้มที่สุด</div>
<div class="bg-gray-950">สีเทาดำ (v3.3+)</div>

เทคนิคการเลือกสีแบบมืออาชีพ

1. Color Harmony (การเข้ากันของสี)

Monochromatic - ใช้สีเดียวกันหลายโทน

<div class="space-y-4">
  <div class="bg-blue-100 p-4 rounded">Background อ่อน</div>
  <div class="bg-blue-300 p-4 rounded">Background กลาง</div>
  <div class="bg-blue-500 p-4 rounded text-white">Background เข้ม</div>
  <div class="bg-blue-700 p-4 rounded text-white">Background เข้มมาก</div>
</div>

Complementary - ใช้สีที่ตรงข้ามกัน

<div class="bg-blue-500 text-orange-500 p-4 rounded">
  สีน้ำเงินกับส้ม (ตรงข้ามกัน)
</div>

Analogous - ใช้สีที่อยู่ข้างๆ กัน

<div class="flex space-x-2">
  <div class="bg-blue-500 p-4 rounded text-white">Blue</div>
  <div class="bg-indigo-500 p-4 rounded text-white">Indigo</div>
  <div class="bg-purple-500 p-4 rounded text-white">Purple</div>
</div>

2. Semantic Colors (สีตามความหมาย)

<!-- ระบบสีที่สื่อความหมาย -->
<div class="space-y-4">
  <!-- Success -->
  <div class="bg-green-100 border border-green-300 text-green-800 p-4 rounded">
    <h3 class="font-semibold">Success</h3>
    <p>การดำเนินการสำเร็จ</p>
  </div>
  
  <!-- Warning -->
  <div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded">
    <h3 class="font-semibold">Warning</h3>
    <p>ควรระวังหรือตรวจสอบ</p>
  </div>
  
  <!-- Error -->
  <div class="bg-red-100 border border-red-300 text-red-800 p-4 rounded">
    <h3 class="font-semibold">Error</h3>
    <p>เกิดข้อผิดพลาด</p>
  </div>
  
  <!-- Info -->
  <div class="bg-blue-100 border border-blue-300 text-blue-800 p-4 rounded">
    <h3 class="font-semibold">Information</h3>
    <p>ข้อมูลเพิ่มเติม</p>
  </div>
</div>

การปรับแต่งสีใน Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a8a',
        },
        'secondary': {
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
        }
      }
    }
  }
}

<!-- ใช้สีที่กำหนดเอง -->
<div class="bg-brand-500 text-white p-6">
  <h1 class="text-brand-100">Brand Colors</h1>
  <p class="text-secondary-300">Custom color system</p>
</div>

Gradient และ Effects

<!-- Gradient Backgrounds -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white rounded-lg">
  <h2 class="text-2xl font-bold">Gradient Background</h2>
</div>

<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 p-8 text-white rounded-lg">
  <h2 class="text-2xl font-bold">Multi-color Gradient</h2>
</div>

<!-- Gradient Text (ต้องใช้ CSS เพิ่มเติม) -->
<style>
.gradient-text {
  background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>

<h1 class="text-6xl font-bold gradient-text">
  Gradient Text
</h1>

Typography System ที่ทำให้เว็บไซต์ดูโปรเฟสชันนัล

Font Family และการจัดการ

Tailwind มี font family utilities พื้นฐาน:

<!-- Font Families พื้นฐาน -->
<p class="font-sans">
  Sans-serif: ฟอนต์ที่ใช้งานทั่วไป เหมาะสำหรับเนื้อหาและ UI
</p>

<p class="font-serif">
  Serif: ฟอนต์แบบดั้งเดิม เหมาะสำหรับหัวข้อและเนื้อหายาว
</p>

<p class="font-mono">
  Monospace: ฟอนต์ความกว้างเท่ากัน เหมาะสำหรับโค้ดและตัวเลข
</p>

การเพิ่ม Custom Fonts

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'heading': ['Inter', 'system-ui', 'sans-serif'],
        'body': ['Inter', 'system-ui', 'sans-serif'],
        'mono': ['JetBrains Mono', 'Courier New', 'monospace'],
      }
    }
  }
}

<!-- ใช้ Custom Fonts -->
<h1 class="font-heading text-4xl font-bold">หัวข้อด้วย Inter Font</h1>
<p class="font-body text-lg">เนื้อหาด้วย Inter Font</p>
<code class="font-mono text-sm">console.log('Hello World');</code>

Font Size และ Line Height ที่เหมาะสม

<!-- ระบบขนาดฟอนต์ที่สมดุล -->
<div class="space-y-4">
  <h1 class="text-5xl leading-tight font-bold text-gray-900">
    หัวข้อหลัก (5xl + leading-tight)
  </h1>
  
  <h2 class="text-3xl leading-relaxed font-semibold text-gray-800">
    หัวข้อรอง (3xl + leading-relaxed)
  </h2>
  
  <h3 class="text-xl leading-normal font-medium text-gray-700">
    หัวข้อย่อย (xl + leading-normal)
  </h3>
  
  <p class="text-base leading-relaxed text-gray-600">
    เนื้อหาปกติ (base + leading-relaxed) - ขนาดพอดี อ่านสบายตา
  </p>
  
  <p class="text-sm leading-normal text-gray-500">
    ข้อความรอง (sm + leading-normal)
  </p>
</div>

Typography Scale ที่แนะนำ

<!-- Scale สำหรับการใช้งานจริง -->
<div class="space-y-6">
  <!-- Display Text -->
  <h1 class="text-6xl leading-none font-bold">Display Text</h1>
  
  <!-- Page Title -->
  <h1 class="text-4xl leading-tight font-bold">Page Title</h1>
  
  <!-- Section Title -->
  <h2 class="text-2xl leading-snug font-semibold">Section Title</h2>
  
  <!-- Card Title -->
  <h3 class="text-lg leading-normal font-medium">Card Title</h3>
  
  <!-- Body Text -->
  <p class="text-base leading-relaxed">Body text for comfortable reading</p>
  
  <!-- Caption -->
  <p class="text-sm leading-normal">Caption or metadata</p>
  
  <!-- Fine Print -->
  <p class="text-xs leading-normal">Fine print or labels</p>
</div>

Font Weight และ Visual Hierarchy

<!-- การสร้าง Visual Hierarchy -->
<article class="max-w-4xl mx-auto p-8">
  <!-- Primary Heading -->
  <h1 class="text-4xl font-black text-gray-900 mb-2">
    The Ultimate Guide to Typography
  </h1>
  
  <!-- Subtitle -->
  <p class="text-xl font-light text-gray-600 mb-8">
    Everything you need to know about choosing and using fonts
  </p>
  
  <!-- Section Heading -->
  <h2 class="text-2xl font-bold text-gray-800 mt-12 mb-4">
    Why Typography Matters
  </h2>
  
  <!-- Body Text -->
  <p class="text-base font-normal text-gray-700 mb-4 leading-relaxed">
    Typography is not just about making text look pretty. It's about creating a hierarchy 
    that guides your readers through your content in a logical and comfortable way.
  </p>
  
  <!-- Emphasized Text -->
  <p class="text-base font-medium text-gray-800 mb-4">
    Good typography improves readability and user experience.
  </p>
  
  <!-- Quote -->
  <blockquote class="text-lg font-medium italic text-gray-900 border-l-4 border-blue-500 pl-6 my-8">
    "Typography is the craft of endowing human language with a durable visual form."
  </blockquote>
</article>

สร้าง Design System ด้วย Tailwind

กำหนด Design Tokens

// tailwind.config.js - ระบบ Design Tokens ที่ครบครัน
module.exports = {
  theme: {
    extend: {
      colors: {
        // Primary Colors
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        // Secondary Colors
        secondary: {
          50: '#f5f3ff',
          500: '#8b5cf6',
          600: '#7c3aed',
        },
        // Neutral Colors
        neutral: {
          50: '#f9fafb',
          100: '#f3f4f6',
          500: '#6b7280',
          800: '#1f2937',
          900: '#111827',
        }
      },
      fontFamily: {
        'heading': ['Inter', 'system-ui', 'sans-serif'],
        'body': ['Inter', 'system-ui', 'sans-serif'],
        'mono': ['JetBrains Mono', 'Courier New', 'monospace'],
      },
      spacing: {
        'xs': '0.5rem',
        'sm': '1rem',
        'md': '1.5rem',
        'lg': '2rem',
        'xl': '3rem',
      },
      borderRadius: {
        'sm': '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'xl': '0.75rem',
      }
    }
  }
}

Component Library พื้นฐาน

Button System:

<!-- Button Variants -->
<div class="space-x-4 space-y-4">
  <!-- Primary Button -->
  <button class="bg-primary-500 hover:bg-primary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors">
    Primary Action
  </button>
  
  <!-- Secondary Button -->
  <button class="bg-secondary-500 hover:bg-secondary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors">
    Secondary Action
  </button>
  
  <!-- Outline Button -->
  <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">
    Outline Button
  </button>
  
  <!-- Ghost Button -->
  <button class="text-primary-500 hover:bg-primary-50 font-medium px-6 py-3 rounded-lg transition-colors">
    Ghost Button
  </button>
  
  <!-- Disabled Button -->
  <button class="bg-neutral-300 text-neutral-500 font-medium px-6 py-3 rounded-lg cursor-not-allowed" disabled>
    Disabled Button
  </button>
</div>

<!-- Button Sizes -->
<div class="space-x-4">
  <button class="bg-primary-500 text-white font-medium px-3 py-1.5 text-sm rounded">Small</button>
  <button class="bg-primary-500 text-white font-medium px-4 py-2 rounded-md">Medium</button>
  <button class="bg-primary-500 text-white font-medium px-6 py-3 rounded-lg">Large</button>
  <button class="bg-primary-500 text-white font-medium px-8 py-4 text-lg rounded-xl">Extra Large</button>
</div>

Card System:

<!-- Card Variants -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Basic Card -->
  <div class="bg-white rounded-xl shadow-sm border border-neutral-200 p-6">
    <h3 class="text-lg font-semibold text-neutral-900 mb-2">Basic Card</h3>
    <p class="text-neutral-600">Simple card with basic styling</p>
  </div>
  
  <!-- Featured Card -->
  <div class="bg-gradient-to-br from-primary-500 to-secondary-500 rounded-xl shadow-lg p-6 text-white">
    <h3 class="text-lg font-semibold mb-2">Featured Card</h3>
    <p class="opacity-90">Special card with gradient background</p>
  </div>
  
  <!-- Interactive Card -->
  <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">
    <h3 class="text-lg font-semibold text-neutral-900 mb-2">Interactive Card</h3>
    <p class="text-neutral-600">Card with hover effects</p>
  </div>
</div>

Form Elements:

<!-- Form System -->
<form class="space-y-6 max-w-md">
  <!-- Input Field -->
  <div>
    <label class="block text-sm font-medium text-neutral-700 mb-2">
      Email Address
    </label>
    <input 
      type="email" 
      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"
      placeholder="your@email.com"
    >
  </div>
  
  <!-- Textarea -->
  <div>
    <label class="block text-sm font-medium text-neutral-700 mb-2">
      Message
    </label>
    <textarea 
      rows="4"
      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"
      placeholder="Your message here..."
    ></textarea>
  </div>
  
  <!-- Select -->
  <div>
    <label class="block text-sm font-medium text-neutral-700 mb-2">
      Category
    </label>
    <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">
      <option>Choose a category</option>
      <option>General</option>
      <option>Technical</option>
      <option>Billing</option>
    </select>
  </div>
  
  <!-- Checkbox -->
  <div class="flex items-center">
    <input 
      type="checkbox" 
      id="newsletter"
      class="w-4 h-4 text-primary-500 border-neutral-300 rounded focus:ring-primary-500"
    >
    <label for="newsletter" class="ml-2 text-sm text-neutral-700">
      Subscribe to newsletter
    </label>
  </div>
</form>

Dark Mode ที่ใช้งานได้จริง

การตั้งค่า Dark Mode ใน Tailwind

// tailwind.config.js
module.exports = {
  darkMode: 'class', // เปิดใช้งาน dark mode
  theme: {
    extend: {
      // colors configuration
    }
  }
}

Color Strategy สำหรับ Dark Mode

<!-- คอมโพเนนต์ที่รองรับ Dark Mode -->
<div class="bg-white dark:bg-gray-900 min-h-screen transition-colors">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-4 py-4">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
        My Website
      </h1>
    </div>
  </header>
  
  <!-- Main Content -->
  <main class="max-w-4xl mx-auto p-8">
    <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-gray-900/20 p-8">
      <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
        Dark Mode Article
      </h2>
      
      <p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        This article demonstrates how to create a proper dark mode implementation 
        with good contrast ratios and comfortable reading experience.
      </p>
      
      <!-- Code Block -->
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 mb-6">
        <code class="text-sm text-gray-800 dark:text-gray-200 font-mono">
          const darkMode = document.querySelector('.dark');
        </code>
      </div>
      
      <!-- Buttons -->
      <div class="flex space-x-4">
        <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">
          Primary Action
        </button>
        
        <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">
          Secondary Action
        </button>
      </div>
    </article>
  </main>
</div>

Dark Mode Toggle Implementation

<!-- Dark Mode Toggle Button -->
<button 
  id="theme-toggle" 
  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"
>
  <!-- Sun Icon (Light Mode) -->
  <svg id="sun-icon" class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
    <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"></path>
  </svg>
  
  <!-- Moon Icon (Dark Mode) -->
  <svg id="moon-icon" class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
  </svg>
</button>

<script>
// Dark Mode Toggle JavaScript
function initTheme() {
  // ตรวจสอบ preference ที่บันทึกไว้
  const savedTheme = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  
  if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}

// เรียกใช้เมื่อโหลดหน้า
initTheme();

// Toggle function
document.getElementById('theme-toggle').addEventListener('click', function() {
  const isDark = document.documentElement.classList.contains('dark');
  
  if (isDark) {
    document.documentElement.classList.remove('dark');
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  }
});
</script>

Typography ใน Dark Mode

<!-- Typography ที่เหมาะสมกับ Dark Mode -->
<div class="bg-white dark:bg-gray-900 p-8 rounded-xl">
  <!-- หัวข้อหลัก -->
  <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
    Typography in Dark Mode
  </h1>
  
  <!-- หัวข้อรอง -->
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6">
    Proper Contrast and Readability
  </h2>
  
  <!-- เนื้อหาหลัก -->
  <p class="text-base text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
    ในการออกแบบ Typography สำหรับ Dark Mode จำเป็นต้องคำนึงถึง contrast ratio 
    ที่เหมาะสม เพื่อให้อ่านง่ายและไม่เมื่อยตา
  </p>
  
  <!-- ข้อความเน้น -->
  <p class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">
    ข้อความสำคัญควรมี contrast ที่สูงขึ้น
  </p>
  
  <!-- ข้อความรอง -->
  <p class="text-sm text-gray-600 dark:text-gray-400">
    ข้อความรองสามารถมี contrast ที่ต่ำกว่าได้ แต่ยังคงอ่านได้ชัดเจน
  </p>
  
  <!-- ลิงก์ -->
  <p class="mt-4">
    <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline">
      ลิงก์ที่มี contrast เหมาะสมในทั้งสองโหมด
    </a>
  </p>
</div>

เทคนิคขั้นสูง: Animation และ Visual Effects

Color Transitions

<!-- Smooth Color Transitions -->
<div class="space-y-6">
  <!-- Color Shift on Hover -->
  <div class="group bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-blue-900/20 p-6 rounded-xl border border-gray-200 dark:border-gray-700 transition-all duration-300">
    <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">
      Interactive Card
    </h3>
    <p class="text-gray-600 dark:text-gray-300 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
      Colors change smoothly on hover
    </p>
  </div>
  
  <!-- Background Animation -->
  <div class="relative overflow-hidden bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-8 rounded-xl text-white">
    <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"></div>
    <div class="relative z-10">
      <h3 class="text-2xl font-bold">Gradient Overlay</h3>
      <p>Hover to see the gradient shift</p>
    </div>
  </div>
</div>

Typography Animations

<!-- Text Effects ที่ใช้ CSS Animation -->
<div class="space-y-8">
  <!-- Fade In Text -->
  <div class="opacity-0 animate-pulse">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
      Animated Text
    </h2>
  </div>
  
  <!-- Hover Text Effect -->
  <div class="group cursor-pointer">
    <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">
      Text with smooth color transition on hover
    </p>
  </div>
</div>

<!-- Custom CSS for more advanced animations -->
<style>
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}
</style>

<!-- ใช้ custom animation -->
<div class="animate-fade-in-up">
  <h3 class="text-2xl font-semibold">Text slides up and fades in</h3>
</div>

โปรเจ็กต์ปฏิบัติ: สร้าง Design System สมบูรณ์

มาสร้าง Style Guide และ Component Library ที่ครบครัน:

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Design System - Style Guide</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50: '#eff6ff',
                            100: '#dbeafe', 
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors">

<!-- Header with Theme Toggle -->
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Design System</h1>
        
        <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">
            <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
                <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"></path>
            </svg>
            <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
            </svg>
        </button>
    </div>
</header>

<main class="max-w-7xl mx-auto p-8">
    <!-- Color Palette Section -->
    <section class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Color Palette</h2>
        
        <!-- Primary Colors -->
        <div class="mb-8">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Primary Colors</h3>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
                    <div class="w-full h-16 bg-brand-50 rounded mb-2"></div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-50</p>
                </div>
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
                    <div class="w-full h-16 bg-brand-100 rounded mb-2"></div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-100</p>
                </div>
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
                    <div class="w-full h-16 bg-brand-500 rounded mb-2"></div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-500</p>
                </div>
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
                    <div class="w-full h-16 bg-brand-600 rounded mb-2"></div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-600</p>
                </div>
                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
                    <div class="w-full h-16 bg-brand-700 rounded mb-2"></div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-700</p>
                </div>
            </div>
        </div>
        
        <!-- Semantic Colors -->
        <div class="mb-8">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Semantic Colors</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-green-100 dark:bg-green-900/30 p-4 rounded-lg text-center border border-green-200 dark:border-green-700">
                    <div class="w-full h-16 bg-green-500 rounded mb-2"></div>
                    <p class="text-sm font-medium text-green-800 dark:text-green-200">Success</p>
                </div>
                <div class="bg-yellow-100 dark:bg-yellow-900/30 p-4 rounded-lg text-center border border-yellow-200 dark:border-yellow-700">
                    <div class="w-full h-16 bg-yellow-500 rounded mb-2"></div>
                    <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Warning</p>
                </div>
                <div class="bg-red-100 dark:bg-red-900/30 p-4 rounded-lg text-center border border-red-200 dark:border-red-700">
                    <div class="w-full h-16 bg-red-500 rounded mb-2"></div>
                    <p class="text-sm font-medium text-red-800 dark:text-red-200">Error</p>
                </div>
                <div class="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg text-center border border-blue-200 dark:border-blue-700">
                    <div class="w-full h-16 bg-blue-500 rounded mb-2"></div>
                    <p class="text-sm font-medium text-blue-800 dark:text-blue-200">Info</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Typography Section -->
    <section class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Typography</h2>
        
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700">
            <div class="space-y-6">
                <div>
                    <h1 class="text-6xl font-bold text-gray-900 dark:text-white">Display Text</h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-6xl font-bold</p>
                </div>
                
                <div>
                    <h1 class="text-4xl font-bold text-gray-900 dark:text-white">Heading 1</h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-4xl font-bold</p>
                </div>
                
                <div>
                    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Heading 2</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-2xl font-semibold</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Heading 3</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-lg font-medium</p>
                </div>
                
                <div>
                    <p class="text-base text-gray-700 dark:text-gray-300">Body text สำหรับเนื้อหาทั่วไป ขนาดพอดี อ่านสบายตา</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-base</p>
                </div>
                
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Small text สำหรับ caption หรือข้อมูลเพิ่มเติม</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-sm</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Components Section -->
    <section class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Components</h2>
        
        <!-- Buttons -->
        <div class="mb-12">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Buttons</h3>
            <div class="flex flex-wrap gap-4">
                <button class="bg-brand-500 hover:bg-brand-600 text-white font-medium px-6 py-3 rounded-lg transition-colors">
                    Primary
                </button>
                <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">
                    Secondary
                </button>
                <button class="text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-900/20 font-medium px-6 py-3 rounded-lg transition-colors">
                    Ghost
                </button>
                <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">
                    Disabled
                </button>
            </div>
        </div>
        
        <!-- Cards -->
        <div class="mb-12">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Cards</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Basic Card</h4>
                    <p class="text-gray-600 dark:text-gray-300">Simple card with border and shadow</p>
                </div>
                
                <div class="bg-gradient-to-br from-brand-500 to-purple-600 rounded-xl shadow-lg p-6 text-white">
                    <h4 class="text-lg font-semibold mb-2">Featured Card</h4>
                    <p class="opacity-90">Card with gradient background</p>
                </div>
                
                <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">
                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Interactive Card</h4>
                    <p class="text-gray-600 dark:text-gray-300">Hover to see the effect</p>
                </div>
            </div>
        </div>
        
        <!-- Forms -->
        <div class="mb-12">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Form Elements</h3>
            <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">
                <form class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Email
                        </label>
                        <input 
                            type="email" 
                            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"
                            placeholder="your@email.com"
                        >
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Message
                        </label>
                        <textarea 
                            rows="4"
                            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"
                            placeholder="Your message..."
                        ></textarea>
                    </div>
                    
                    <button type="submit" class="w-full bg-brand-500 hover:bg-brand-600 text-white font-medium py-3 rounded-lg transition-colors">
                        Send Message
                    </button>
                </form>
            </div>
        </div>
    </section>
</main>

<script>
// Dark Mode Toggle
function initTheme() {
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
        document.documentElement.classList.add('dark');
    }
}

initTheme();

document.getElementById('theme-toggle').addEventListener('click', function() {
    const isDark = document.documentElement.classList.contains('dark');
    
    if (isDark) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
    } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
    }
});
</script>

</body>
</html>

Performance และ Best Practices

1. Optimizing Colors และ Typography

// tailwind.config.js - การ optimize สีและฟอนต์
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // เลือกเฉพาะสีที่ใช้จริง
      colors: {
        primary: '#3b82f6',
        secondary: '#6b7280',
        success: '#10b981',
        warning: '#f59e0b',
        error: '#ef4444',
      },
      // ใช้ system fonts เพื่อประสิทธิภาพที่ดี
      fontFamily: {
        sans: ['system-ui', '-apple-system', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Menlo', 'Monaco', 'monospace'],
      }
    }
  }
}

2. Accessibility Guidelines

<!-- ตัวอย่างการใช้สีที่เป็นมิตรกับผู้พิการ -->
<div class="space-y-4">
  <!-- Contrast ratio ที่เหมาะสม (4.5:1 สำหรับ normal text) -->
  <div class="bg-white text-gray-900 p-4 rounded">
    <p>ข้อความนี้มี contrast ratio ที่เหมาะสม</p>
  </div>
  
  <!-- ข้อความสำคัญ (3:1 สำหรับ large text) -->
  <div class="bg-red-50 border border-red-200 text-red-800 p-4 rounded">
    <p class="font-medium">ข้อผิดพลาด: กรุณาตรวจสอบข้อมูล</p>
  </div>
  
  <!-- ลิงก์ที่เข้าถึงได้ -->
  <p>
    อ่านเพิ่มเติมใน 
    <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">
      เอกสารประกอบ
    </a>
  </p>
  
  <!-- การใช้สีไม่ใช่วิธีเดียวในการสื่อสาร -->
  <div class="flex items-center space-x-2">
    <span class="w-3 h-3 bg-green-500 rounded-full"></span>
    <span class="text-green-700">✓ สำเร็จ</span>
  </div>
</div>

3. เทคนิคการลด CSS Bundle Size

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js}",
  ],
  theme: {
    // ใช้เฉพาะสีที่จำเป็น
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      gray: {
        100: '#f3f4f6',
        500: '#6b7280',
        900: '#111827',
      },
      blue: {
        500: '#3b82f6',
        600: '#2563eb',
      }
    },
    // ลบ utility classes ที่ไม่ใช้
    extend: {}
  },
  // ปิด plugin ที่ไม่จำเป็น
  corePlugins: {
    float: false,
    clear: false,
    skew: false,
  }
}

สรุป

ใน EP 3 นี้ เราได้เรียนรู้การใช้สีและฟอนต์ใน Tailwind CSS อย่างครบถ้วน:

สิ่งสำคัญที่ได้เรียนรู้:

ระบบสีใน Tailwind CSS ที่มี 22 กลุ่มสี แต่ละสีมี 11 ระดับความเข้ม
เทคนิคการเลือกสี แบบมืออาชีพด้วย Color Harmony และ Semantic Colors
Typography System ที่สร้าง Visual Hierarchy ที่ดี
การสร้าง Design System ที่สม่ำเสมอและใช้งานง่าย
Dark Mode Implementation ที่ใช้งานได้จริงและไม่มี flicker
Performance และ Accessibility ที่ควรคำนึงถึง

เทคนิคสำคัญที่ต้องจำ:

ใช้ contrast ratio ที่เหมาะสม - อย่างน้อย 4.5:1 สำหรับ normal text
สร้างระบบสีแบบ semantic - success, warning, error, info
ใช้ Typography scale อย่างสม่ำเสมอ - จาก text-xs ถึง text-6xl
ออกแบบ Dark Mode ตั้งแต่เริ่มต้น - ไม่ใช่เพิ่มทีหลัง
ทดสอบ accessibility เสมอ - ใช้เครื่องมือตรวจ contrast

การเข้าใจและใช้สี-ฟอนต์อย่างถูกต้องจะทำให้เว็บไซต์ของคุณดูมืออาชีพ สร้างประสบการณ์ที่ดีแก่ผู้ใช้ และโดดเด่นจากคู่แข่ง

EP 4 เรื่อง "Flexbox และ Grid ใน Tailwind: สร้าง Layout ระดับโปรได้ภายใน 10 นาที" เราจะมาเรียนรู้การใช้ Flexbox และ CSS Grid อย่างเซียน การสร้าง Layout ที่ซับซ้อน Responsive Design ขั้นสูง และเทคนิคการจัดวางองค์ประกอบที่ทำให้เว็บไซต์ดูสวยงามและใช้งานง่าย

พร้อมที่จะเป็นมาสเตอร์ Layout ด้วย Tailwind CSS แล้วใช่ไหม? ติดตาม Superdev School เพื่อไม่พลาดเทคนิคโปรที่จะทำให้คุณสร้าง Layout ได้อย่างมืออาชีพ!

การออกแบบที่ดีเริ่มต้นจากสีและฟอนต์ที่เหมาะสม มาสร้างเว็บไซต์ที่สวยงามและใช้งานง่ายด้วย Tailwind CSS กันเถอะ! 🎨

อ่านบทความ Series อื่นๆ

🔵 Facebook: Superdev School (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school