[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-tailwind-css-tips-tricks-productivity-ep9-all--*":3,"academy-blog-translations-tl1mxl9xa0ca4o8":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 9: เคล็ดลับเซียน: 20 เทคนิคที่ทำให้คุณเขียน Tailwind เร็วขึ้น 10 เท่า","sclblg987654321","school_blog_translations","\u003Cp>เขียน Tailwind CSS มาสักพักแล้ว แต่รู้สึกว่าตัวเองยังไม่ได้เร็วเท่าที่ควรจะเป็น? หรือบางครั้งก็ยังต้องไปค้นหา class ที่ต้องการในเอกสาร?\u003C\u002Fp>\u003Cp>ในตอนที่ 9 ของซีรีย์นี้ เราจะมาเรียนรู้เคล็ดลับและเทคนิคต่างๆ ที่จะช่วยให้คุณใช้ Tailwind CSS ได้อย่างมืออาชีพ ตั้งแต่การตั้งค่าเครื่องมือ การใช้ shortcuts ต่างๆ ไปจนถึงเทคนิคขั้นสูงที่จะทำให้งานของคุณมีประสิทธิภาพมากขึ้น\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>1. การตั้งค่า VS Code ให้เป็นมิตรกับ Tailwind\u003C\u002Fh2>\u003Ch3>ติดตั้ง Extension ที่จำเป็น\u003C\u002Fh3>\u003Cp>การมี Extension ที่เหมาะสมจะช่วยให้การเขียน Tailwind เป็นเรื่องง่ายมาก:\u003C\u002Fp>\u003Cp>Tailwind CSS IntelliSense (บังคับใช้)\u003C\u002Fp>\u003Cul>\u003Cli>ติดตั้งจาก VS Code Marketplace\u003C\u002Fli>\u003Cli>ให้ autocomplete, hover preview, และ syntax highlighting\u003C\u002Fli>\u003Cli>ช่วยตรวจสอบ class conflicts\u003C\u002Fli>\u003Cli>แสดง CSS ที่แท้จริงเมื่อ hover บน class\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Headwind (จัดเรียง Class อัตโนมัติ)\u003C\u002Fp>\u003Cul>\u003Cli>จัดเรียง Tailwind classes ตามลำดับที่เหมาะสม\u003C\u002Fli>\u003Cli>ทำให้โค้ดอ่านง่ายและสอดคล้องกัน\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Auto Rename Tag\u003C\u002Fp>\u003Cul>\u003Cli>เปลี่ยน tag เปิด-ปิดพร้อมกัน\u003C\u002Fli>\u003Cli>ประหยัดเวลาในการแก้ไข HTML\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>การตั้งค่า VS Code Settings\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"tailwindCSS.includeLanguages\": {\n    \"html\": \"html\",\n    \"javascript\": \"javascript\",\n    \"typescript\": \"typescript\",\n    \"javascriptreact\": \"javascriptreact\",\n    \"typescriptreact\": \"typescriptreact\"\n  },\n  \n  \"editor.quickSuggestions\": {\n    \"strings\": true\n  },\n  \n  \"emmet.includeLanguages\": {\n    \"javascript\": \"javascriptreact\",\n    \"typescript\": \"typescriptreact\"\n  },\n  \n  \"editor.formatOnSave\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.organizeImports\": true\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ติดตั้ง Prettier Plugin\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-bash\">npm install -D prettier prettier-plugin-tailwindcss\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"plugins\": [\"prettier-plugin-tailwindcss\"],\n  \"tailwindConfig\": \".\u002Ftailwind.config.js\"\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>2. เทคนิคการเขียน Class อย่างมีระบบ\u003C\u002Fh2>\u003Ch3>ลำดับการเขียน Class ที่ถูกต้อง\u003C\u002Fh3>\u003Cp>เขียน class ตามลำดับนี้จะทำให้อ่านง่ายและบำรุงรักษาได้ดีกว่า:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ลำดับที่แนะนำ -->\n<div class=\"\n  relative               <!-- Position -->\n  flex items-center      <!-- Display & Layout -->\n  w-full h-16           <!-- Sizing -->\n  px-4 py-2             <!-- Spacing -->\n  bg-blue-500           <!-- Background -->\n  border border-gray-300 <!-- Border -->\n  text-white font-medium <!-- Typography -->\n  rounded-lg            <!-- Border Radius -->\n  shadow-md             <!-- Effects -->\n  transition-colors     <!-- Transitions -->\n  hover:bg-blue-600     <!-- Interactive states -->\n\">\n  Content\n<\u002Fdiv>\n\n<!-- ตัวอย่างที่ซับซ้อนกว่า -->\n<button class=\"\n  relative inline-flex items-center justify-center\n  min-w-[120px] px-6 py-3\n  bg-gradient-to-r from-blue-500 to-purple-600\n  border-0\n  text-white font-semibold text-sm uppercase tracking-wider\n  rounded-xl\n  shadow-lg shadow-blue-500\u002F25\n  transition-all duration-300 ease-out\n  hover:from-blue-600 hover:to-purple-700 hover:shadow-xl hover:-translate-y-0.5\n  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n  active:translate-y-0 active:shadow-md\n  disabled:opacity-50 disabled:cursor-not-allowed\n\">\n  Get Started\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>3. เทคนิคการใช้ Arbitrary Values อย่างชาญฉลาด\u003C\u002Fh2>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้ Custom Values เมื่อจำเป็น -->\n<div class=\"w-[calc(100%-2rem)] h-[50vh] bg-[#ff6b35] text-[14px]\">\n  Custom sizing and colors\n<\u002Fdiv>\n\n<!-- ใช้ CSS Variables -->\n<div class=\"bg-[var(--brand-color)] text-[var(--brand-text)]\">\n  CSS Variable usage\n<\u002Fdiv>\n\n<!-- Complex Calculations -->\n<div class=\"\n  grid-cols-[200px_1fr_100px]\n  gap-[clamp(1rem,5vw,3rem)]\n  min-h-[calc(100vh-4rem)]\n\">\n  Advanced Grid Layout\n<\u002Fdiv>\n\n<!-- Custom Gradients -->\n<div class=\"bg-gradient-to-br from-[#667eea] via-[#764ba2] to-[#f093fb]\">\n  Custom Gradient\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>4. Shortcuts และ Keyboard Tricks\u003C\u002Fh2>\u003Ch3>VS Code Shortcuts สำหรับ Tailwind\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext\">Ctrl+Space (Cmd+Space)     → เปิด IntelliSense suggestions\nCtrl+Shift+P (Cmd+Shift+P) → Command palette\nAlt+Click                  → Multiple cursor selection\nCtrl+D (Cmd+D)            → Select next occurrence\nCtrl+Shift+L (Cmd+Shift+L) → Select all occurrences\nAlt+Up\u002FDown               → Move line up\u002Fdown\nShift+Alt+Up\u002FDown         → Copy line up\u002Fdown\nCtrl+\u002F (Cmd+\u002F)            → Toggle comment\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิคการใช้ Multi-cursor\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- เลือกหลายบรรทัดแล้วแก้ไขพร้อมกัน -->\n<div class=\"bg-blue-500 text-white p-4\">Item 1<\u002Fdiv>\n<div class=\"bg-blue-500 text-white p-4\">Item 2<\u002Fdiv>\n<div class=\"bg-blue-500 text-white p-4\">Item 3<\u002Fdiv>\n<!-- กด Alt+Click ที่ bg-blue-500 แต่ละบรรทัด แล้วแก้เป็น bg-red-500 พร้อมกัน -->\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>5. เทคนิคการใช้ Responsive แบบมืออาชีพ\u003C\u002Fh2>\u003Ch3>Mobile-First Approach ที่ถูกต้อง\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ✅ ถูกต้อง - เริ่มจาก mobile แล้วขยายไปใหญ่ -->\n<div class=\"\n  p-4 md:p-6 lg:p-8\n  text-sm md:text-base lg:text-lg\n  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3\n\">\n  Content\n<\u002Fdiv>\n\n<!-- ❌ ผิด - เริ่มจาก desktop แล้วลดลง -->\n<div class=\"\n  p-8 md:p-6 sm:p-4\n  text-lg md:text-base sm:text-sm\n  grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1\n\">\n  Content\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิคการซ่อน\u002Fแสดง Element\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- แสดงเฉพาะใน Mobile -->\n<div class=\"block md:hidden\">\n  <button class=\"w-full bg-blue-500 text-white py-3\">\n    Mobile Menu Toggle\n  <\u002Fbutton>\n<\u002Fdiv>\n\n<!-- แสดงเฉพาะใน Desktop -->\n<nav class=\"hidden md:flex space-x-6\">\n  <a href=\"#\">Home<\u002Fa>\n  <a href=\"#\">About<\u002Fa>\n  <a href=\"#\">Contact<\u002Fa>\n<\u002Fnav>\n\n<!-- เปลี่ยน Layout ตามขนาดจอ -->\n<div class=\"\n  flex flex-col          <!-- Mobile: stack vertically -->\n  md:flex-row           <!-- Tablet+: side by side -->\n  lg:items-center       <!-- Desktop: center aligned -->\n\">\n  <div class=\"flex-1\">Main Content<\u002Fdiv>\n  <div class=\"w-full md:w-80 lg:w-96\">Sidebar<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>6. เทคนิคการจัดการสี\u003C\u002Fh2>\u003Ch3>สร้าง Color Palette ที่สอดคล้องกัน\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้สีจาก Scale เดียวกัน -->\n<div class=\"space-y-4\">\n  <!-- Light background -->\n  <div class=\"bg-blue-50 border border-blue-200 text-blue-900 p-4\">\n    Light variant\n  <\u002Fdiv>\n  \n  <!-- Medium background -->\n  <div class=\"bg-blue-100 border border-blue-300 text-blue-800 p-4\">\n    Medium variant\n  <\u002Fdiv>\n  \n  <!-- Dark background -->\n  <div class=\"bg-blue-500 border border-blue-600 text-white p-4\">\n    Dark variant\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Semantic Colors -->\n<div class=\"space-y-2\">\n  <div class=\"bg-green-50 text-green-800 border border-green-200 p-3 rounded\">\n    ✅ Success message\n  <\u002Fdiv>\n  <div class=\"bg-yellow-50 text-yellow-800 border border-yellow-200 p-3 rounded\">\n    ⚠️ Warning message\n  <\u002Fdiv>\n  <div class=\"bg-red-50 text-red-800 border border-red-200 p-3 rounded\">\n    ❌ Error message\n  <\u002Fdiv>\n  <div class=\"bg-blue-50 text-blue-800 border border-blue-200 p-3 rounded\">\n    ℹ️ Info message\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิค Opacity Modifiers\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้ Opacity แทนการสร้างสีใหม่ -->\n<div class=\"bg-blue-500\u002F20 border border-blue-500\u002F30\">\n  20% opacity background\n<\u002Fdiv>\n\n<div class=\"bg-gradient-to-r from-purple-500\u002F80 to-pink-500\u002F80\">\n  Translucent gradient\n<\u002Fdiv>\n\n<!-- เปลี่ยน Opacity เมื่อ Hover -->\n<button class=\"\n  bg-blue-500 hover:bg-blue-500\u002F80\n  text-white hover:text-white\u002F90\n  transition-all\n\">\n  Hover me\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>7. เทคนิคการใช้ Flexbox และ Grid อย่างชาญฉลาด\u003C\u002Fh2>\u003Ch3>Flexbox Patterns ที่ใช้บ่อย\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Center everything -->\n<div class=\"flex items-center justify-center min-h-screen\">\n  <div>Perfect center<\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Navigation bar -->\n<nav class=\"flex items-center justify-between px-4 py-2\">\n  <div class=\"font-bold\">Logo<\u002Fdiv>\n  <div class=\"flex items-center space-x-4\">\n    <a href=\"#\">Home<\u002Fa>\n    <a href=\"#\">About<\u002Fa>\n    <button class=\"bg-blue-500 text-white px-4 py-2 rounded\">\n      Sign Up\n    <\u002Fbutton>\n  <\u002Fdiv>\n<\u002Fnav>\n\n<!-- Card with flexible content -->\n<div class=\"flex flex-col h-full\">\n  <img class=\"w-full h-48 object-cover\" src=\"image.jpg\" alt=\"\">\n  <div class=\"flex-1 p-4 flex flex-col\">\n    <h3 class=\"font-bold mb-2\">Title<\u002Fh3>\n    <p class=\"text-gray-600 mb-4 flex-1\">\n      Description that can vary in length\n    <\u002Fp>\n    <button class=\"w-full bg-blue-500 text-white py-2 rounded\">\n      Action\n    <\u002Fbutton>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Sticky footer layout -->\n<div class=\"flex flex-col min-h-screen\">\n  <header class=\"bg-blue-500 text-white p-4\">Header<\u002Fheader>\n  <main class=\"flex-1 p-4\">Main content<\u002Fmain>\n  <footer class=\"bg-gray-800 text-white p-4\">Footer<\u002Ffooter>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Grid Patterns ที่มีประโยชน์\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Auto-fit grid -->\n<div class=\"grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4\">\n  <div class=\"bg-white p-4 rounded shadow\">Card 1<\u002Fdiv>\n  <div class=\"bg-white p-4 rounded shadow\">Card 2<\u002Fdiv>\n  <div class=\"bg-white p-4 rounded shadow\">Card 3<\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Complex dashboard layout -->\n<div class=\"grid grid-cols-12 grid-rows-[auto_1fr_auto] h-screen gap-4\">\n  <!-- Header spans full width -->\n  <header class=\"col-span-12 bg-blue-500 text-white p-4\">\n    Header\n  <\u002Fheader>\n  \n  <!-- Sidebar -->\n  <aside class=\"col-span-3 bg-gray-100 p-4\">\n    Sidebar\n  <\u002Faside>\n  \n  <!-- Main content area -->\n  <main class=\"col-span-9 p-4 overflow-auto\">\n    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n      <div class=\"bg-white p-6 rounded shadow\">Widget 1<\u002Fdiv>\n      <div class=\"bg-white p-6 rounded shadow\">Widget 2<\u002Fdiv>\n      <div class=\"bg-white p-6 rounded shadow\">Widget 3<\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fmain>\n  \n  <!-- Footer spans full width -->\n  <footer class=\"col-span-12 bg-gray-800 text-white p-4\">\n    Footer\n  <\u002Ffooter>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>8. เทคนิคการสร้าง Animation และ Transition\u003C\u002Fh2>\u003Ch3>Micro-interactions ที่ทำให้ UI มีชีวิตชีวา\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Button animations -->\n<button class=\"\n  bg-blue-500 hover:bg-blue-600\n  text-white font-medium px-6 py-3 rounded-lg\n  transform transition-all duration-200 ease-out\n  hover:scale-105 hover:shadow-lg\n  active:scale-95 active:shadow-md\n  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n\">\n  Interactive Button\n<\u002Fbutton>\n\n<!-- Card hover effects -->\n<div class=\"\n  bg-white rounded-xl shadow-md overflow-hidden\n  transition-all duration-300 ease-out\n  hover:shadow-xl hover:-translate-y-1\n  cursor-pointer group\n\">\n  <img class=\"\n    w-full h-48 object-cover\n    transition-transform duration-500 ease-out\n    group-hover:scale-110\n  \" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1518837695005-2083093ee35b?w=400\" alt=\"\" loading=\"lazy\">\n  \n  <div class=\"p-6\">\n    <h3 class=\"\n      font-semibold text-lg mb-2\n      transition-colors duration-200\n      group-hover:text-blue-600\n    \">\n      Card Title\n    <\u002Fh3>\n    <p class=\"text-gray-600\">Card description<\u002Fp>\n    \n    <div class=\"\n      mt-4 opacity-0 transform translate-y-2\n      transition-all duration-300 ease-out\n      group-hover:opacity-100 group-hover:translate-y-0\n    \">\n      <button class=\"text-blue-600 font-medium\">Learn More →<\u002Fbutton>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Loading states -->\n<div class=\"space-y-4\">\n  <!-- Pulse loading -->\n  <div class=\"animate-pulse bg-gray-300 h-4 rounded\"><\u002Fdiv>\n  <div class=\"animate-pulse bg-gray-300 h-4 rounded w-3\u002F4\"><\u002Fdiv>\n  <div class=\"animate-pulse bg-gray-300 h-4 rounded w-1\u002F2\"><\u002Fdiv>\n  \n  <!-- Spinner -->\n  <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500\"><\u002Fdiv>\n  \n  <!-- Bounce -->\n  <div class=\"flex space-x-1\">\n    <div class=\"animate-bounce bg-blue-500 h-2 w-2 rounded-full\"><\u002Fdiv>\n    <div class=\"animate-bounce bg-blue-500 h-2 w-2 rounded-full\" style=\"animation-delay: 0.1s;\"><\u002Fdiv>\n    <div class=\"animate-bounce bg-blue-500 h-2 w-2 rounded-full\" style=\"animation-delay: 0.2s;\"><\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>9. เทคนิค Form และ Input ขั้นสูง\u003C\u002Fh2>\u003Ch3>สร้าง Form ที่สวยและใช้งานง่าย\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Modern form design -->\n<form class=\"max-w-md mx-auto space-y-6\">\n  <!-- Floating label input -->\n  <div class=\"relative group\">\n    <input \n      type=\"email\" \n      id=\"email\"\n      class=\"\n        peer w-full px-3 pb-2 pt-6 \n        border-2 border-gray-300 rounded-lg\n        focus:border-blue-500 focus:outline-none\n        transition-all duration-200\n      \"\n      placeholder=\" \"\n    >\n    <label \n      for=\"email\"\n      class=\"\n        absolute left-3 top-2 text-xs text-gray-500\n        peer-placeholder-shown:text-base peer-placeholder-shown:top-4\n        peer-focus:text-xs peer-focus:top-2 peer-focus:text-blue-500\n        transition-all duration-200 pointer-events-none\n      \"\n    >\n      Email Address\n    <\u002Flabel>\n  <\u002Fdiv>\n\n  <!-- Input with icon -->\n  <div class=\"relative\">\n    <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n      <svg class=\"h-5 w-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"><\u002Fpath>\n      <\u002Fsvg>\n    <\u002Fdiv>\n    <input\n      type=\"text\"\n      placeholder=\"Full name\"\n      class=\"\n        w-full pl-10 pr-3 py-3\n        border border-gray-300 rounded-lg\n        focus:ring-2 focus:ring-blue-500 focus:border-blue-500\n        transition-all duration-200\n      \"\n    >\n  <\u002Fdiv>\n\n  <!-- File upload with drag and drop styling -->\n  <div class=\"\n    border-2 border-dashed border-gray-300 rounded-lg p-6 text-center\n    hover:border-blue-500 hover:bg-blue-50\n    transition-all duration-200 cursor-pointer\n    group\n  \">\n    <input type=\"file\" class=\"hidden\" id=\"file-upload\">\n    <label for=\"file-upload\" class=\"cursor-pointer\">\n      <svg class=\"mx-auto h-12 w-12 text-gray-400 group-hover:text-blue-500 transition-colors\" \n           fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" \n              d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"><\u002Fpath>\n      <\u002Fsvg>\n      <p class=\"mt-2 text-sm text-gray-600 group-hover:text-blue-600 transition-colors\">\n        <span class=\"font-medium\">Click to upload<\u002Fspan> or drag and drop\n      <\u002Fp>\n      <p class=\"text-xs text-gray-500\">PNG, JPG, GIF up to 10MB<\u002Fp>\n    <\u002Flabel>\n  <\u002Fdiv>\n\n  <!-- Submit button -->\n  <button\n    type=\"submit\"\n    class=\"\n      w-full bg-blue-500 hover:bg-blue-600 \n      text-white font-semibold py-3 px-4 rounded-lg\n      transition-colors duration-200\n      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n      disabled:opacity-50 disabled:cursor-not-allowed\n    \"\n  >\n    Create Account\n  <\u002Fbutton>\n<\u002Fform>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>10. เทคนิคการจัดการ State ด้วย CSS\u003C\u002Fh2>\u003Ch3>การใช้ Pseudo-classes อย่างเชี่ยวชาญ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Complex form validation styling -->\n<div class=\"space-y-4\">\n  <div class=\"relative\">\n    <input \n      type=\"email\" \n      required\n      class=\"\n        w-full px-3 py-2 border rounded-lg peer\n        border-gray-300 focus:border-blue-500\n        invalid:border-red-500 invalid:focus:border-red-500\n        valid:border-green-500 valid:focus:border-green-500\n        transition-colors duration-200\n      \"\n      placeholder=\"Email address\"\n    >\n    <p class=\"\n      text-sm mt-1 opacity-0\n      peer-invalid:opacity-100 peer-invalid:text-red-500\n      transition-all duration-200\n    \">\n      Please enter a valid email address\n    <\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- List with alternating colors and hover states -->\n<ul class=\"divide-y divide-gray-200\">\n  <li class=\"\n    py-3 px-4 hover:bg-gray-50\n    first:rounded-t-lg last:rounded-b-lg\n    transition-colors duration-200\n  \">\n    Item 1\n  <\u002Fli>\n  <li class=\"\n    py-3 px-4 hover:bg-gray-50\n    bg-gray-25\n    transition-colors duration-200\n  \">\n    Item 2\n  <\u002Fli>\n  <li class=\"\n    py-3 px-4 hover:bg-gray-50\n    transition-colors duration-200\n  \">\n    Item 3\n  <\u002Fli>\n<\u002Ful>\n\n<!-- Table with row highlighting -->\n<table class=\"w-full\">\n  <tbody>\n    <tr class=\"\n      border-b hover:bg-blue-50\n      transition-colors duration-200\n      group\n    \">\n      <td class=\"py-3 px-4 group-hover:text-blue-900\">John Doe<\u002Ftd>\n      <td class=\"py-3 px-4 group-hover:text-blue-900\">john@example.com<\u002Ftd>\n      <td class=\"py-3 px-4\">\n        <button class=\"\n          opacity-0 group-hover:opacity-100\n          text-blue-600 hover:text-blue-800\n          transition-all duration-200\n        \">\n          Edit\n        <\u002Fbutton>\n      <\u002Ftd>\n    <\u002Ftr>\n  <\u002Ftbody>\n<\u002Ftable>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>11. Performance Tips และ Best Practices\u003C\u002Fh2>\u003Ch3>การเขียน HTML ที่มีประสิทธิภาพ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ✅ ดี - ใช้ class น้อยที่สุดที่ได้ผล -->\n<div class=\"flex items-center space-x-4\">\n  <img class=\"w-12 h-12 rounded-full\" src=\"avatar.jpg\" alt=\"\">\n  <div>\n    <h4 class=\"font-medium\">John Doe<\u002Fh4>\n    <p class=\"text-gray-600 text-sm\">Software Engineer<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- ❌ ไม่ดี - ใช้ class มากเกินไป -->\n<div class=\"flex flex-row items-center justify-start space-x-4 w-full\">\n  <img class=\"w-12 h-12 rounded-full object-cover border-0\" src=\"avatar.jpg\" alt=\"\">\n  <div class=\"flex flex-col items-start justify-start\">\n    <h4 class=\"font-medium text-base leading-normal text-black\">John Doe<\u002Fh4>\n    <p class=\"text-gray-600 text-sm leading-normal font-normal\">Software Engineer<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>การใช้ @apply อย่างมีสติ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* ✅ ดี - รวม pattern ที่ใช้บ่อย *\u002F\n.btn-primary {\n  @apply bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-3 rounded-lg transition-colors;\n}\n\n.card {\n  @apply bg-white rounded-lg shadow-md overflow-hidden;\n}\n\n\u002F* ❌ ไม่ดี - รวม class ที่ใช้แค่ที่เดียว *\u002F\n.unique-header {\n  @apply text-2xl font-bold text-center mb-4;\n}\n\n\u002F* ✅ ดี - สร้าง utility สำหรับ pattern ซับซ้อน *\u002F\n.focus-ring {\n  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;\n}\n\n.gradient-text {\n  @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>12. เทคนิค Debug และ Troubleshooting\u003C\u002Fh2>\u003Ch3>การใช้ Browser DevTools กับ Tailwind\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- เพิ่ม class ชั่วคราวเพื่อ debug -->\n<div class=\"bg-red-500\u002F20 border-2 border-yellow-500\">\n  <!-- เพิ่ม background สีแดงโปร่งใสเพื่อดู layout -->\n  <!-- เพิ่ม border เหลืองเพื่อดู boundaries -->\n  \n  <div class=\"bg-blue-500\u002F20 p-4\">\n    Content here\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- ใช้ outline เพื่อดู element boundaries -->\n<div class=\"outline outline-red-500 outline-2\">\n  Debug element\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิคการแก้ปัญหาที่พบบ่อย\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- 1. Class ไม่ทำงาน - ตรวจสอบ order -->\n<!-- ❌ ผิด - bg-red-500 จะ override bg-blue-500 -->\n<div class=\"bg-blue-500 bg-red-500\">Text<\u002Fdiv>\n\n<!-- ✅ ถูก - ใช้ conditional class -->\n<div class=\"bg-blue-500 hover:bg-red-500\">Text<\u002Fdiv>\n\n<!-- 2. Responsive ไม่ทำงาน -->\n<!-- ❌ ผิด -->\n<div class=\"text-lg sm:text-base\">Text<\u002Fdiv>\n\n<!-- ✅ ถูก - Mobile-first -->\n<div class=\"text-base sm:text-lg\">Text<\u002Fdiv>\n\n<!-- 3. Z-index issues -->\n<div class=\"relative\">\n  <div class=\"absolute z-10 bg-white p-4\">Dropdown<\u002Fdiv>\n  <div class=\"relative z-20\">Content above dropdown<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cdiv>\u003Cdiv class=\"grid-cols-1 grid gap-2.5 [&_>_*]:min-w-0 !gap-3.5\">\u003Cp> \u003C\u002Fp>\u003Ch2>13. Workflow และ Project Structure\u003C\u002Fh2>\u003Ch3>การจัดเก็บไฟล์แบบมืออาชีพ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext\">project\u002F\n├── src\u002F\n│   ├── styles\u002F\n│   │   ├── globals.css           # Tailwind imports + global styles\n│   │   ├── components.css        # Component-specific styles\n│   │   ├── utilities.css         # Custom utility classes\n│   │   └── themes\u002F\n│   │       ├── light.css         # Light theme variables\n│   │       └── dark.css          # Dark theme variables\n│   ├── components\u002F\n│   │   ├── ui\u002F                   # Reusable UI components\n│   │   │   ├── Button\u002F\n│   │   │   │   ├── Button.jsx\n│   │   │   │   ├── Button.stories.js\n│   │   │   │   └── Button.test.js\n│   │   │   ├── Card\u002F\n│   │   │   │   ├── Card.jsx\n│   │   │   │   ├── CardHeader.jsx\n│   │   │   │   ├── CardBody.jsx\n│   │   │   │   └── CardFooter.jsx\n│   │   │   ├── Input\u002F\n│   │   │   │   ├── Input.jsx\n│   │   │   │   ├── TextArea.jsx\n│   │   │   │   └── Select.jsx\n│   │   │   └── index.js          # Export all UI components\n│   │   ├── layout\u002F               # Layout components\n│   │   │   ├── Header\u002F\n│   │   │   │   ├── Header.jsx\n│   │   │   │   ├── Navigation.jsx\n│   │   │   │   └── UserMenu.jsx\n│   │   │   ├── Footer\u002F\n│   │   │   │   └── Footer.jsx\n│   │   │   ├── Sidebar\u002F\n│   │   │   │   ├── Sidebar.jsx\n│   │   │   │   └── SidebarItem.jsx\n│   │   │   └── Layout.jsx        # Main layout wrapper\n│   │   ├── forms\u002F                # Form-specific components\n│   │   │   ├── ContactForm.jsx\n│   │   │   ├── LoginForm.jsx\n│   │   │   └── RegisterForm.jsx\n│   │   └── pages\u002F                # Page-specific components\n│   │       ├── HomePage\u002F\n│   │       ├── AboutPage\u002F\n│   │       └── ContactPage\u002F\n│   ├── hooks\u002F                    # Custom React hooks\n│   │   ├── useTheme.js\n│   │   ├── useLocalStorage.js\n│   │   └── useApi.js\n│   ├── utils\u002F\n│   │   ├── cn.js                 # Class name utility\n│   │   ├── theme.js              # Theme configuration\n│   │   ├── constants.js          # App constants\n│   │   └── helpers.js            # Helper functions\n│   ├── assets\u002F\n│   │   ├── images\u002F\n│   │   ├── icons\u002F\n│   │   └── fonts\u002F\n│   └── pages\u002F                    # Next.js pages or React Router\n├── docs\u002F\n│   ├── design-system.md          # Design system documentation\n│   ├── component-guide.md        # Component usage guide\n│   └── style-guide.html          # Visual style guide\n├── storybook\u002F                    # Storybook configuration\n├── tests\u002F                        # Test files\n├── .vscode\u002F\n│   ├── settings.json             # VS Code settings\n│   ├── extensions.json           # Recommended extensions\n│   └── snippets\u002F                 # Custom code snippets\n├── tailwind.config.js            # Tailwind configuration\n├── postcss.config.js             # PostCSS configuration\n├── .prettierrc                   # Prettier configuration\n├── .eslintrc.js                  # ESLint configuration\n└── package.json\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Class Name Utility Function (cn.js)\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F utils\u002Fcn.js\nimport { clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n\u002F**\n * Combines class names and merges Tailwind classes intelligently\n * @param {...(string|Object|Array)} inputs - Class names to combine\n * @returns {string} Combined and merged class names\n *\u002F\nexport function cn(...inputs) {\n  return twMerge(clsx(inputs))\n}\n\n\u002F\u002F Example usage:\n\u002F\u002F cn('px-2 py-1', 'px-4') \u002F\u002F => 'py-1 px-4' (px-4 overrides px-2)\n\u002F\u002F cn('bg-red-500', condition && 'bg-blue-500') \u002F\u002F => conditional classes\n\u002F\u002F cn(['bg-red-500', 'text-white'], { 'font-bold': isActive }) \u002F\u002F => mixed types\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch2>14. Component Patterns ที่ควรรู้\u003C\u002Fh2>\u003Ch3>Compound Component Pattern\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-jsx\">\u002F\u002F Compound Component Pattern\nfunction Card({ children, className, ...props }) {\n  return (\n    <div \n      className={cn('bg-white rounded-lg shadow-md overflow-hidden', className)}\n      {...props}\n    >\n      {children}\n    <\u002Fdiv>\n  )\n}\n\nfunction CardHeader({ children, className, ...props }) {\n  return (\n    <div \n      className={cn('px-6 py-4 border-b border-gray-200', className)}\n      {...props}\n    >\n      {children}\n    <\u002Fdiv>\n  )\n}\n\nfunction CardContent({ children, className, ...props }) {\n  return (\n    <div className={cn('px-6 py-4', className)} {...props}>\n      {children}\n    <\u002Fdiv>\n  )\n}\n\nfunction CardFooter({ children, className, ...props }) {\n  return (\n    <div \n      className={cn('px-6 py-4 border-t border-gray-200 bg-gray-50', className)}\n      {...props}\n    >\n      {children}\n    <\u002Fdiv>\n  )\n}\n\nCard.Header = CardHeader\nCard.Content = CardContent\nCard.Footer = CardFooter\n\n\u002F\u002F การใช้งาน\n<Card>\n  <Card.Header>\n    <h3 className=\"font-semibold\">Card Title<\u002Fh3>\n  <\u002FCard.Header>\n  <Card.Content>\n    <p>Card content goes here<\u002Fp>\n  <\u002FCard.Content>\n  <Card.Footer>\n    <button className=\"btn-primary\">Action<\u002Fbutton>\n  <\u002FCard.Footer>\n<\u002FCard>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>15. เทคนิคการใช้ Dark Mode\u003C\u002Fh2>\u003Ch3>Dark Mode Toggle ที่สมบูรณ์\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Dark mode toggle button -->\n<button \n  id=\"theme-toggle\"\n  class=\"\n    p-2 rounded-lg \n    bg-gray-200 dark:bg-gray-700 \n    text-gray-800 dark:text-gray-200\n    hover:bg-gray-300 dark:hover:bg-gray-600\n    transition-colors duration-200\n  \"\n>\n  <!-- Sun icon (show in dark mode) -->\n  <svg class=\"w-5 h-5 hidden dark:block\" 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.59z\"\u002F>\n  <\u002Fsvg>\n  \n  <!-- Moon icon (show in light mode) -->\n  <svg class=\"w-5 h-5 block dark:hidden\" 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<!-- Dark mode optimized components -->\n<div class=\"\n  bg-white dark:bg-gray-800\n  text-gray-900 dark:text-gray-100\n  border border-gray-200 dark:border-gray-700\n  p-6 rounded-lg\n\">\n  <h3 class=\"font-semibold mb-2\">Dark Mode Card<\u002Fh3>\n  <p class=\"text-gray-600 dark:text-gray-300\">\n    This card adapts to dark mode automatically\n  <\u002Fp>\n<\u002Fdiv>\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 preference 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  localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');\n});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>16. เทคนิคการสร้าง Layout ที่ซับซ้อน\u003C\u002Fh2>\u003Ch3>Dashboard Layout แบบมืออาชีพ\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"min-h-screen bg-gray-100 dark:bg-gray-900\">\n  <!-- Header -->\n  <header class=\"bg-white dark:bg-gray-800 shadow-sm\">\n    <div class=\"px-4 sm:px-6 lg:px-8\">\n      <div class=\"flex justify-between h-16\">\n        <div class=\"flex items-center\">\n          <img class=\"h-8 w-auto\" src=\"logo.svg\" alt=\"Logo\">\n          <nav class=\"hidden md:flex ml-6 space-x-8\">\n            <a href=\"#\" class=\"text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100\">\n              Dashboard\n            <\u002Fa>\n            <a href=\"#\" class=\"text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100\">\n              Analytics\n            <\u002Fa>\n          <\u002Fnav>\n        <\u002Fdiv>\n        \n        <div class=\"flex items-center space-x-4\">\n          <button id=\"theme-toggle\" class=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600\">\n            <svg class=\"w-5 h-5\" 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-.75z\"\u002F>\n            <\u002Fsvg>\n          <\u002Fbutton>\n          \n          <div class=\"relative\">\n            <img class=\"h-8 w-8 rounded-full\" src=\"avatar.jpg\" alt=\"\">\n          <\u002Fdiv>\n        <\u002Fdiv>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fheader>\n\n  <div class=\"flex\">\n    <!-- Sidebar -->\n    <aside class=\"w-64 bg-white dark:bg-gray-800 shadow-sm min-h-screen\">\n      <nav class=\"mt-5 px-2\">\n        <div class=\"space-y-1\">\n          <a href=\"#\" class=\"\n            bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100\n            group flex items-center px-2 py-2 text-sm font-medium rounded-md\n          \">\n            <svg class=\"text-gray-500 mr-3 h-6 w-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" 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            Dashboard\n          <\u002Fa>\n          \n          <a href=\"#\" class=\"\n            text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700\n            group flex items-center px-2 py-2 text-sm font-medium rounded-md\n          \">\n            <svg class=\"text-gray-400 mr-3 h-6 w-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\u002F>\n            <\u002Fsvg>\n            Users\n          <\u002Fa>\n        <\u002Fdiv>\n      <\u002Fnav>\n    <\u002Faside>\n\n    <!-- Main content -->\n    <main class=\"flex-1 p-6\">\n      <div class=\"max-w-7xl mx-auto\">\n        <!-- Stats -->\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8\">\n          <div class=\"bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm\">\n            <div class=\"flex items-center\">\n              <div class=\"p-2 bg-blue-100 dark:bg-blue-900 rounded-lg\">\n                <svg class=\"w-6 h-6 text-blue-600 dark:text-blue-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\u002F>\n                <\u002Fsvg>\n              <\u002Fdiv>\n              <div class=\"ml-4\">\n                <p class=\"text-sm font-medium text-gray-600 dark:text-gray-400\">Total Users<\u002Fp>\n                <p class=\"text-2xl font-semibold text-gray-900 dark:text-gray-100\">12,345<\u002Fp>\n              <\u002Fdiv>\n            <\u002Fdiv>\n          <\u002Fdiv>\n          \n          <!-- Repeat for other stats -->\n        <\u002Fdiv>\n\n        <!-- Charts and tables -->\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          <div class=\"bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm\">\n            <h3 class=\"text-lg font-medium text-gray-900 dark:text-gray-100 mb-4\">Recent Activity<\u002Fh3>\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center\">\n                <div class=\"w-2 h-2 bg-green-500 rounded-full mr-3\"><\u002Fdiv>\n                <div class=\"flex-1\">\n                  <p class=\"text-sm text-gray-900 dark:text-gray-100\">User John Doe registered<\u002Fp>\n                  <p class=\"text-xs text-gray-500 dark:text-gray-400\">2 minutes ago<\u002Fp>\n                <\u002Fdiv>\n              <\u002Fdiv>\n              <!-- More activities -->\n            <\u002Fdiv>\n          <\u002Fdiv>\n          \n          <div class=\"bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm\">\n            <h3 class=\"text-lg font-medium text-gray-900 dark:text-gray-100 mb-4\">Performance<\u002Fh3>\n            <div class=\"h-64 flex items-center justify-center text-gray-500 dark:text-gray-400\">\n              Chart placeholder\n            <\u002Fdiv>\n          <\u002Fdiv>\n        <\u002Fdiv>\n      <\u002Fdiv>\n    <\u002Fmain>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>17. เทคนิคการใช้ Hover States ขั้นสูง\u003C\u002Fh2>\u003Ch3>Interactive Cards และ Buttons\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Advanced button hover effects -->\n<div class=\"flex flex-wrap gap-4\">\n  <!-- Gradient button with glow -->\n  <button class=\"\n    relative px-6 py-3 \n    bg-gradient-to-r from-purple-500 to-pink-500\n    text-white font-semibold rounded-lg\n    transition-all duration-300 ease-out\n    hover:from-purple-600 hover:to-pink-600\n    hover:shadow-[0_0_20px_rgba(168,85,247,0.4)]\n    hover:-translate-y-0.5\n    active:translate-y-0\n  \">\n    Gradient Glow\n  <\u002Fbutton>\n\n  <!-- 3D button effect -->\n  <button class=\"\n    px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg\n    shadow-[0_4px_0_0_rgb(37,99,235)]\n    transition-all duration-150\n    hover:shadow-[0_2px_0_0_rgb(37,99,235)]\n    hover:translate-y-0.5\n    active:shadow-[0_0_0_0_rgb(37,99,235)]\n    active:translate-y-1\n  \">\n    3D Effect\n  <\u002Fbutton>\n\n  <!-- Border slide effect -->\n  <button class=\"\n    relative px-6 py-3 \n    bg-transparent border-2 border-green-500 text-green-500\n    font-semibold rounded-lg overflow-hidden\n    transition-colors duration-300\n    hover:text-white\n    group\n  \">\n    <span class=\"relative z-10\">Border Slide<\u002Fspan>\n    <div class=\"\n      absolute inset-0 bg-green-500\n      transform -translate-x-full\n      transition-transform duration-300\n      group-hover:translate-x-0\n    \"><\u002Fdiv>\n  <\u002Fbutton>\n<\u002Fdiv>\n\n<!-- Interactive card gallery -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n  <div class=\"\n    group relative bg-white rounded-xl shadow-lg overflow-hidden\n    transition-all duration-500 ease-out\n    hover:shadow-2xl hover:-translate-y-2\n    cursor-pointer\n  \">\n    <div class=\"relative overflow-hidden\">\n      <img \n        class=\"w-full h-48 object-cover transition-transform duration-700 group-hover:scale-110\" \n        src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1518837695005-2083093ee35b?w=400\" \n        alt=\"\"\n        loading=\"lazy\"\n      >\n      <div class=\"\n        absolute inset-0 bg-gradient-to-t from-black\u002F60 via-transparent to-transparent\n        opacity-0 group-hover:opacity-100\n        transition-opacity duration-300\n      \"><\u002Fdiv>\n      \n      <!-- Floating action button -->\n      <button class=\"\n        absolute top-4 right-4 p-2 bg-white rounded-full shadow-lg\n        opacity-0 transform translate-y-2\n        group-hover:opacity-100 group-hover:translate-y-0\n        transition-all duration-300 delay-100\n      \">\n        <svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"\u002F>\n        <\u002Fsvg>\n      <\u002Fbutton>\n    <\u002Fdiv>\n    \n    <div class=\"p-6\">\n      <h3 class=\"\n        font-semibold text-lg text-gray-900 mb-2\n        group-hover:text-blue-600 transition-colors duration-200\n      \">\n        Card Title\n      <\u002Fh3>\n      <p class=\"text-gray-600 mb-4\">\n        Beautiful card with hover effects and animations\n      <\u002Fp>\n      \n      <div class=\"\n        flex items-center justify-between\n        opacity-0 transform translate-y-2\n        group-hover:opacity-100 group-hover:translate-y-0\n        transition-all duration-300 delay-200\n      \">\n        <span class=\"text-2xl font-bold text-blue-600\">$99<\u002Fspan>\n        <button class=\"\n          px-4 py-2 bg-blue-500 text-white rounded-lg font-medium\n          hover:bg-blue-600 transition-colors duration-200\n        \">\n          Buy Now\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n    \n    <!-- Shine effect -->\n    <div class=\"\n      absolute inset-0 -top-2 -left-2\n      bg-gradient-to-r from-transparent via-white\u002F20 to-transparent\n      transform -skew-x-12 -translate-x-full\n      group-hover:animate-[shine_0.8s_ease-out]\n    \"><\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<style>\n@keyframes shine {\n  0% {\n    transform: translateX(-100%) skewX(-12deg);\n  }\n  100% {\n    transform: translateX(200%) skewX(-12deg);\n  }\n}\n<\u002Fstyle>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>18. เทคนิคการปรับแต่ง Scrollbar และ Selection\u003C\u002Fh2>\u003Ch3>Custom Scrollbar\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Custom scrollbar styles *\u002F\n@layer utilities {\n  .scrollbar-thin {\n    scrollbar-width: thin;\n  }\n  \n  .scrollbar-thumb-rounded {\n    scrollbar-color: rgb(156 163 175) transparent;\n  }\n  \n  \u002F* Webkit scrollbars *\u002F\n  .scrollbar-custom::-webkit-scrollbar {\n    @apply w-2;\n  }\n  \n  .scrollbar-custom::-webkit-scrollbar-track {\n    @apply bg-gray-100 rounded-full;\n  }\n  \n  .scrollbar-custom::-webkit-scrollbar-thumb {\n    @apply bg-gray-400 rounded-full hover:bg-gray-500;\n  }\n  \n  \u002F* Dark mode scrollbar *\u002F\n  .dark .scrollbar-custom::-webkit-scrollbar-track {\n    @apply bg-gray-800;\n  }\n  \n  .dark .scrollbar-custom::-webkit-scrollbar-thumb {\n    @apply bg-gray-600 hover:bg-gray-500;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Custom scrollbar container -->\n<div class=\"\n  h-64 overflow-y-auto p-4 bg-white rounded-lg border\n  scrollbar-thin scrollbar-thumb-rounded scrollbar-custom\n\">\n  <div class=\"space-y-4\">\n    <p>Content that requires scrolling...<\u002Fp>\n    <p>More content...<\u002Fp>\n    <!-- Repeat for scrollable content -->\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Custom Text Selection\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-css\">@layer base {\n  ::selection {\n    @apply bg-blue-200 text-blue-900;\n  }\n  \n  .dark ::selection {\n    @apply bg-blue-800 text-blue-100;\n  }\n  \n  \u002F* Specific selection colors for different sections *\u002F\n  .hero-section ::selection {\n    @apply bg-purple-200 text-purple-900;\n  }\n  \n  .code-block ::selection {\n    @apply bg-gray-800 text-gray-100;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>19. เทคนิคการใช้ CSS Grid ขั้นสูง\u003C\u002Fh2>\u003Ch3>Masonry Layout และ Complex Grids\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Masonry-style layout -->\n<div class=\"columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6\">\n  <div class=\"break-inside-avoid bg-white rounded-lg shadow-md overflow-hidden\">\n    <img class=\"w-full h-32 object-cover\" src=\"image1.jpg\" alt=\"\" loading=\"lazy\">\n    <div class=\"p-4\">\n      <h3 class=\"font-semibold mb-2\">Short content<\u002Fh3>\n      <p class=\"text-gray-600 text-sm\">Brief description<\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n  \n  <div class=\"break-inside-avoid bg-white rounded-lg shadow-md overflow-hidden\">\n    <img class=\"w-full h-48 object-cover\" src=\"image2.jpg\" alt=\"\" loading=\"lazy\">\n    <div class=\"p-4\">\n      <h3 class=\"font-semibold mb-2\">Longer content card<\u002Fh3>\n      <p class=\"text-gray-600 text-sm\">\n        This card has more content and will be taller than others, \n        creating a masonry effect with the CSS columns property.\n      <\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n  \n  <div class=\"break-inside-avoid bg-white rounded-lg shadow-md overflow-hidden\">\n    <div class=\"p-4\">\n      <h3 class=\"font-semibold mb-2\">Text only<\u002Fh3>\n      <p class=\"text-gray-600 text-sm\">No image, just text content<\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Complex grid layouts -->\n<div class=\"grid grid-cols-6 grid-rows-4 gap-4 h-screen p-4\">\n  <!-- Featured article - large -->\n  <article class=\"\n    col-span-6 md:col-span-4 row-span-2\n    bg-gradient-to-br from-blue-500 to-purple-600 \n    text-white p-6 rounded-xl\n    flex flex-col justify-end\n    relative overflow-hidden\n    group cursor-pointer\n  \">\n    <img \n      class=\"absolute inset-0 w-full h-full object-cover opacity-30 group-hover:opacity-20 transition-opacity\" \n      src=\"featured.jpg\" \n      alt=\"\"\n      loading=\"lazy\"\n    >\n    <div class=\"relative z-10\">\n      <span class=\"text-sm opacity-90\">Featured Article<\u002Fspan>\n      <h2 class=\"text-2xl md:text-3xl font-bold mb-2\">\n        Amazing Discovery in Science\n      <\u002Fh2>\n      <p class=\"opacity-90 mb-4\">\n        Scientists have made a breakthrough that could change everything...\n      <\u002Fp>\n      <button class=\"\n        bg-white\u002F20 hover:bg-white\u002F30 \n        text-white px-4 py-2 rounded-lg \n        backdrop-blur-sm transition-colors\n      \">\n        Read More\n      <\u002Fbutton>\n    <\u002Fdiv>\n  <\u002Farticle>\n  \n  <!-- Sidebar content -->\n  <aside class=\"col-span-6 md:col-span-2 row-span-4 space-y-4\">\n    <!-- Trending -->\n    <div class=\"bg-white rounded-xl p-4 shadow-sm\">\n      <h3 class=\"font-semibold mb-3\">Trending Now<\u002Fh3>\n      <div class=\"space-y-3\">\n        <div class=\"flex items-center space-x-3\">\n          <img class=\"w-12 h-12 rounded-lg object-cover\" src=\"thumb1.jpg\" alt=\"\" loading=\"lazy\">\n          <div class=\"flex-1\">\n            <h4 class=\"font-medium text-sm\">Article Title<\u002Fh4>\n            <p class=\"text-xs text-gray-500\">2 hours ago<\u002Fp>\n          <\u002Fdiv>\n        <\u002Fdiv>\n        <!-- More trending items -->\n      <\u002Fdiv>\n    <\u002Fdiv>\n    \n    <!-- Newsletter signup -->\n    <div class=\"bg-gradient-to-br from-green-400 to-blue-500 text-white p-4 rounded-xl\">\n      <h3 class=\"font-semibold mb-2\">Stay Updated<\u002Fh3>\n      <p class=\"text-sm opacity-90 mb-3\">Get the latest news in your inbox<\u002Fp>\n      <div class=\"flex\">\n        <input \n          type=\"email\" \n          placeholder=\"Email\" \n          class=\"flex-1 px-3 py-2 rounded-l-lg text-gray-900 text-sm\"\n        >\n        <button class=\"bg-white\u002F20 px-4 py-2 rounded-r-lg hover:bg-white\u002F30 transition-colors\">\n          →\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Faside>\n  \n  <!-- Secondary articles -->\n  <article class=\"col-span-3 md:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow\">\n    <img class=\"w-full h-32 object-cover\" src=\"article2.jpg\" alt=\"\" loading=\"lazy\">\n    <div class=\"p-4\">\n      <h3 class=\"font-semibold mb-1\">Secondary Article<\u002Fh3>\n      <p class=\"text-gray-600 text-sm\">Brief description...<\u002Fp>\n    <\u002Fdiv>\n  <\u002Farticle>\n  \n  <article class=\"col-span-3 md:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow\">\n    <img class=\"w-full h-32 object-cover\" src=\"article3.jpg\" alt=\"\" loading=\"lazy\">\n    <div class=\"p-4\">\n      <h3 class=\"font-semibold mb-1\">Another Article<\u002Fh3>\n      <p class=\"text-gray-600 text-sm\">Brief description...<\u002Fp>\n    <\u002Fdiv>\n  <\u002Farticle>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>20. เทคนิคการ Optimize Performance\u003C\u002Fh2>\u003Ch3>Lazy Loading และ Performance\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Optimized image loading -->\n<img \n  class=\"w-full h-64 object-cover rounded-lg\"\n  src=\"placeholder.jpg\"\n  data-src=\"actual-image.jpg\"\n  alt=\"Description\"\n  loading=\"lazy\"\n  onload=\"this.classList.add('loaded')\"\n>\n\n<style>\nimg {\n  transition: opacity 0.3s;\n}\nimg:not(.loaded) {\n  opacity: 0.7;\n}\nimg.loaded {\n  opacity: 1;\n}\n<\u002Fstyle>\n\n<!-- Progressive enhancement -->\n<div class=\"\n  bg-gradient-to-r from-gray-200 to-gray-300\n  animate-pulse rounded-lg\n  aspect-video\n\" data-image-container>\n  <!-- Placeholder while loading -->\n  <img \n    class=\"w-full h-full object-cover rounded-lg opacity-0 transition-opacity duration-500\"\n    data-src=\"image.jpg\"\n    alt=\"Content\"\n    onload=\"this.style.opacity=1; this.parentElement.classList.remove('animate-pulse')\"\n  >\n<\u002Fdiv>\n\n<!-- Intersection Observer for animations -->\n<div class=\"\n  opacity-0 translate-y-8\n  transition-all duration-700\n  [&.animate-in]:opacity-100 [&.animate-in]:translate-y-0\n\" data-animate>\n  Content that animates in when scrolled into view\n<\u002Fdiv>\n\n<script>\n\u002F\u002F Intersection Observer for scroll animations\nconst observerOptions = {\n  threshold: 0.1,\n  rootMargin: '0px 0px -50px 0px'\n};\n\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      entry.target.classList.add('animate-in');\n      observer.unobserve(entry.target);\n    }\n  });\n}, observerOptions);\n\ndocument.querySelectorAll('[data-animate]').forEach(el => {\n  observer.observe(el);\n});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>CSS-in-JS Optimization\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F Optimized class concatenation\nconst getButtonClasses = (variant, size, disabled) => {\n  const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';\n  \n  const variants = {\n    primary: 'bg-blue-500 hover:bg-blue-600 text-white focus:ring-blue-500',\n    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900 focus:ring-gray-500',\n    outline: 'border-2 border-gray-300 hover:bg-gray-50 text-gray-700 focus:ring-gray-500'\n  };\n  \n  const sizes = {\n    sm: 'px-3 py-1.5 text-sm',\n    md: 'px-4 py-2 text-base',\n    lg: 'px-6 py-3 text-lg'\n  };\n  \n  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';\n  \n  return `${baseClasses} ${variants[variant]} ${sizes[size]} ${disabledClasses}`.trim();\n};\n\n\u002F\u002F Usage\n<button className={getButtonClasses('primary', 'md', false)}>\n  Click me\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>สรุปเคล็ดลับทั้งหมด\u003C\u002Fh2>\u003Cp>เมื่อจบตอนที่ 9 คุณได้เรียนรู้ Tailwind CSS ตั้งแต่พื้นฐานจนถึงระดับมืออาชีพแล้ว เคล็ดลับสำคัญที่ต้องจำ:\u003C\u002Fp>\u003Ch3>🛠️ Setup และ Tools:\u003C\u002Fh3>\u003Cul>\u003Cli>ติดตั้ง VS Code extensions ที่จำเป็น (IntelliSense, Headwind)\u003C\u002Fli>\u003Cli>ใช้ Prettier plugin สำหรับการเรียงลำดับ class\u003C\u002Fli>\u003Cli>ตั้งค่า VS Code settings ให้รองรับ Tailwind\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>⚡ Productivity Tips:\u003C\u002Fh3>\u003Cul>\u003Cli>เขียน class ตามลำดับที่เหมาะสม (Position → Display → Sizing → Spacing → Styling)\u003C\u002Fli>\u003Cli>ใช้ arbitrary values เมื่อจำเป็น \u003Ccode>w-[calc(100%-2rem)]\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>ใช้ shortcuts และ multi-cursor selection\u003C\u002Fli>\u003Cli>ใช้ \u003Ccode>cn()\u003C\u002Fcode> utility function สำหรับการรวม classes\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🎨 Design Principles:\u003C\u002Fh3>\u003Cul>\u003Cli>คิด Mobile-First เสมอ\u003C\u002Fli>\u003Cli>ใช้สีจาก scale เดียวกันให้สอดคล้องกัน\u003C\u002Fli>\u003Cli>ใช้ opacity modifiers แทนการสร้างสีใหม่ \u003Ccode>bg-blue-500\u002F20\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>เพิ่ม micro-interactions ให้ UI มีชีวิตชีวา\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🚀 Advanced Techniques:\u003C\u002Fh3>\u003Cul>\u003Cli>ใช้ Grid และ Flexbox patterns ที่เหมาะสม\u003C\u002Fli>\u003Cli>สร้าง compound components ที่ใช้ซ้ำได้\u003C\u002Fli>\u003Cli>ใช้ CSS custom properties สำหรับ theming\u003C\u002Fli>\u003Cli>Optimize performance ด้วย lazy loading และ intersection observer\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>📱 Responsive Design:\u003C\u002Fh3>\u003Cul>\u003Cli>ใช้ breakpoint modifiers อย่างมีระบบ\u003C\u002Fli>\u003Cli>ซ่อน\u002Fแสดง elements ตามความเหมาะสม\u003C\u002Fli>\u003Cli>ปรับ layout ให้เหมาะกับแต่ละขนาดจอ\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🌙 Dark Mode:\u003C\u002Fh3>\u003Cul>\u003Cli>ใช้ \u003Ccode>dark:\u003C\u002Fcode> prefix สำหรับ dark mode styles\u003C\u002Fli>\u003Cli>สร้าง theme toggle ที่สมบูรณ์\u003C\u002Fli>\u003Cli>จัดเก็บ preference ใน localStorage\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🎯 Performance:\u003C\u002Fh3>\u003Cul>\u003Cli>ใช้ class น้อยที่สุดที่ได้ผล\u003C\u002Fli>\u003Cli>ใช้ \u003Ccode>@apply\u003C\u002Fcode> เฉพาะ patterns ที่ใช้บ่อย\u003C\u002Fli>\u003Cli>Optimize images ด้วย lazy loading\u003C\u002Fli>\u003Cli>ใช้ CSS-in-JS อย่างมีประสิทธิภาพ\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🐛 Debugging:\u003C\u002Fh3>\u003Cul>\u003Cli>ใช้ debug classes เช่น \u003Ccode>bg-red-500\u002F20\u003C\u002Fcode> เพื่อดู layout\u003C\u002Fli>\u003Cli>ตรวจสอบ class order และ specificity\u003C\u002Fli>\u003Cli>ใช้ browser DevTools ร่วมกับ Tailwind IntelliSense\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🏗️ Project Structure:\u003C\u002Fh3>\u003Cul>\u003Cli>จัดเก็บไฟล์อย่างมีระบบ\u003C\u002Fli>\u003Cli>สร้าง component library ที่ใช้ซ้ำได้\u003C\u002Fli>\u003Cli>ใช้ design tokens สำหรับความสอดคล้อง\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>💡 Pro Tips:\u003C\u002Fh3>\u003Col>\u003Cli>ใช้ arbitrary values สำหรับ edge cases - \u003Ccode>w-[calc(50%-1rem)]\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>ใช้ group utilities สำหรับ parent-child interactions - \u003Ccode>group-hover:\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>ใช้ peer utilities สำหรับ sibling interactions - \u003Ccode>peer-invalid:\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>รวม transition กับทุก interactive elements - \u003Ccode>transition-all duration-200\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>ใช้ semantic class names ร่วมกับ Tailwind - \u003Ccode>className={cn('btn', 'btn-primary', className)}\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Fol>\u003Ch3>🎓 Learning Path ต่อไป:\u003C\u002Fh3>\u003Cul>\u003Cli>ฝึกฝนโดยการ clone interface ที่ชื่นชอบ\u003C\u002Fli>\u003Cli>สร้าง design system ของตัวเอง\u003C\u002Fli>\u003Cli>ติดตาม Tailwind community และ updates\u003C\u002Fli>\u003Cli>ทดลองกับ headless UI libraries\u003C\u002Fli>\u003Cli>เรียนรู้ advanced CSS features ที่ทำงานร่วมกับ Tailwind\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>🔥 Final Pro Tips:\u003C\u002Fh3>\u003Cul>\u003Cli>Speed up development ด้วยการสร้าง snippets สำหรับ patterns ที่ใช้บ่อย\u003C\u002Fli>\u003Cli>Maintain consistency ด้วยการใช้ design tokens และ component system\u003C\u002Fli>\u003Cli>Stay updated กับ Tailwind releases และ community plugins\u003C\u002Fli>\u003Cli>Practice regularly - ยิ่งใช้ยิ่งเร็ว ยิ่งใช้ยิ่งเก่ง\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ความจริงที่สำคัญที่สุด: Tailwind CSS ไม่ใช่แค่ utility framework แต่เป็นเครื่องมือที่ช่วยให้เราคิดเรื่อง design system อย่างเป็นระบบ การเรียนรู้ Tailwind คือการเรียนรู้หลักการ design ที่ดี การจัดการ spacing, colors, typography และ responsive design อย่างมืออาชีพ\u003C\u002Fp>\u003Cp>หวังว่าเทคนิคเหล่านี้จะช่วยให้คุณเขียน Tailwind CSS ได้เร็วขึ้น มีประสิทธิภาพมากขึ้น และสร้างสรรค์ผลงานที่สวยงามได้ง่ายขึ้น\u003C\u002Fp>\u003Cp>จากนี้ไปให้ลองนำเทคนิคเหล่านี้ไปใช้ในโปรเจ็กต์จริง และอย่าลืมว่าการฝึกฝนอย่างสม่ำเสมอคือกุญแจสำคัญของการเป็นมือโปร!\u003C\u002Fp>\u003Cp>ติดตาม Superdev School เพื่อเรียนรู้เทคโนโลยีใหม่ๆ และเทคนิคการพัฒนาเว็บไซต์ขั้นสูงต่อไป!\u003C\u002Fp>\u003Cp>Happy Coding! 🚀💙\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>","17_11zon_qvbq5z20yy.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fes7unrkq3j5ue7m\u002F17_11zon_qvbq5z20yy.webp","2026-03-04 08:26:43.197Z","",{"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:38.443Z","ejnog91i69mc6hg","productivity tips","2026-04-10 16:07:32.243Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:39.210Z","7zrkt1quqzzjsu2","vs code extensions","2026-04-10 16:07:32.506Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:36.163Z","hwfo0itcn5mxejb","responsive design","2026-04-10 16:07:31.508Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:26:40.378Z","1ry4uzly1xiu4wm","css shortcuts","2026-04-10 16:07:32.880Z",{"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","tl1mxl9xa0ca4o8",220,"es7unrkq3j5ue7m",[20,25,30,35,40],"2025-07-23 02:05:13.331Z","สรุปเคล็ดลับและเทคนิคการใช้ Tailwind CSS แบบมืออาชีพ ครอบคลุม VS Code Setup, Shortcuts, Responsive Design, Animation, Form Design และ Performance Tips ที่จะเพิ่มประสิทธิภาพการทำงาน","tailwind-css-tips-tricks-productivity-ep9","2026-04-25 02:47:17.986Z",1,{"th":76}]