[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-tailwind-css-customization-theme-plugin-all--*":3,"academy-blog-translations-30c5a17y5b1hkmq":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 8: ปรับแต่ง Tailwind ให้เป็นของตัวเอง: Theme และ Plugin แบบเซียน","sclblg987654321","school_blog_translations","\u003Cp>ถึงเวลาแล้วที่เราจะก้าวขึ้นสู่ระดับมืออาชีพของ Tailwind CSS! หลังจากที่เรียนรู้พื้นฐานและเทคนิคต่างๆ มาแล้ว วันนี้เราจะมาเรียนรู้การปรับแต่ง Tailwind CSS ให้ตอบโจทย์โปรเจ็กต์ของเราอย่างสมบูรณ์แบบ\u003C\u002Fp>\u003Cp>การปรับแต่ง Tailwind CSS ทำได้หลายวิธี ตั้งแต่การใช้ไฟล์ \u003Ccode>tailwind.config.js\u003C\u002Fcode> ไปจนถึงการสร้าง Custom CSS และการใช้ Plugin ต่างๆ มาดูกันว่าเราจะทำให้ Tailwind CSS เป็นของเราได้อย่างไร\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>การปรับแต่ง Theme ใน Tailwind CSS\u003C\u002Fh2>\u003Ch3>การใช้ tailwind.config.js\u003C\u002Fh3>\u003Cp>ไฟล์ \u003Ccode>tailwind.config.js\u003C\u002Fcode> เป็นหัวใจสำคัญในการปรับแต่ง Tailwind CSS ให้เหมาะกับโปรเจ็กต์:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  content: [\n    '.\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    '.\u002Fpages\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    '.\u002Fcomponents\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}'\n  ],\n  theme: {\n    extend: {\n      \u002F\u002F Custom Colors\n      colors: {\n        primary: {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          200: '#bfdbfe',\n          300: '#93c5fd',\n          400: '#60a5fa',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n          800: '#1e40af',\n          900: '#1e3a8a',\n          950: '#172554'\n        },\n        secondary: {\n          50: '#fdf4ff',\n          100: '#fae8ff',\n          200: '#f5d0fe',\n          300: '#f0abfc',\n          400: '#e879f9',\n          500: '#d946ef',\n          600: '#c026d3',\n          700: '#a21caf',\n          800: '#86198f',\n          900: '#701a75',\n          950: '#4a044e'\n        },\n        gray: {\n          50: '#f9fafb',\n          100: '#f3f4f6',\n          200: '#e5e7eb',\n          300: '#d1d5db',\n          400: '#9ca3af',\n          500: '#6b7280',\n          600: '#4b5563',\n          700: '#374151',\n          800: '#1f2937',\n          900: '#111827',\n          950: '#030712'\n        }\n      },\n      \n      \u002F\u002F Custom Fonts\n      fontFamily: {\n        sans: ['Inter Variable', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],\n        serif: ['Playfair Display Variable', 'Playfair Display', 'ui-serif', 'serif'],\n        mono: ['JetBrains Mono Variable', 'JetBrains Mono', 'ui-monospace', 'monospace'],\n        display: ['Cal Sans', 'Inter Variable', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']\n      },\n      \n      \u002F\u002F Custom Spacing\n      spacing: {\n        '18': '4.5rem',\n        '88': '22rem',\n        '128': '32rem'\n      },\n      \n      \u002F\u002F Custom Shadows\n      boxShadow: {\n        'soft': '0 2px 15px rgba(0, 0, 0, 0.08)',\n        'medium': '0 4px 25px rgba(0, 0, 0, 0.15)',\n        'hard': '0 10px 40px rgba(0, 0, 0, 0.2)',\n        'glow': '0 0 20px rgba(59, 130, 246, 0.3)',\n        'glow-green': '0 0 20px rgba(34, 197, 94, 0.3)',\n        'glow-red': '0 0 20px rgba(239, 68, 68, 0.3)'\n      },\n      \n      \u002F\u002F Custom Border Radius\n      borderRadius: {\n        'xl': '1rem',\n        '2xl': '1.5rem',\n        '3xl': '2rem',\n        '4xl': '2.5rem'\n      },\n      \n      \u002F\u002F Custom Animations\n      animation: {\n        'fade-in': 'fadeIn 0.5s ease-out',\n        'slide-up': 'slideUp 0.5s ease-out',\n        'slide-down': 'slideDown 0.5s ease-out',\n        'slide-left': 'slideLeft 0.5s ease-out',\n        'slide-right': 'slideRight 0.5s ease-out',\n        'bounce-in': 'bounceIn 0.6s ease-out',\n        'float': 'float 3s ease-in-out infinite'\n      },\n      \n      \u002F\u002F Custom Keyframes\n      keyframes: {\n        fadeIn: {\n          '0%': { opacity: '0' },\n          '100%': { opacity: '1' }\n        },\n        slideUp: {\n          '0%': { opacity: '0', transform: 'translateY(30px)' },\n          '100%': { opacity: '1', transform: 'translateY(0)' }\n        },\n        slideDown: {\n          '0%': { opacity: '0', transform: 'translateY(-30px)' },\n          '100%': { opacity: '1', transform: 'translateY(0)' }\n        },\n        slideLeft: {\n          '0%': { opacity: '0', transform: 'translateX(30px)' },\n          '100%': { opacity: '1', transform: 'translateX(0)' }\n        },\n        slideRight: {\n          '0%': { opacity: '0', transform: 'translateX(-30px)' },\n          '100%': { opacity: '1', transform: 'translateX(0)' }\n        },\n        bounceIn: {\n          '0%': { opacity: '0', transform: 'scale(0.3)' },\n          '50%': { opacity: '1', transform: 'scale(1.05)' },\n          '70%': { transform: 'scale(0.9)' },\n          '100%': { opacity: '1', transform: 'scale(1)' }\n        },\n        float: {\n          '0%, 100%': { transform: 'translateY(0px)' },\n          '50%': { transform: 'translateY(-10px)' }\n        }\n      },\n      \n      \u002F\u002F Custom Breakpoints\n      screens: {\n        'xs': '475px',\n        'sm': '640px',\n        'md': '768px',\n        'lg': '1024px',\n        'xl': '1280px',\n        '2xl': '1536px',\n        '3xl': '1920px'\n      }\n    }\n  },\n  darkMode: 'class',\n  plugins: []\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การใช้งาน Custom Theme\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้สีที่เราสร้างขึ้น -->\n<div class=\"bg-primary-500 hover:bg-primary-600 text-white p-6 rounded-2xl shadow-soft\">\n  <h3 class=\"font-display text-xl font-semibold mb-2\">Custom Primary Color<\u002Fh3>\n  <p class=\"text-primary-100\">ใช้สีและฟอนต์ที่กำหนดเอง<\u002Fp>\n<\u002Fdiv>\n\n<!-- ใช้ animation ที่สร้างขึ้น -->\n<div class=\"animate-fade-in\">\n  <h1 class=\"text-4xl font-display font-bold animate-slide-up\">\n    Welcome Animation\n  <\u002Fh1>\n  <p class=\"text-lg animate-slide-up animation-delay-200\">\n    Text ที่เลื่อนขึ้นมา\n  <\u002Fp>\n<\u002Fdiv>\n\n<!-- ใช้ spacing และ shadow ที่กำหนดเอง -->\n<div class=\"p-18 m-88 shadow-glow rounded-3xl\">\n  <div class=\"w-128 h-32 bg-gradient-to-r from-primary-500 to-secondary-500\">\n    Custom spacing และ shadow\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง Design Tokens ระบบ\u003C\u002Fh2>\u003Ch3>Color System แบบมืออาชีพ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - Advanced Color System\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Brand Colors\n        brand: {\n          primary: '#3b82f6',\n          secondary: '#8b5cf6',\n          accent: '#f59e0b'\n        },\n        \n        \u002F\u002F Semantic Colors\n        success: {\n          50: '#f0fdf4',\n          100: '#dcfce7',\n          500: '#22c55e',\n          600: '#16a34a',\n          700: '#15803d'\n        },\n        warning: {\n          50: '#fffbeb',\n          100: '#fef3c7',\n          500: '#f59e0b',\n          600: '#d97706',\n          700: '#b45309'\n        },\n        error: {\n          50: '#fef2f2',\n          100: '#fee2e2',\n          500: '#ef4444',\n          600: '#dc2626',\n          700: '#b91c1c'\n        },\n        info: {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8'\n        },\n        \n        \u002F\u002F Neutral Colors\n        neutral: {\n          0: '#ffffff',\n          50: '#fafafa',\n          100: '#f4f4f5',\n          200: '#e4e4e7',\n          300: '#d4d4d8',\n          400: '#a1a1aa',\n          500: '#71717a',\n          600: '#52525b',\n          700: '#3f3f46',\n          800: '#27272a',\n          900: '#18181b',\n          1000: '#000000'\n        }\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Typography System\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F Typography Configuration\nmodule.exports = {\n  theme: {\n    extend: {\n      fontFamily: {\n        \u002F\u002F Primary Font Stack\n        sans: [\n          'Inter Variable',\n          'Inter',\n          '-apple-system',\n          'BlinkMacSystemFont',\n          'Segoe UI',\n          'Roboto',\n          'Helvetica Neue',\n          'Arial',\n          'sans-serif'\n        ],\n        \n        \u002F\u002F Display Font\n        display: [\n          'Cal Sans',\n          'Inter Variable',\n          'Inter',\n          'ui-sans-serif',\n          'system-ui',\n          'sans-serif'\n        ],\n        \n        \u002F\u002F Serif Font\n        serif: [\n          'Playfair Display Variable',\n          'Playfair Display',\n          'ui-serif',\n          'Georgia',\n          'Cambria',\n          'serif'\n        ],\n        \n        \u002F\u002F Monospace Font\n        mono: [\n          'JetBrains Mono Variable',\n          'JetBrains Mono',\n          'SF Mono',\n          'Monaco',\n          'Inconsolata',\n          'Roboto Mono',\n          'monospace'\n        ]\n      },\n      \n      fontSize: {\n        \u002F\u002F Custom Font Sizes\n        'xs': ['0.75rem', { lineHeight: '1rem' }],\n        'sm': ['0.875rem', { lineHeight: '1.25rem' }],\n        'base': ['1rem', { lineHeight: '1.5rem' }],\n        'lg': ['1.125rem', { lineHeight: '1.75rem' }],\n        'xl': ['1.25rem', { lineHeight: '1.75rem' }],\n        '2xl': ['1.5rem', { lineHeight: '2rem' }],\n        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],\n        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],\n        '5xl': ['3rem', { lineHeight: '1' }],\n        '6xl': ['3.75rem', { lineHeight: '1' }],\n        '7xl': ['4.5rem', { lineHeight: '1' }],\n        '8xl': ['6rem', { lineHeight: '1' }],\n        '9xl': ['8rem', { lineHeight: '1' }]\n      },\n      \n      letterSpacing: {\n        tighter: '-0.05em',\n        tight: '-0.025em',\n        normal: '0em',\n        wide: '0.025em',\n        wider: '0.05em',\n        widest: '0.1em'\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง Custom Utilities\u003C\u002Fh2>\u003Ch3>ใช้ @layer utilities\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* input.css *\u002F\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n  \u002F* Text Utilities *\u002F\n  .text-shadow {\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  .text-shadow-lg {\n    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  }\n  \n  \u002F* Scroll Utilities *\u002F\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  \n  .scroll-snap-x {\n    scroll-snap-type: x mandatory;\n  }\n  \n  .scroll-snap-start {\n    scroll-snap-align: start;\n  }\n  \n  \u002F* Glass Morphism *\u002F\n  .glass {\n    backdrop-filter: blur(16px) saturate(180%);\n    background-color: rgba(255, 255, 255, 0.75);\n    border: 1px solid rgba(255, 255, 255, 0.125);\n  }\n  \n  .glass-dark {\n    backdrop-filter: blur(16px) saturate(180%);\n    background-color: rgba(17, 24, 39, 0.75);\n    border: 1px solid rgba(255, 255, 255, 0.125);\n  }\n  \n  \u002F* Custom Aspect Ratios *\u002F\n  .aspect-golden {\n    aspect-ratio: 1.618 \u002F 1;\n  }\n  \n  .aspect-4-3 {\n    aspect-ratio: 4 \u002F 3;\n  }\n  \n  \u002F* Background Patterns *\u002F\n  .bg-grid {\n    background-image: \n      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n  \n  .bg-dots {\n    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n  \n  \u002F* Animation Delays *\u002F\n  .animation-delay-75 {\n    animation-delay: 75ms;\n  }\n  \n  .animation-delay-100 {\n    animation-delay: 100ms;\n  }\n  \n  .animation-delay-150 {\n    animation-delay: 150ms;\n  }\n  \n  .animation-delay-200 {\n    animation-delay: 200ms;\n  }\n  \n  .animation-delay-300 {\n    animation-delay: 300ms;\n  }\n  \n  .animation-delay-500 {\n    animation-delay: 500ms;\n  }\n  \n  \u002F* Focus Utilities *\u002F\n  .focus-ring {\n    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;\n  }\n  \n  .focus-ring-error {\n    @apply focus:outline-none focus:ring-2 focus:ring-error-500 focus:ring-offset-2;\n  }\n  \n  \u002F* Gradient Text *\u002F\n  .text-gradient {\n    background: linear-gradient(90deg, #3b82f6, #8b5cf6);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การใช้งาน Custom Utilities\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Glass Morphism Effects -->\n<div class=\"glass p-8 rounded-2xl backdrop-blur-sm\">\n  <h3 class=\"text-xl font-semibold text-gray-800\">Glass Card<\u002Fh3>\n  <p class=\"text-gray-600 mt-2\">Modern glassmorphism effect<\u002Fp>\n<\u002Fdiv>\n\n<!-- Text Effects -->\n<h1 class=\"text-6xl font-bold text-gradient text-shadow-lg\">\n  Gradient Text with Shadow\n<\u002Fh1>\n\n<!-- Custom Animations with Delays -->\n<div class=\"space-y-4\">\n  <div class=\"animate-slide-up animation-delay-100\">First Item<\u002Fdiv>\n  <div class=\"animate-slide-up animation-delay-200\">Second Item<\u002Fdiv>\n  <div class=\"animate-slide-up animation-delay-300\">Third Item<\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Background Patterns -->\n<div class=\"bg-grid bg-gray-50 p-8 rounded-lg\">\n  <div class=\"bg-white p-6 rounded-lg shadow-soft\">\n    Content on Grid Background\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Custom Aspect Ratios -->\n<div class=\"aspect-golden bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg\">\n  Golden Ratio Container\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การจัดการ Dark Mode ขั้นสูง\u003C\u002Fh2>\u003Ch3>Dark Mode Configuration\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  darkMode: 'class', \u002F\u002F หรือ 'media' สำหรับ system preference\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Colors ที่เปลี่ยนตาม mode\n        surface: {\n          DEFAULT: '#ffffff',\n          dark: '#1a1a1a'\n        },\n        'surface-elevated': {\n          DEFAULT: '#fafafa',\n          dark: '#2a2a2a'\n        },\n        'text-primary': {\n          DEFAULT: '#1a1a1a',\n          dark: '#fafafa'\n        },\n        'text-secondary': {\n          DEFAULT: '#6a6a6a',\n          dark: '#a0a0a0'\n        },\n        'border-default': {\n          DEFAULT: '#e0e0e0',\n          dark: '#404040'\n        }\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Custom Dark Mode Utilities\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">@layer utilities {\n  .bg-surface {\n    @apply bg-white dark:bg-gray-900;\n  }\n  \n  .bg-surface-elevated {\n    @apply bg-gray-50 dark:bg-gray-800;\n  }\n  \n  .text-primary {\n    @apply text-gray-900 dark:text-gray-100;\n  }\n  \n  .text-secondary {\n    @apply text-gray-600 dark:text-gray-400;\n  }\n  \n  .border-default {\n    @apply border-gray-200 dark:border-gray-700;\n  }\n  \n  .card-surface {\n    @apply bg-surface border-default shadow-sm;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Dark Mode Toggle Implementation\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Dark Mode Toggle -->\n<button id=\"theme-toggle\" class=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus-ring\">\n  <!-- Sun Icon (Light Mode) -->\n  <svg class=\"w-5 h-5 dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z\" \u002F>\n  <\u002Fsvg>\n  \n  <!-- Moon Icon (Dark Mode) -->\n  <svg class=\"w-5 h-5 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path d=\"M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z\" \u002F>\n  <\u002Fsvg>\n<\u002Fbutton>\n\n<script>\n\u002F\u002F Dark Mode Toggle Script\nconst themeToggle = document.getElementById('theme-toggle');\nconst html = document.documentElement;\n\n\u002F\u002F Check for saved theme or default to system preference\nconst savedTheme = localStorage.getItem('theme');\nconst systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\nif (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {\n  html.classList.add('dark');\n}\n\nthemeToggle.addEventListener('click', () => {\n  html.classList.toggle('dark');\n  \n  \u002F\u002F Save preference to localStorage\n  if (html.classList.contains('dark')) {\n    localStorage.setItem('theme', 'dark');\n  } else {\n    localStorage.setItem('theme', 'light');\n  }\n});\n\n\u002F\u002F Listen for system preference changes\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {\n  if (!localStorage.getItem('theme')) {\n    if (e.matches) {\n      html.classList.add('dark');\n    } else {\n      html.classList.remove('dark');\n    }\n  }\n});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การใช้งาน Plugin Ecosystem\u003C\u002Fh2>\u003Ch3>Official Plugins ที่แนะนำ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  plugins: [\n    \u002F\u002F Typography Plugin - สำหรับ Rich Text Content\n    require('@tailwindcss\u002Ftypography'),\n    \n    \u002F\u002F Forms Plugin - ปรับปรุง Form Elements\n    require('@tailwindcss\u002Fforms'),\n    \n    \u002F\u002F Aspect Ratio Plugin - จัดการอัตราส่วน\n    require('@tailwindcss\u002Faspect-ratio'),\n    \n    \u002F\u002F Line Clamp Plugin - จำกัดบรรทัด\n    require('@tailwindcss\u002Fline-clamp'),\n    \n    \u002F\u002F Container Queries Plugin\n    require('@tailwindcss\u002Fcontainer-queries')\n  ]\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การใช้งาน Typography Plugin\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Rich Text Content -->\n<article class=\"prose prose-lg prose-blue max-w-none dark:prose-invert\">\n  <h1>หัวข้อบทความ<\u002Fh1>\n  <p class=\"lead\">ข้อความนำที่โดดเด่น<\u002Fp>\n  \n  <h2>หัวข้อย่อย<\u002Fh2>\n  <p>เนื้อหาบทความที่มีการจัดรูปแบบอัตโนมัติ รองรับ <strong>ตัวหนา<\u002Fstrong>, <em>ตัวเอียง<\u002Fem>, และ <code>โค้ด<\u002Fcode><\u002Fp>\n  \n  <blockquote>\n    <p>Quote ที่สวยงามและโดดเด่น<\u002Fp>\n  <\u002Fblockquote>\n  \n  <ul>\n    <li>รายการที่มีการจัดรูปแบบอัตโนมัติ<\u002Fli>\n    <li>ง่ายต่อการใช้งาน<\u002Fli>\n    <li>รองรับ Dark Mode<\u002Fli>\n  <\u002Ful>\n  \n  <pre><code class=\"language-javascript\">\nconst message = \"Hello, World!\";\nconsole.log(message);\n  <\u002Fcode><\u002Fpre>\n<\u002Farticle>\n\n<!-- Custom Prose Variants -->\n<div class=\"prose prose-primary max-w-4xl mx-auto\">\n  <!-- Content จะใช้ primary color scheme -->\n<\u002Fdiv>\n\n<!-- Small Prose -->\n<div class=\"prose prose-sm max-w-2xl\">\n  <!-- Smaller text for compact content -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การใช้งาน Container Queries\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Container ที่ปรับตามขนาดของตัวเอง -->\n<div class=\"@container max-w-4xl mx-auto\">\n  <div class=\"grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @xl:grid-cols-4 gap-4\">\n    <div class=\"bg-white p-4 rounded-lg shadow-sm\">\n      <img class=\"w-full aspect-square @sm:aspect-video object-cover rounded mb-3\" \n           src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1518837695005-2083093ee35b?w=400\" \n           alt=\"Product Image\"\n           loading=\"lazy\">\n      <h3 class=\"font-semibold text-sm @sm:text-base @lg:text-lg\">Product Name<\u002Fh3>\n      <p class=\"text-gray-600 text-xs @sm:text-sm mt-1\">Product description<\u002Fp>\n      <div class=\"mt-3\">\n        <button class=\"w-full @sm:w-auto px-4 py-2 bg-primary-500 text-white rounded text-sm hover:bg-primary-600 transition-colors\">\n          Add to Cart\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Named Container Queries -->\n<div class=\"@container\u002Fsidebar w-64\">\n  <nav class=\"space-y-1\">\n    <a href=\"#\" class=\"block p-2 @lg\u002Fsidebar:p-3 rounded hover:bg-gray-100 transition-colors\">\n      <div class=\"flex items-center space-x-2 @lg\u002Fsidebar:space-x-3\">\n        <svg class=\"w-4 h-4 @lg\u002Fsidebar:w-5 @lg\u002Fsidebar:h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z\"\u002F>\n        <\u002Fsvg>\n        <span class=\"text-sm @lg\u002Fsidebar:text-base\">Navigation Item<\u002Fspan>\n      <\u002Fdiv>\n    <\u002Fa>\n  <\u002Fnav>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Third-Party Plugins ที่น่าสนใจ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  plugins: [\n    \u002F\u002F Tailwind CSS Animate - Animation utilities\n    require('tailwindcss-animate'),\n    \n    \u002F\u002F Tailwind CSS Radix - Radix UI integration\n    require('tailwindcss-radix'),\n    \n    \u002F\u002F Headless UI - Integration with Headless UI\n    require('@headlessui\u002Ftailwindcss'),\n    \n    \u002F\u002F Custom Plugin สำหรับ Scrollbar\n    require('tailwind-scrollbar'),\n    \n    \u002F\u002F Custom Plugin Example\n    function({ addUtilities, theme }) {\n      const newUtilities = {\n        '.text-stroke': {\n          '-webkit-text-stroke': '1px currentColor',\n        },\n        '.text-stroke-2': {\n          '-webkit-text-stroke': '2px currentColor',\n        },\n        '.backdrop-blur-xs': {\n          'backdrop-filter': 'blur(2px)',\n        },\n      }\n      addUtilities(newUtilities)\n    }\n  ]\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง Component System ขั้นสูง\u003C\u002Fh2>\u003Ch3>Advanced Component Architecture\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* components.css *\u002F\n@layer components {\n  \u002F* Button System *\u002F\n  .btn {\n    @apply inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200;\n    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;\n    @apply disabled:opacity-50 disabled:cursor-not-allowed;\n  }\n  \n  .btn-primary {\n    @apply bg-primary-500 text-white shadow-sm;\n    @apply hover:bg-primary-600 hover:shadow-md hover:-translate-y-0.5;\n    @apply focus:ring-primary-500;\n    @apply active:bg-primary-700 active:translate-y-0;\n  }\n  \n  .btn-secondary {\n    @apply bg-secondary-500 text-white shadow-sm;\n    @apply hover:bg-secondary-600 hover:shadow-md hover:-translate-y-0.5;\n    @apply focus:ring-secondary-500;\n  }\n  \n  .btn-outline {\n    @apply border-2 bg-transparent shadow-sm;\n    @apply hover:shadow-md hover:-translate-y-0.5;\n  }\n  \n  .btn-outline-primary {\n    @apply border-primary-500 text-primary-500;\n    @apply hover:bg-primary-500 hover:text-white;\n    @apply focus:ring-primary-500;\n  }\n  \n  .btn-ghost {\n    @apply bg-transparent shadow-none;\n    @apply hover:bg-gray-100 dark:hover:bg-gray-800;\n    @apply focus:ring-gray-500;\n  }\n  \n  \u002F* Button Sizes *\u002F\n  .btn-xs {\n    @apply px-2 py-1 text-xs;\n  }\n  \n  .btn-sm {\n    @apply px-3 py-1.5 text-sm;\n  }\n  \n  .btn-md {\n    @apply px-4 py-2 text-base;\n  }\n  \n  .btn-lg {\n    @apply px-6 py-3 text-lg;\n  }\n  \n  .btn-xl {\n    @apply px-8 py-4 text-xl;\n  }\n  \n  \u002F* Card System *\u002F\n  .card {\n    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700;\n    @apply overflow-hidden transition-all duration-300;\n  }\n  \n  .card-hover {\n    @apply hover:shadow-lg hover:-translate-y-1;\n  }\n  \n  .card-interactive {\n    @apply cursor-pointer;\n    @apply hover:shadow-xl hover:-translate-y-2;\n    @apply active:translate-y-0 active:shadow-md;\n  }\n  \n  .card-glass {\n    @apply glass border-white\u002F20 dark:border-gray-700\u002F30;\n  }\n  \n  .card-header {\n    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700\u002F50;\n  }\n  \n  .card-body {\n    @apply px-6 py-4;\n  }\n  \n  .card-footer {\n    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700\u002F50;\n  }\n  \n  \u002F* Input System *\u002F\n  .input {\n    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg;\n    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;\n    @apply focus:ring-2 focus:ring-primary-500 focus:border-primary-500;\n    @apply transition-colors duration-200;\n    @apply placeholder:text-gray-400 dark:placeholder:text-gray-500;\n  }\n  \n  .input-error {\n    @apply border-error-500 focus:ring-error-500 focus:border-error-500;\n  }\n  \n  .input-success {\n    @apply border-success-500 focus:ring-success-500 focus:border-success-500;\n  }\n  \n  \u002F* Alert System *\u002F\n  .alert {\n    @apply p-4 rounded-lg border flex items-start space-x-3;\n  }\n  \n  .alert-success {\n    @apply bg-success-50 dark:bg-success-900\u002F20 border-success-200 dark:border-success-800 text-success-800 dark:text-success-200;\n  }\n  \n  .alert-warning {\n    @apply bg-warning-50 dark:bg-warning-900\u002F20 border-warning-200 dark:border-warning-800 text-warning-800 dark:text-warning-200;\n  }\n  \n  .alert-error {\n    @apply bg-error-50 dark:bg-error-900\u002F20 border-error-200 dark:border-error-800 text-error-800 dark:text-error-200;\n  }\n  \n  .alert-info {\n    @apply bg-info-50 dark:bg-info-900\u002F20 border-info-200 dark:border-info-800 text-info-800 dark:text-info-200;\n  }\n  \n  \u002F* Badge System *\u002F\n  .badge {\n    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;\n  }\n  \n  .badge-primary {\n    @apply bg-primary-100 dark:bg-primary-900\u002F30 text-primary-800 dark:text-primary-200;\n  }\n  \n  .badge-success {\n    @apply bg-success-100 dark:bg-success-900\u002F30 text-success-800 dark:text-success-200;\n  }\n  \n  .badge-warning {\n    @apply bg-warning-100 dark:bg-warning-900\u002F30 text-warning-800 dark:text-warning-200;\n  }\n  \n  .badge-error {\n    @apply bg-error-100 dark:bg-error-900\u002F30 text-error-800 dark:text-error-200;\n  }\n  \n  \u002F* Navigation *\u002F\n  .nav-link {\n    @apply px-3 py-2 rounded-md text-sm font-medium;\n    @apply text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;\n    @apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;\n  }\n  \n  .nav-link-active {\n    @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900\u002F30;\n    @apply hover:text-primary-700 dark:hover:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900\u002F50;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง Design System สมบูรณ์\u003C\u002Fh2>\u003Ch3>Project Structure\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext\">project\u002F\n├── src\u002F\n│   ├── styles\u002F\n│   │   ├── tailwind.css          # Main Tailwind file\n│   │   ├── components\u002F\n│   │   │   ├── buttons.css       # Button components\n│   │   │   ├── cards.css         # Card components\n│   │   │   ├── forms.css         # Form components\n│   │   │   └── navigation.css    # Navigation components\n│   │   ├── utilities\u002F\n│   │   │   ├── animations.css    # Custom animations\n│   │   │   ├── effects.css       # Visual effects\n│   │   │   └── helpers.css       # Helper utilities\n│   │   └── tokens\u002F\n│   │       ├── colors.css        # Color tokens\n│   │       ├── typography.css    # Typography tokens\n│   │       └── spacing.css       # Spacing tokens\n│   ├── components\u002F               # Framework components\n│   └── pages\u002F                    # Application pages\n├── docs\u002F\n│   ├── design-system.html        # Design system documentation\n│   └── style-guide.html          # Style guide\n├── tailwind.config.js            # Tailwind configuration\n└── package.json\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Main Tailwind File\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* src\u002Fstyles\u002Ftailwind.css *\u002F\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\u002F* Import Design Tokens *\u002F\n@import '.\u002Ftokens\u002Fcolors.css';\n@import '.\u002Ftokens\u002Ftypography.css';\n@import '.\u002Ftokens\u002Fspacing.css';\n\n\u002F* Import Components *\u002F\n@import '.\u002Fcomponents\u002Fbuttons.css';\n@import '.\u002Fcomponents\u002Fcards.css';\n@import '.\u002Fcomponents\u002Fforms.css';\n@import '.\u002Fcomponents\u002Fnavigation.css';\n\n\u002F* Import Custom Utilities *\u002F\n@import '.\u002Futilities\u002Fanimations.css';\n@import '.\u002Futilities\u002Feffects.css';\n@import '.\u002Futilities\u002Fhelpers.css';\n\n@layer base {\n  \u002F* Global Base Styles *\u002F\n  html {\n    @apply scroll-smooth antialiased;\n  }\n  \n  body {\n    @apply font-sans text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900;\n    @apply transition-colors duration-300;\n  }\n  \n  \u002F* Focus Styles *\u002F\n  *:focus {\n    @apply outline-none;\n  }\n  \n  \u002F* Selection Styles *\u002F\n  ::selection {\n    @apply bg-primary-500 text-white;\n  }\n  \n  \u002F* Scrollbar Styles *\u002F\n  ::-webkit-scrollbar {\n    @apply w-2;\n  }\n  \n  ::-webkit-scrollbar-track {\n    @apply bg-gray-100 dark:bg-gray-800;\n  }\n  \n  ::-webkit-scrollbar-thumb {\n    @apply bg-gray-300 dark:bg-gray-600 rounded-full;\n  }\n  \n  ::-webkit-scrollbar-thumb:hover {\n    @apply bg-gray-400 dark:bg-gray-500;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Performance Optimization\u003C\u002Fh2>\u003Ch3>Tailwind Configuration สำหรับ Production\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - Production Optimized\nmodule.exports = {\n  content: [\n    '.\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    '.\u002Fpages\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    '.\u002Fcomponents\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    \u002F\u002F Add any other paths where you use Tailwind classes\n  ],\n  \n  \u002F\u002F Safelist for dynamic classes\n  safelist: [\n    'bg-primary-500',\n    'bg-secondary-500',\n    'text-error-500',\n    \u002F\u002F Add classes that are generated dynamically\n  ],\n  \n  \u002F\u002F Disable unused features for smaller build\n  corePlugins: {\n    \u002F\u002F Disable if not used\n    preflight: true,\n    container: true,\n    accessibility: true,\n    appearance: true,\n    backgroundAttachment: false, \u002F\u002F Disable if not used\n    backgroundClip: true,\n    backgroundImage: true,\n    backgroundOpacity: true,\n    backgroundPosition: true,\n    backgroundRepeat: true,\n    backgroundSize: true,\n    \u002F\u002F ... configure based on usage\n  },\n  \n  theme: {\n    \u002F\u002F Use extend to add, not replace\n    extend: {\n      \u002F\u002F Your custom theme here\n    }\n  },\n  \n  plugins: [\n    \u002F\u002F Only include plugins you actually use\n    require('@tailwindcss\u002Ftypography'),\n    require('@tailwindcss\u002Fforms'),\n  ]\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Build Script Optimization\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"scripts\": {\n    \"dev\": \"tailwindcss -i .\u002Fsrc\u002Fstyles\u002Ftailwind.css -o .\u002Fdist\u002Fstyles.css --watch\",\n    \"build\": \"NODE_ENV=production tailwindcss -i .\u002Fsrc\u002Fstyles\u002Ftailwind.css -o .\u002Fdist\u002Fstyles.css --minify\",\n    \"build:analyze\": \"tailwindcss -i .\u002Fsrc\u002Fstyles\u002Ftailwind.css -o .\u002Fdist\u002Fstyles.css --minify --verbose\"\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Component Documentation System\u003C\u002Fh2>\u003Ch3>Style Guide Template\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"th\" class=\"scroll-smooth\">\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  <link href=\".\u002Fdist\u002Fstyles.css\" rel=\"stylesheet\">\n<\u002Fhead>\n<body class=\"bg-gray-50 dark:bg-gray-900\">\n  <!-- Header -->\n  <header class=\"sticky top-0 z-50 bg-white\u002F95 dark:bg-gray-900\u002F95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n      <div class=\"flex items-center justify-between h-16\">\n        <h1 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Design System<\u002Fh1>\n        \n        <div class=\"flex items-center space-x-4\">\n          <!-- Theme Toggle -->\n          <button id=\"theme-toggle\" class=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors focus-ring\">\n            <svg class=\"w-5 h-5 dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z\" \u002F>\n            <\u002Fsvg>\n            <svg class=\"w-5 h-5 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path d=\"M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z\" \u002F>\n            <\u002Fsvg>\n          <\u002Fbutton>\n        <\u002Fdiv>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fheader>\n\n  <!-- Main Content -->\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n    <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-8\">\n      <!-- Sidebar Navigation -->\n      <nav class=\"lg:col-span-1\">\n        <div class=\"sticky top-24 space-y-2\">\n          <a href=\"#colors\" class=\"nav-link block\">Colors<\u002Fa>\n          <a href=\"#typography\" class=\"nav-link block\">Typography<\u002Fa>\n          <a href=\"#buttons\" class=\"nav-link block\">Buttons<\u002Fa>\n          <a href=\"#cards\" class=\"nav-link block\">Cards<\u002Fa>\n          <a href=\"#forms\" class=\"nav-link block\">Forms<\u002Fa>\n          <a href=\"#alerts\" class=\"nav-link block\">Alerts<\u002Fa>\n          <a href=\"#badges\" class=\"nav-link block\">Badges<\u002Fa>\n        <\u002Fdiv>\n      <\u002Fnav>\n\n      <!-- Content -->\n      <main class=\"lg:col-span-3 space-y-16\">\n        <!-- Colors Section -->\n        <section id=\"colors\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Colors<\u002Fh2>\n          \n          <!-- Primary Colors -->\n          <div class=\"mb-8\">\n            <h3 class=\"text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4\">Primary Colors<\u002Fh3>\n            <div class=\"grid grid-cols-5 md:grid-cols-10 gap-3\">\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-50 rounded-lg border border-gray-200 dark:border-gray-700 mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">50<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-100 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">100<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-200 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">200<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-300 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">300<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-400 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">400<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-500 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400 font-semibold\">500<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-600 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">600<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-700 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">700<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-800 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">800<\u002Fdiv>\n              <\u002Fdiv>\n              <div class=\"text-center\">\n                <div class=\"w-full h-16 bg-primary-900 rounded-lg mb-2\"><\u002Fdiv>\n                <div class=\"text-xs text-gray-600 dark:text-gray-400\">900<\u002Fdiv>\n              <\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fsection>\n\n        <!-- Typography Section -->\n        <section id=\"typography\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Typography<\u002Fh2>\n          \n          <div class=\"space-y-6\">\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">9xl<\u002Fdiv>\n              <div class=\"text-9xl font-bold text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">6xl<\u002Fdiv>\n              <div class=\"text-6xl font-bold text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">4xl<\u002Fdiv>\n              <div class=\"text-4xl font-bold text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">2xl<\u002Fdiv>\n              <div class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">xl<\u002Fdiv>\n              <div class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">base<\u002Fdiv>\n              <div class=\"text-base font-medium text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">sm<\u002Fdiv>\n              <div class=\"text-sm text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n            <div class=\"flex items-center space-x-6\">\n              <div class=\"w-16 text-sm text-gray-500 dark:text-gray-400\">xs<\u002Fdiv>\n              <div class=\"text-xs text-gray-900 dark:text-gray-100\">Aa<\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fsection>\n\n        <!-- Buttons Section -->\n        <section id=\"buttons\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Buttons<\u002Fh2>\n          \n          <div class=\"space-y-8\">\n            <!-- Primary Buttons -->\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4\">Primary Buttons<\u002Fh3>\n              <div class=\"flex flex-wrap gap-4\">\n                <button class=\"btn btn-primary btn-xs\">Extra Small<\u002Fbutton>\n                <button class=\"btn btn-primary btn-sm\">Small<\u002Fbutton>\n                <button class=\"btn btn-primary btn-md\">Medium<\u002Fbutton>\n                <button class=\"btn btn-primary btn-lg\">Large<\u002Fbutton>\n                <button class=\"btn btn-primary btn-xl\">Extra Large<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Secondary Buttons -->\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4\">Secondary Buttons<\u002Fh3>\n              <div class=\"flex flex-wrap gap-4\">\n                <button class=\"btn btn-secondary btn-sm\">Small<\u002Fbutton>\n                <button class=\"btn btn-secondary btn-md\">Medium<\u002Fbutton>\n                <button class=\"btn btn-secondary btn-lg\">Large<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Outline Buttons -->\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4\">Outline Buttons<\u002Fh3>\n              <div class=\"flex flex-wrap gap-4\">\n                <button class=\"btn btn-outline btn-outline-primary btn-sm\">Primary Outline<\u002Fbutton>\n                <button class=\"btn btn-outline btn-outline-primary btn-md\">Medium Outline<\u002Fbutton>\n                <button class=\"btn btn-outline btn-outline-primary btn-lg\">Large Outline<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Ghost Buttons -->\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4\">Ghost Buttons<\u002Fh3>\n              <div class=\"flex flex-wrap gap-4\">\n                <button class=\"btn btn-ghost btn-sm\">Small Ghost<\u002Fbutton>\n                <button class=\"btn btn-ghost btn-md\">Medium Ghost<\u002Fbutton>\n                <button class=\"btn btn-ghost btn-lg\">Large Ghost<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Button States -->\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4\">Button States<\u002Fh3>\n              <div class=\"flex flex-wrap gap-4\">\n                <button class=\"btn btn-primary btn-md\">Normal<\u002Fbutton>\n                <button class=\"btn btn-primary btn-md hover:bg-primary-600\" style=\"background-color: rgb(37 99 235);\">Hover<\u002Fbutton>\n                <button class=\"btn btn-primary btn-md\" disabled>Disabled<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fsection>\n\n        <!-- Cards Section -->\n        <section id=\"cards\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Cards<\u002Fh2>\n          \n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n            <!-- Basic Card -->\n            <div class=\"card\">\n              <div class=\"card-body\">\n                <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2\">Basic Card<\u002Fh3>\n                <p class=\"text-gray-600 dark:text-gray-400 mb-4\">การ์ดพื้นฐานที่ใช้งานง่าย<\u002Fp>\n                <button class=\"btn btn-primary btn-sm\">Action<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Hover Card -->\n            <div class=\"card card-hover\">\n              <div class=\"card-body\">\n                <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2\">Hover Card<\u002Fh3>\n                <p class=\"text-gray-600 dark:text-gray-400 mb-4\">การ์ดที่มี hover effect<\u002Fp>\n                <button class=\"btn btn-primary btn-sm\">Action<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Interactive Card -->\n            <div class=\"card card-interactive\">\n              <div class=\"card-body\">\n                <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2\">Interactive Card<\u002Fh3>\n                <p class=\"text-gray-600 dark:text-gray-400 mb-4\">การ์ดที่คลิกได้<\u002Fp>\n                <button class=\"btn btn-primary btn-sm\">Action<\u002Fbutton>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <!-- Card with Header\u002FFooter -->\n            <div class=\"card md:col-span-2 lg:col-span-3\">\n              <div class=\"card-header\">\n                <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">Card with Header & Footer<\u002Fh3>\n              <\u002Fdiv>\n              <div class=\"card-body\">\n                <p class=\"text-gray-600 dark:text-gray-400\">การ์ดที่มี header, body และ footer แยกกัน<\u002Fp>\n              <\u002Fdiv>\n              <div class=\"card-footer\">\n                <div class=\"flex space-x-2\">\n                  <button class=\"btn btn-primary btn-sm\">Primary<\u002Fbutton>\n                  <button class=\"btn btn-ghost btn-sm\">Secondary<\u002Fbutton>\n                <\u002Fdiv>\n              <\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fsection>\n\n        <!-- Forms Section -->\n        <section id=\"forms\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Forms<\u002Fh2>\n          \n          <div class=\"max-w-lg\">\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\" for=\"name\">ชื่อ<\u002Flabel>\n                <input class=\"input\" type=\"text\" id=\"name\" placeholder=\"กรอกชื่อของคุณ\">\n                <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">กรุณากรอกชื่อจริงของคุณ<\u002Fp>\n              <\u002Fdiv>\n\n              <div>\n                <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\" for=\"email\">อีเมล<\u002Flabel>\n                <input class=\"input\" type=\"email\" id=\"email\" placeholder=\"your@email.com\">\n              <\u002Fdiv>\n\n              <div>\n                <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\" for=\"email-error\">อีเมล (Error State)<\u002Flabel>\n                <input class=\"input input-error\" type=\"email\" id=\"email-error\" value=\"invalid-email\">\n                <p class=\"text-sm text-error-600 dark:text-error-400 mt-1\">รูปแบบอีเมลไม่ถูกต้อง<\u002Fp>\n              <\u002Fdiv>\n\n              <div>\n                <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\" for=\"email-success\">อีเมล (Success State)<\u002Flabel>\n                <input class=\"input input-success\" type=\"email\" id=\"email-success\" value=\"valid@email.com\">\n              <\u002Fdiv>\n\n              <div>\n                <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\" for=\"message\">ข้อความ<\u002Flabel>\n                <textarea class=\"input min-h-[100px] resize-vertical\" id=\"message\" rows=\"4\" placeholder=\"เขียนข้อความของคุณ...\"><\u002Ftextarea>\n              <\u002Fdiv>\n\n              <button type=\"submit\" class=\"btn btn-primary btn-lg w-full\">ส่งข้อมูล<\u002Fbutton>\n            <\u002Fform>\n          <\u002Fdiv>\n        <\u002Fsection>\n\n        <!-- Alerts Section -->\n        <section id=\"alerts\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Alerts<\u002Fh2>\n          \n          <div class=\"space-y-4 max-w-2xl\">\n            <div class=\"alert alert-success\">\n              <svg class=\"w-5 h-5 text-success-500 flex-shrink-0\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n              <\u002Fsvg>\n              <div>\n                <div class=\"font-medium\">ดำเนินการสำเร็จ<\u002Fdiv>\n                <div class=\"text-sm opacity-75\">ข้อมูลของคุณได้รับการบันทึกแล้ว<\u002Fdiv>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <div class=\"alert alert-warning\">\n              <svg class=\"w-5 h-5 text-warning-500 flex-shrink-0\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\u002F>\n              <\u002Fsvg>\n              <div>\n                <div class=\"font-medium\">คำเตือน<\u002Fdiv>\n                <div class=\"text-sm opacity-75\">กรุณาตรวจสอบข้อมูลให้ถูกต้อง<\u002Fdiv>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <div class=\"alert alert-error\">\n              <svg class=\"w-5 h-5 text-error-500 flex-shrink-0\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n              <\u002Fsvg>\n              <div>\n                <div class=\"font-medium\">เกิดข้อผิดพลาด<\u002Fdiv>\n                <div class=\"text-sm opacity-75\">ไม่สามารถบันทึกข้อมูลได้ กรุณาลองใหม่อีกครั้ง<\u002Fdiv>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <div class=\"alert alert-info\">\n              <svg class=\"w-5 h-5 text-info-500 flex-shrink-0\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n              <\u002Fsvg>\n              <div>\n                <div class=\"font-medium\">ข้อมูล<\u002Fdiv>\n                <div class=\"text-sm opacity-75\">คุณสมบัตินี้จะมีผลในอีก 30 วัน<\u002Fdiv>\n              <\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fsection>\n\n        <!-- Badges Section -->\n        <section id=\"badges\" class=\"animate-fade-in\">\n          <h2 class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8\">Badges<\u002Fh2>\n          \n          <div class=\"space-y-4\">\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2\">Default Badges<\u002Fh3>\n              <div class=\"flex flex-wrap gap-2\">\n                <span class=\"badge badge-primary\">Primary<\u002Fspan>\n                <span class=\"badge badge-success\">Success<\u002Fspan>\n                <span class=\"badge badge-warning\">Warning<\u002Fspan>\n                <span class=\"badge badge-error\">Error<\u002Fspan>\n              <\u002Fdiv>\n            <\u002Fdiv>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2\">With Icons<\u002Fh3>\n              <div class=\"flex flex-wrap gap-2\">\n                <span class=\"badge badge-success inline-flex items-center\">\n                  <svg class=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n                  <\u002Fsvg>\n                  Verified\n                <\u002Fspan>\n                <span class=\"badge badge-warning inline-flex items-center\">\n                  <svg class=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\u002F>\n                  <\u002Fsvg>\n                  Pending\n                <\u002Fspan>\n                <span class=\"badge badge-error inline-flex items-center\">\n                  <svg class=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n                  <\u002Fsvg>\n                  Error\n                <\u002Fspan>\n              <\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fsection>\n      <\u002Fmain>\n    <\u002Fdiv>\n  <\u002Fdiv>\n\n  <!-- Footer -->\n  <footer class=\"mt-16 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n      <div class=\"text-center text-gray-600 dark:text-gray-400\">\n        <p>© 2025 Design System. สร้างด้วย Tailwind CSS<\u002Fp>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Ffooter>\n\n  <script>\n    \u002F\u002F Theme toggle functionality\n    const themeToggle = document.getElementById('theme-toggle');\n    const html = document.documentElement;\n\n    \u002F\u002F Check for saved theme or default to system preference\n    const savedTheme = localStorage.getItem('theme');\n    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {\n      html.classList.add('dark');\n    }\n\n    themeToggle.addEventListener('click', () => {\n      html.classList.toggle('dark');\n      \n      \u002F\u002F Save preference to localStorage\n      if (html.classList.contains('dark')) {\n        localStorage.setItem('theme', 'dark');\n      } else {\n        localStorage.setItem('theme', 'light');\n      }\n    });\n\n    \u002F\u002F Listen for system preference changes\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {\n      if (!localStorage.getItem('theme')) {\n        if (e.matches) {\n          html.classList.add('dark');\n        } else {\n          html.classList.remove('dark');\n        }\n      }\n    });\n\n    \u002F\u002F Smooth scroll for navigation links\n    document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n      anchor.addEventListener('click', function (e) {\n        e.preventDefault();\n        const target = document.querySelector(this.getAttribute('href'));\n        if (target) {\n          target.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start'\n          });\n        }\n      });\n    });\n\n    \u002F\u002F Add active state to navigation\n    const navLinks = document.querySelectorAll('nav a[href^=\"#\"]');\n    const sections = document.querySelectorAll('section[id]');\n\n    function updateActiveNav() {\n      let current = '';\n      sections.forEach(section => {\n        const sectionTop = section.offsetTop - 100;\n        if (window.pageYOffset >= sectionTop) {\n          current = section.getAttribute('id');\n        }\n      });\n\n      navLinks.forEach(link => {\n        link.classList.remove('nav-link-active');\n        if (link.getAttribute('href') === `#${current}`) {\n          link.classList.add('nav-link-active');\n        }\n      });\n    }\n\n    window.addEventListener('scroll', updateActiveNav);\n    updateActiveNav(); \u002F\u002F Initial call\n  <\u002Fscript>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>การจัดการ Multi-Brand Design System\u003C\u002Fh2>\u003Ch3>Brand Configuration\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - Multi-Brand Support\nconst brandConfig = {\n  default: {\n    primary: '#3b82f6',\n    secondary: '#8b5cf6',\n    accent: '#f59e0b'\n  },\n  brand1: {\n    primary: '#dc2626',\n    secondary: '#7c3aed',\n    accent: '#059669'\n  },\n  brand2: {\n    primary: '#059669',\n    secondary: '#dc2626',\n    accent: '#d97706'\n  }\n};\n\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Default brand colors\n        primary: brandConfig.default.primary,\n        secondary: brandConfig.default.secondary,\n        accent: brandConfig.default.accent,\n        \n        \u002F\u002F Brand specific colors\n        'brand-1': {\n          primary: brandConfig.brand1.primary,\n          secondary: brandConfig.brand1.secondary,\n          accent: brandConfig.brand1.accent\n        },\n        'brand-2': {\n          primary: brandConfig.brand2.primary,\n          secondary: brandConfig.brand2.secondary,\n          accent: brandConfig.brand2.accent\n        }\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Brand Switching with CSS Variables\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Brand theming with CSS Variables *\u002F\n:root {\n  --color-brand-primary: 59 130 246; \u002F* RGB values for alpha support *\u002F\n  --color-brand-secondary: 139 92 246;\n  --color-brand-accent: 245 158 11;\n}\n\n[data-brand=\"brand1\"] {\n  --color-brand-primary: 220 38 38;\n  --color-brand-secondary: 124 58 237;\n  --color-brand-accent: 5 150 105;\n}\n\n[data-brand=\"brand2\"] {\n  --color-brand-primary: 5 150 105;\n  --color-brand-secondary: 220 38 38;\n  --color-brand-accent: 217 119 6;\n}\n\n\u002F* Use CSS variables in components *\u002F\n.brand-button {\n  background-color: rgb(var(--color-brand-primary));\n  color: white;\n  transition: all 0.2s;\n}\n\n.brand-button:hover {\n  background-color: rgb(var(--color-brand-primary) \u002F 0.9);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Best Practices และ Performance Tips\u003C\u002Fh2>\u003Ch3>1. Optimization Strategies\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - Production Optimization\nmodule.exports = {\n  content: [\n    '.\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}',\n    \u002F\u002F Be specific with content paths\n  ],\n  \n  \u002F\u002F Use safelist sparingly - only for dynamic classes\n  safelist: [\n    {\n      pattern: \u002Fbg-(red|green|blue)-(100|500|900)\u002F,\n      variants: ['hover', 'focus']\n    }\n  ],\n  \n  \u002F\u002F Disable unused core plugins\n  corePlugins: {\n    float: false,\n    clear: false,\n    skew: false,\n    \u002F\u002F Disable features you don't use\n  },\n  \n  theme: {\n    \u002F\u002F Remove unused default colors\n    colors: {\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#ffffff',\n      black: '#000000',\n      \u002F\u002F Only include colors you actually use\n      primary: {\n        \u002F\u002F Your primary color scale\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Development Workflow\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"scripts\": {\n    \"dev\": \"tailwindcss -i .\u002Fsrc\u002Fstyles\u002Ftailwind.css -o .\u002Fdist\u002Fstyles.css --watch\",\n    \"build\": \"NODE_ENV=production tailwindcss -i .\u002Fsrc\u002Fstyles\u002Ftailwind.css -o .\u002Fdist\u002Fstyles.css --minify\",\n    \"build:analyze\": \"tailwindcss -i .\u002Fsrc\u002Fstyles\u002Ftailwind.css -o .\u002Fdist\u002Fstyles.css --minify --verbose\",\n    \"purge\": \"purgecss --css .\u002Fdist\u002Fstyles.css --content .\u002Fsrc\u002F**\u002F*.html --output .\u002Fdist\u002F\",\n    \"lint:css\": \"stylelint .\u002Fsrc\u002F**\u002F*.css\"\n  },\n  \"devDependencies\": {\n    \"tailwindcss\": \"^3.4.0\",\n    \"@tailwindcss\u002Ftypography\": \"^0.5.10\",\n    \"@tailwindcss\u002Fforms\": \"^0.5.7\",\n    \"autoprefixer\": \"^10.4.16\",\n    \"postcss\": \"^8.4.32\"\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Maintenance Tips\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Organize your CSS files logically *\u002F\n\n\u002F* 1. Import Tailwind *\u002F\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\u002F* 2. Base customizations *\u002F\n@layer base {\n  \u002F* Global styles *\u002F\n}\n\n\u002F* 3. Component styles *\u002F\n@layer components {\n  \u002F* Reusable components *\u002F\n}\n\n\u002F* 4. Utility overrides *\u002F\n@layer utilities {\n  \u002F* Custom utilities *\u002F\n}\n\n\u002F* 5. Third-party overrides (if needed) *\u002F\n\u002F* Keep these minimal and well-documented *\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>สรุป\u003C\u002Fh3>\u003Cp>การปรับแต่ง Tailwind CSS ขั้นสูงช่วยให้เราสร้าง Design System ที่สมบูรณ์และตอบโจทย์โปรเจ็กต์ได้อย่างแม่นยำ โดยมีจุดสำคัญดังนี้:\u003C\u002Fp>\u003Ch4>ประโยชน์หลัก:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Consistency:\u003C\u002Fstrong> Design System ที่สอดคล้องกันทั่วทั้งโปรเจ็กต์\u003C\u002Fli>\u003Cli>\u003Cstrong>Maintainability:\u003C\u002Fstrong> ง่ายต่อการบำรุงรักษาและอัปเดต\u003C\u002Fli>\u003Cli>\u003Cstrong>Scalability:\u003C\u002Fstrong> สามารถขยายและปรับใช้กับโปรเจ็กต์ขนาดใหญ่ได้\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance:\u003C\u002Fstrong> Optimized สำหรับ production\u003C\u002Fli>\u003Cli>\u003Cstrong>Developer Experience:\u003C\u002Fstrong> เครื่องมือและ workflow ที่ดี\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>หลักการสำคัญ:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Start with Design Tokens:\u003C\u002Fstrong> กำหนด colors, fonts, spacing เป็นระบบ\u003C\u002Fli>\u003Cli>\u003Cstrong>Component-Driven:\u003C\u002Fstrong> สร้าง component ที่ใช้ซ้ำได้\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance-First:\u003C\u002Fstrong> คำนึงถึง bundle size และ loading speed\u003C\u002Fli>\u003Cli>\u003Cstrong>Documentation:\u003C\u002Fstrong> จัดทำเอกสารและ style guide ที่ครบถ้วน\u003C\u002Fli>\u003Cli>\u003Cstrong>Team Collaboration:\u003C\u002Fstrong> สร้างมาตรฐานที่ทีมทั้งหมดเข้าใจและใช้งานได้\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>เครื่องมือที่แนะนำ:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Official Plugins:\u003C\u002Fstrong> Typography, Forms, Aspect Ratio\u003C\u002Fli>\u003Cli>\u003Cstrong>Build Tools:\u003C\u002Fstrong> PostCSS, AutoPrefixer, PurgeCSS\u003C\u002Fli>\u003Cli>\u003Cstrong>Development:\u003C\u002Fstrong> Live reload, CSS analysis tools\u003C\u002Fli>\u003Cli>\u003Cstrong>Documentation:\u003C\u002Fstrong> Style guide, component library\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>Next Steps:\u003C\u002Fh4>\u003Col>\u003Cli>\u003Cstrong>วิเคราะห์โปรเจ็กต์:\u003C\u002Fstrong> ดูว่าต้องการ customization แบบไหน\u003C\u002Fli>\u003Cli>\u003Cstrong>สร้าง Design Tokens:\u003C\u002Fstrong> เริ่มจาก colors และ typography\u003C\u002Fli>\u003Cli>\u003Cstrong>พัฒนา Component System:\u003C\u002Fstrong> สร้างส่วนประกอบที่ใช้ซ้ำได้\u003C\u002Fli>\u003Cli>\u003Cstrong>จัดทำ Documentation:\u003C\u002Fstrong> เขียน style guide และ usage examples\u003C\u002Fli>\u003Cli>\u003Cstrong>Optimize Performance:\u003C\u002Fstrong> ปรับแต่งเพื่อความเร็วและประสิทธิภาพ\u003C\u002Fli>\u003C\u002Fol>\u003Cp>ในตอนถัดไป EP 9 เราจะมาเรียนรู้เคล็ดลับและเทคนิคเร็วต่างๆ ที่จะทำให้การใช้งาน Tailwind CSS เป็นเรื่องง่ายและรวดเร็วขึ้น รวมถึงการใช้เครื่องมือช่วยต่างๆ ที่จะเพิ่มประสิทธิภาพในการพัฒนา\u003C\u002Fp>\u003Cp>พร้อมสร้าง Design System ระดับมืออาชีพแล้วหรือยัง? ติดตาม Superdev School เพื่อเรียนรู้เทคนิคขั้นสูงเพิ่มเติม และอย่าลืมลองปรับแต่ง 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>","15_11zon_rdrecojr54.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fnzn3ycin5nb8ocz\u002F15_11zon_rdrecojr54.webp","2026-03-04 08:26:43.595Z","",{"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:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:39.604Z","233ybc0x5q6mkhh","theme customization","2026-04-10 16:07:32.566Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:40.779Z","dn4akaxxqxbo5xu","css variables","2026-04-10 16:07:32.950Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"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":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:26:42.644Z","c8pqsnbnokm5g8j","custom colors","2026-04-10 16:07:33.422Z",{"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":21,"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":21,"th":21},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","30c5a17y5b1hkmq",219,"nzn3ycin5nb8ocz",[20,25,30,35,40],"2025-07-22 11:21:37.657Z","เรียนรู้การปรับแต่ง Tailwind CSS แบบมืออาชีพ ครอบคลุม Theme Variables, Custom Colors, Typography System, Dark Mode และการสร้าง Design System สมบูรณ์พร้อมใช้งาน","tailwind-css-customization-theme-plugin","2026-04-25 02:47:18.248Z",1,{"th":76}]