[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-ep3-tailwind-css-color-typography-design-system-all--*":3,"academy-blog-translations-2ky3tl9l0tf0wcw":80},{"data":4,"page":79,"perPage":79,"totalItems":79,"totalPages":79},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":74,"keywords":75,"locale":49,"published_at":76,"scheduled_at":13,"school_blog":70,"short_description":77,"status":68,"title":6,"updated":78,"updated_by":13,"slug":71,"views":73},"EP 3: Master Colors and Typography - Tailwind CSS Design System Techniques","sclblg987654321","school_blog_translations","\u003Cp>Have you ever wondered why some websites look amazing with perfect color combinations, readable fonts, and a professional appearance, while others are hard to use, difficult to read, and have clashing colors?\u003C\u002Fp>\u003Cp>The secret lies in using colors and fonts systematically! It's not just about choosing colors you like or using pretty fonts, but creating a balanced, consistent Design System that's suitable for users.\u003C\u002Fp>\u003Cp>Today we'll learn how to use colors and fonts in Tailwind CSS like a pro, from color selection techniques, creating beautiful Color Palettes, readable Typography systems, to implementing functional Dark Mode, plus building a comprehensive Design System!\u003C\u002Fp>\u003Ch2>Why Colors and Fonts Matter for User Experience\u003C\u002Fh2>\u003Ch3>The Impact of Colors on Perception\u003C\u002Fh3>\u003Cp>Colors aren't just about aesthetics—they affect user psychology and behavior:\u003C\u002Fp>\u003Cp>\u003Cstrong>Red\u003C\u002Fstrong> - Urgency, danger, excitement\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Delete or cancel buttons -->\n<button class=\"bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600\">\n  Delete Data\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Green\u003C\u002Fstrong> - Success, safety, action\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Save or confirm buttons -->\n<button class=\"bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600\">\n  Save\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Blue\u003C\u002Fstrong> - Trust, professionalism\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Primary website buttons -->\n<button class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600\">\n  Get Started\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Common Problems and Their Impact\u003C\u002Fh3>\u003Cp>\u003Cstrong>1. Insufficient Contrast\u003C\u002Fstrong> - Makes content hard to read, especially for users with visual impairments\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ Wrong: Insufficient contrast -->\n<p class=\"text-gray-400 bg-gray-300\">This text is hard to read<\u002Fp>\n\n<!-- ✅ Correct: Sufficient contrast -->\n<p class=\"text-gray-800 bg-gray-100\">This text is easy to read<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>2. Using Too Many Colors\u003C\u002Fstrong> - Makes design look cluttered without focus\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ❌ Wrong: Too many colors -->\n<div class=\"bg-red-500\">\n  <h1 class=\"text-blue-600\">Heading<\u002Fh1>\n  <p class=\"text-green-500\">Description<\u002Fp>\n  <button class=\"bg-yellow-400 text-purple-600\">Button<\u002Fbutton>\n<\u002Fdiv>\n\n<!-- ✅ Correct: Systematic color usage -->\n<div class=\"bg-gray-50\">\n  <h1 class=\"text-gray-900\">Heading<\u002Fh1>\n  <p class=\"text-gray-600\">Description<\u002Fp>\n  <button class=\"bg-blue-500 text-white\">Button<\u002Fbutton>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Comprehensive Color System in Tailwind CSS\u003C\u002Fh2>\u003Ch3>Well-Designed Color Palette\u003C\u002Fh3>\u003Cp>Tailwind CSS has a comprehensive color system with each color having 10-11 intensity levels:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Gray scale with 11 levels (50-950) -->\n<div class=\"bg-gray-50\">Lightest gray<\u002Fdiv>\n<div class=\"bg-gray-100\">Very light gray<\u002Fdiv>\n<div class=\"bg-gray-200\">Light gray<\u002Fdiv>\n<div class=\"bg-gray-300\">Medium gray<\u002Fdiv>\n<div class=\"bg-gray-400\">Medium-dark gray<\u002Fdiv>\n<div class=\"bg-gray-500\">Standard gray<\u002Fdiv>\n<div class=\"bg-gray-600\">Dark gray<\u002Fdiv>\n<div class=\"bg-gray-700\">Very dark gray<\u002Fdiv>\n<div class=\"bg-gray-800\">Extra dark gray<\u002Fdiv>\n<div class=\"bg-gray-900\">Darkest gray<\u002Fdiv>\n<div class=\"bg-gray-950\">Black gray (v3.3+)<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Professional Color Selection Techniques\u003C\u002Fh3>\u003Ch3>1. Color Harmony\u003C\u002Fh3>\u003Cp>\u003Cstrong>Monochromatic\u003C\u002Fstrong> - Using multiple tones of the same color\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-4\">\n  <div class=\"bg-blue-100 p-4 rounded\">Light background<\u002Fdiv>\n  <div class=\"bg-blue-300 p-4 rounded\">Medium background<\u002Fdiv>\n  <div class=\"bg-blue-500 p-4 rounded text-white\">Dark background<\u002Fdiv>\n  <div class=\"bg-blue-700 p-4 rounded text-white\">Very dark background<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Complementary\u003C\u002Fstrong> - Using opposite colors\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"bg-blue-500 text-orange-500 p-4 rounded\">\n  Blue with orange (complementary)\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Analogous\u003C\u002Fstrong> - Using adjacent colors\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"flex space-x-2\">\n  <div class=\"bg-blue-500 p-4 rounded text-white\">Blue<\u002Fdiv>\n  <div class=\"bg-indigo-500 p-4 rounded text-white\">Indigo<\u002Fdiv>\n  <div class=\"bg-purple-500 p-4 rounded text-white\">Purple<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Semantic Colors\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Meaningful color system -->\n<div class=\"space-y-4\">\n  <!-- Success -->\n  <div class=\"bg-green-100 border border-green-300 text-green-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Success<\u002Fh3>\n    <p>Operation completed successfully<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Warning -->\n  <div class=\"bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Warning<\u002Fh3>\n    <p>Please check or be careful<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Error -->\n  <div class=\"bg-red-100 border border-red-300 text-red-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Error<\u002Fh3>\n    <p>An error occurred<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Info -->\n  <div class=\"bg-blue-100 border border-blue-300 text-blue-800 p-4 rounded\">\n    <h3 class=\"font-semibold\">Information<\u002Fh3>\n    <p>Additional information<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Customizing Colors in Tailwind Config\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand': {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n          900: '#1e3a8a',\n        },\n        'secondary': {\n          500: '#6b7280',\n          600: '#4b5563',\n          700: '#374151',\n        }\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Using custom colors -->\n<div class=\"bg-brand-500 text-white p-6\">\n  <h1 class=\"text-brand-100\">Brand Colors<\u002Fh1>\n  <p class=\"text-secondary-300\">Custom color system<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Gradients and Effects\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Gradient Backgrounds -->\n<div class=\"bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white rounded-lg\">\n  <h2 class=\"text-2xl font-bold\">Gradient Background<\u002Fh2>\n<\u002Fdiv>\n\n<div class=\"bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 p-8 text-white rounded-lg\">\n  <h2 class=\"text-2xl font-bold\">Multi-color Gradient<\u002Fh2>\n<\u002Fdiv>\n\n<!-- Gradient Text (requires additional CSS) -->\n<style>\n.gradient-text {\n  background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n<\u002Fstyle>\n\n<h1 class=\"text-6xl font-bold gradient-text\">\n  Gradient Text\n<\u002Fh1>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Typography System for Professional Websites\u003C\u002Fh2>\u003Ch3>Font Family Management\u003C\u002Fh3>\u003Cp>Tailwind includes basic font family utilities:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Basic Font Families -->\n<p class=\"font-sans\">\n  Sans-serif: General-purpose font, suitable for content and UI\n<\u002Fp>\n\n<p class=\"font-serif\">\n  Serif: Traditional font, suitable for headings and long content\n<\u002Fp>\n\n<p class=\"font-mono\">\n  Monospace: Fixed-width font, suitable for code and numbers\n<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Adding Custom Fonts\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      fontFamily: {\n        'heading': ['Inter', 'system-ui', 'sans-serif'],\n        'body': ['Inter', 'system-ui', 'sans-serif'],\n        'mono': ['JetBrains Mono', 'Courier New', 'monospace'],\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Using Custom Fonts -->\n<h1 class=\"font-heading text-4xl font-bold\">Heading with Inter Font<\u002Fh1>\n<p class=\"font-body text-lg\">Body text with Inter Font<\u002Fp>\n<code class=\"font-mono text-sm\">console.log('Hello World');<\u002Fcode>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Appropriate Font Size and Line Height\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Balanced font size system -->\n<div class=\"space-y-4\">\n  <h1 class=\"text-5xl leading-tight font-bold text-gray-900\">\n    Main Heading (5xl + leading-tight)\n  <\u002Fh1>\n  \n  <h2 class=\"text-3xl leading-relaxed font-semibold text-gray-800\">\n    Secondary Heading (3xl + leading-relaxed)\n  <\u002Fh2>\n  \n  <h3 class=\"text-xl leading-normal font-medium text-gray-700\">\n    Sub Heading (xl + leading-normal)\n  <\u002Fh3>\n  \n  <p class=\"text-base leading-relaxed text-gray-600\">\n    Body text (base + leading-relaxed) - comfortable size for reading\n  <\u002Fp>\n  \n  <p class=\"text-sm leading-normal text-gray-500\">\n    Secondary text (sm + leading-normal)\n  <\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Recommended Typography Scale\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Scale for real-world usage -->\n<div class=\"space-y-6\">\n  <!-- Display Text -->\n  <h1 class=\"text-6xl leading-none font-bold\">Display Text<\u002Fh1>\n  \n  <!-- Page Title -->\n  <h1 class=\"text-4xl leading-tight font-bold\">Page Title<\u002Fh1>\n  \n  <!-- Section Title -->\n  <h2 class=\"text-2xl leading-snug font-semibold\">Section Title<\u002Fh2>\n  \n  <!-- Card Title -->\n  <h3 class=\"text-lg leading-normal font-medium\">Card Title<\u002Fh3>\n  \n  <!-- Body Text -->\n  <p class=\"text-base leading-relaxed\">Body text for comfortable reading<\u002Fp>\n  \n  <!-- Caption -->\n  <p class=\"text-sm leading-normal\">Caption or metadata<\u002Fp>\n  \n  <!-- Fine Print -->\n  <p class=\"text-xs leading-normal\">Fine print or labels<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Font Weight and Visual Hierarchy\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Creating Visual Hierarchy -->\n<article class=\"max-w-4xl mx-auto p-8\">\n  <!-- Primary Heading -->\n  <h1 class=\"text-4xl font-black text-gray-900 mb-2\">\n    The Ultimate Guide to Typography\n  <\u002Fh1>\n  \n  <!-- Subtitle -->\n  <p class=\"text-xl font-light text-gray-600 mb-8\">\n    Everything you need to know about choosing and using fonts\n  <\u002Fp>\n  \n  <!-- Section Heading -->\n  <h2 class=\"text-2xl font-bold text-gray-800 mt-12 mb-4\">\n    Why Typography Matters\n  <\u002Fh2>\n  \n  <!-- Body Text -->\n  <p class=\"text-base font-normal text-gray-700 mb-4 leading-relaxed\">\n    Typography is not just about making text look pretty. It's about creating a hierarchy \n    that guides your readers through your content in a logical and comfortable way.\n  <\u002Fp>\n  \n  <!-- Emphasized Text -->\n  <p class=\"text-base font-medium text-gray-800 mb-4\">\n    Good typography improves readability and user experience.\n  <\u002Fp>\n  \n  <!-- Quote -->\n  <blockquote class=\"text-lg font-medium italic text-gray-900 border-l-4 border-blue-500 pl-6 my-8\">\n    \"Typography is the craft of endowing human language with a durable visual form.\"\n  <\u002Fblockquote>\n<\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Building Design Systems with Tailwind\u003C\u002Fh2>\u003Ch3>Defining Design Tokens\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - Comprehensive Design Tokens system\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Primary Colors\n        primary: {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n        },\n        \u002F\u002F Secondary Colors\n        secondary: {\n          50: '#f5f3ff',\n          500: '#8b5cf6',\n          600: '#7c3aed',\n        },\n        \u002F\u002F Neutral Colors\n        neutral: {\n          50: '#f9fafb',\n          100: '#f3f4f6',\n          500: '#6b7280',\n          800: '#1f2937',\n          900: '#111827',\n        }\n      },\n      fontFamily: {\n        'heading': ['Inter', 'system-ui', 'sans-serif'],\n        'body': ['Inter', 'system-ui', 'sans-serif'],\n        'mono': ['JetBrains Mono', 'Courier New', 'monospace'],\n      },\n      spacing: {\n        'xs': '0.5rem',\n        'sm': '1rem',\n        'md': '1.5rem',\n        'lg': '2rem',\n        'xl': '3rem',\n      },\n      borderRadius: {\n        'sm': '0.25rem',\n        'md': '0.375rem',\n        'lg': '0.5rem',\n        'xl': '0.75rem',\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Basic Component Library\u003C\u002Fh3>\u003Ch3>Button System:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Button Variants -->\n<div class=\"space-x-4 space-y-4\">\n  <!-- Primary Button -->\n  <button class=\"bg-primary-500 hover:bg-primary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n    Primary Action\n  <\u002Fbutton>\n  \n  <!-- Secondary Button -->\n  <button class=\"bg-secondary-500 hover:bg-secondary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n    Secondary Action\n  <\u002Fbutton>\n  \n  <!-- Outline Button -->\n  <button class=\"border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-medium px-6 py-3 rounded-lg transition-all\">\n    Outline Button\n  <\u002Fbutton>\n  \n  <!-- Ghost Button -->\n  <button class=\"text-primary-500 hover:bg-primary-50 font-medium px-6 py-3 rounded-lg transition-colors\">\n    Ghost Button\n  <\u002Fbutton>\n  \n  <!-- Disabled Button -->\n  <button class=\"bg-neutral-300 text-neutral-500 font-medium px-6 py-3 rounded-lg cursor-not-allowed\" disabled>\n    Disabled Button\n  <\u002Fbutton>\n<\u002Fdiv>\n\n<!-- Button Sizes -->\n<div class=\"space-x-4\">\n  <button class=\"bg-primary-500 text-white font-medium px-3 py-1.5 text-sm rounded\">Small<\u002Fbutton>\n  <button class=\"bg-primary-500 text-white font-medium px-4 py-2 rounded-md\">Medium<\u002Fbutton>\n  <button class=\"bg-primary-500 text-white font-medium px-6 py-3 rounded-lg\">Large<\u002Fbutton>\n  <button class=\"bg-primary-500 text-white font-medium px-8 py-4 text-lg rounded-xl\">Extra Large<\u002Fbutton>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Card System:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Card Variants -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n  <!-- Basic Card -->\n  <div class=\"bg-white rounded-xl shadow-sm border border-neutral-200 p-6\">\n    <h3 class=\"text-lg font-semibold text-neutral-900 mb-2\">Basic Card<\u002Fh3>\n    <p class=\"text-neutral-600\">Simple card with basic styling<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Featured Card -->\n  <div class=\"bg-gradient-to-br from-primary-500 to-secondary-500 rounded-xl shadow-lg p-6 text-white\">\n    <h3 class=\"text-lg font-semibold mb-2\">Featured Card<\u002Fh3>\n    <p class=\"opacity-90\">Special card with gradient background<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Interactive Card -->\n  <div class=\"bg-white rounded-xl shadow-sm border border-neutral-200 p-6 hover:shadow-lg hover:border-primary-300 transition-all cursor-pointer\">\n    <h3 class=\"text-lg font-semibold text-neutral-900 mb-2\">Interactive Card<\u002Fh3>\n    <p class=\"text-neutral-600\">Card with hover effects<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Form Elements:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Form System -->\n<form class=\"space-y-6 max-w-md\">\n  <!-- Input Field -->\n  <div>\n    <label class=\"block text-sm font-medium text-neutral-700 mb-2\">\n      Email Address\n    <\u002Flabel>\n    <input \n      type=\"email\" \n      class=\"w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors\"\n      placeholder=\"your@email.com\"\n    >\n  <\u002Fdiv>\n  \n  <!-- Textarea -->\n  <div>\n    <label class=\"block text-sm font-medium text-neutral-700 mb-2\">\n      Message\n    <\u002Flabel>\n    <textarea \n      rows=\"4\"\n      class=\"w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none\"\n      placeholder=\"Your message here...\"\n    ><\u002Ftextarea>\n  <\u002Fdiv>\n  \n  <!-- Select -->\n  <div>\n    <label class=\"block text-sm font-medium text-neutral-700 mb-2\">\n      Category\n    <\u002Flabel>\n    <select class=\"w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors\">\n      <option>Choose a category<\u002Foption>\n      <option>General<\u002Foption>\n      <option>Technical<\u002Foption>\n      <option>Billing<\u002Foption>\n    <\u002Fselect>\n  <\u002Fdiv>\n  \n  <!-- Checkbox -->\n  <div class=\"flex items-center\">\n    <input \n      type=\"checkbox\" \n      id=\"newsletter\"\n      class=\"w-4 h-4 text-primary-500 border-neutral-300 rounded focus:ring-primary-500\"\n    >\n    <label for=\"newsletter\" class=\"ml-2 text-sm text-neutral-700\">\n      Subscribe to newsletter\n    <\u002Flabel>\n  <\u002Fdiv>\n<\u002Fform>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Functional Dark Mode Implementation\u003C\u002Fh2>\u003Ch3>Setting Up Dark Mode in Tailwind\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  darkMode: 'class', \u002F\u002F Enable dark mode\n  theme: {\n    extend: {\n      \u002F\u002F colors configuration\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Color Strategy for Dark Mode\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Components that support Dark Mode -->\n<div class=\"bg-white dark:bg-gray-900 min-h-screen transition-colors\">\n  <!-- Header -->\n  <header class=\"bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-7xl mx-auto px-4 py-4\">\n      <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">\n        My Website\n      <\u002Fh1>\n    <\u002Fdiv>\n  <\u002Fheader>\n  \n  <!-- Main Content -->\n  <main class=\"max-w-4xl mx-auto p-8\">\n    <article class=\"bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-gray-900\u002F20 p-8\">\n      <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-4\">\n        Dark Mode Article\n      <\u002Fh2>\n      \n      <p class=\"text-gray-700 dark:text-gray-300 mb-6 leading-relaxed\">\n        This article demonstrates how to create a proper dark mode implementation \n        with good contrast ratios and comfortable reading experience.\n      <\u002Fp>\n      \n      <!-- Code Block -->\n      <div class=\"bg-gray-100 dark:bg-gray-900 rounded-lg p-4 mb-6\">\n        <code class=\"text-sm text-gray-800 dark:text-gray-200 font-mono\">\n          const darkMode = document.querySelector('.dark');\n        <\u002Fcode>\n      <\u002Fdiv>\n      \n      <!-- Buttons -->\n      <div class=\"flex space-x-4\">\n        <button class=\"bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-6 py-3 rounded-lg transition-colors\">\n          Primary Action\n        <\u002Fbutton>\n        \n        <button class=\"bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-6 py-3 rounded-lg transition-colors\">\n          Secondary Action\n        <\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Farticle>\n  <\u002Fmain>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Dark Mode Toggle Implementation\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Dark Mode Toggle Button -->\n<button \n  id=\"theme-toggle\" \n  class=\"relative p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors\"\n>\n  <!-- Sun Icon (Light Mode) -->\n  <svg id=\"sun-icon\" class=\"w-5 h-5 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n    <path fill-rule=\"evenodd\" d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" clip-rule=\"evenodd\"><\u002Fpath>\n  <\u002Fsvg>\n  \n  <!-- Moon Icon (Dark Mode) -->\n  <svg id=\"moon-icon\" class=\"w-5 h-5 block dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n    <path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"><\u002Fpath>\n  <\u002Fsvg>\n<\u002Fbutton>\n\n<script>\n\u002F\u002F Dark Mode Toggle JavaScript\nfunction initTheme() {\n  \u002F\u002F Check saved preference\n  const savedTheme = localStorage.getItem('theme');\n  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  \n  if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n    document.documentElement.classList.add('dark');\n  } else {\n    document.documentElement.classList.remove('dark');\n  }\n}\n\n\u002F\u002F Initialize on page load\ninitTheme();\n\n\u002F\u002F Toggle function\ndocument.getElementById('theme-toggle').addEventListener('click', function() {\n  const isDark = document.documentElement.classList.contains('dark');\n  \n  if (isDark) {\n    document.documentElement.classList.remove('dark');\n    localStorage.setItem('theme', 'light');\n  } else {\n    document.documentElement.classList.add('dark');\n    localStorage.setItem('theme', 'dark');\n  }\n});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Typography in Dark Mode\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Typography suitable for Dark Mode -->\n<div class=\"bg-white dark:bg-gray-900 p-8 rounded-xl\">\n  <!-- Main Heading -->\n  <h1 class=\"text-4xl font-bold text-gray-900 dark:text-white mb-4\">\n    Typography in Dark Mode\n  <\u002Fh1>\n  \n  <!-- Sub Heading -->\n  <h2 class=\"text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6\">\n    Proper Contrast and Readability\n  <\u002Fh2>\n  \n  <!-- Main Content -->\n  <p class=\"text-base text-gray-700 dark:text-gray-300 mb-4 leading-relaxed\">\n    When designing Typography for Dark Mode, it's essential to consider appropriate \n    contrast ratios to ensure readability and prevent eye strain.\n  <\u002Fp>\n  \n  <!-- Emphasized Text -->\n  <p class=\"text-lg font-medium text-gray-800 dark:text-gray-200 mb-4\">\n    Important text should have higher contrast\n  <\u002Fp>\n  \n  <!-- Secondary Text -->\n  <p class=\"text-sm text-gray-600 dark:text-gray-400\">\n    Secondary text can have lower contrast but should still be clearly readable\n  <\u002Fp>\n  \n  <!-- Links -->\n  <p class=\"mt-4\">\n    <a href=\"#\" class=\"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline\">\n      Links with appropriate contrast in both modes\n    <\u002Fa>\n  <\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Advanced Techniques: Animation and Visual Effects\u003C\u002Fh2>\u003Ch3>Color Transitions\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Smooth Color Transitions -->\n<div class=\"space-y-6\">\n  <!-- Color Shift on Hover -->\n  <div class=\"group bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-blue-900\u002F20 p-6 rounded-xl border border-gray-200 dark:border-gray-700 transition-all duration-300\">\n    <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\n      Interactive Card\n    <\u002Fh3>\n    <p class=\"text-gray-600 dark:text-gray-300 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors\">\n      Colors change smoothly on hover\n    <\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Background Animation -->\n  <div class=\"relative overflow-hidden bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-8 rounded-xl text-white\">\n    <div class=\"absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 opacity-0 hover:opacity-100 transition-opacity duration-700\"><\u002Fdiv>\n    <div class=\"relative z-10\">\n      <h3 class=\"text-2xl font-bold\">Gradient Overlay<\u002Fh3>\n      <p>Hover to see the gradient shift<\u002Fp>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Typography Animations\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Text Effects using CSS Animation -->\n<div class=\"space-y-8\">\n  <!-- Fade In Text -->\n  <div class=\"opacity-0 animate-pulse\">\n    <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white\">\n      Animated Text\n    <\u002Fh2>\n  <\u002Fdiv>\n  \n  <!-- Hover Text Effect -->\n  <div class=\"group cursor-pointer\">\n    <p class=\"text-lg text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300\">\n      Text with smooth color transition on hover\n    <\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Custom CSS for more advanced animations -->\n<style>\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fadeInUp 0.8s ease-out;\n}\n<\u002Fstyle>\n\n<!-- Using custom animation -->\n<div class=\"animate-fade-in-up\">\n  <h3 class=\"text-2xl font-semibold\">Text slides up and fades in<\u002Fh3>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Hands-On Project: Building a Complete Design System\u003C\u002Fh2>\u003Cp>Let's create a comprehensive Style Guide and Component Library:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Design System - Style Guide<\u002Ftitle>\n    <script src=\"https:\u002F\u002Fcdn.tailwindcss.com\"><\u002Fscript>\n    <script>\n        tailwind.config = {\n            darkMode: 'class',\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            50: '#eff6ff',\n                            100: '#dbeafe', \n                            500: '#3b82f6',\n                            600: '#2563eb',\n                            700: '#1d4ed8',\n                        }\n                    }\n                }\n            }\n        }\n    <\u002Fscript>\n<\u002Fhead>\n<body class=\"bg-gray-50 dark:bg-gray-900 transition-colors\">\n\n<!-- Header with Theme Toggle -->\n<header class=\"bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-7xl mx-auto px-4 py-4 flex justify-between items-center\">\n        <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Design System<\u002Fh1>\n        \n        <button id=\"theme-toggle\" class=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors\">\n            <svg class=\"w-5 h-5 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path fill-rule=\"evenodd\" d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" clip-rule=\"evenodd\"><\u002Fpath>\n            <\u002Fsvg>\n            <svg class=\"w-5 h-5 block dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"><\u002Fpath>\n            <\u002Fsvg>\n        <\u002Fbutton>\n    <\u002Fdiv>\n<\u002Fheader>\n\n<main class=\"max-w-7xl mx-auto p-8\">\n    <!-- Color Palette Section -->\n    <section class=\"mb-16\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-8\">Color Palette<\u002Fh2>\n        \n        <!-- Primary Colors -->\n        <div class=\"mb-8\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4\">Primary Colors<\u002Fh3>\n            <div class=\"grid grid-cols-2 md:grid-cols-5 gap-4\">\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-50 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-50<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-100 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-100<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-500<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-600 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-600<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700\">\n                    <div class=\"w-full h-16 bg-brand-700 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">brand-700<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n        \n        <!-- Semantic Colors -->\n        <div class=\"mb-8\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4\">Semantic Colors<\u002Fh3>\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n                <div class=\"bg-green-100 dark:bg-green-900\u002F30 p-4 rounded-lg text-center border border-green-200 dark:border-green-700\">\n                    <div class=\"w-full h-16 bg-green-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-green-800 dark:text-green-200\">Success<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-yellow-100 dark:bg-yellow-900\u002F30 p-4 rounded-lg text-center border border-yellow-200 dark:border-yellow-700\">\n                    <div class=\"w-full h-16 bg-yellow-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-yellow-800 dark:text-yellow-200\">Warning<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-red-100 dark:bg-red-900\u002F30 p-4 rounded-lg text-center border border-red-200 dark:border-red-700\">\n                    <div class=\"w-full h-16 bg-red-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-red-800 dark:text-red-200\">Error<\u002Fp>\n                <\u002Fdiv>\n                <div class=\"bg-blue-100 dark:bg-blue-900\u002F30 p-4 rounded-lg text-center border border-blue-200 dark:border-blue-700\">\n                    <div class=\"w-full h-16 bg-blue-500 rounded mb-2\"><\u002Fdiv>\n                    <p class=\"text-sm font-medium text-blue-800 dark:text-blue-200\">Info<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fsection>\n    \n    <!-- Typography Section -->\n    <section class=\"mb-16\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-8\">Typography<\u002Fh2>\n        \n        <div class=\"bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700\">\n            <div class=\"space-y-6\">\n                <div>\n                    <h1 class=\"text-6xl font-bold text-gray-900 dark:text-white\">Display Text<\u002Fh1>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-6xl font-bold<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <h1 class=\"text-4xl font-bold text-gray-900 dark:text-white\">Heading 1<\u002Fh1>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-4xl font-bold<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <h2 class=\"text-2xl font-semibold text-gray-800 dark:text-gray-100\">Heading 2<\u002Fh2>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-2xl font-semibold<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <h3 class=\"text-lg font-medium text-gray-700 dark:text-gray-200\">Heading 3<\u002Fh3>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-lg font-medium<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <p class=\"text-base text-gray-700 dark:text-gray-300\">Body text for general content, comfortable size for reading<\u002Fp>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-base<\u002Fp>\n                <\u002Fdiv>\n                \n                <div>\n                    <p class=\"text-sm text-gray-600 dark:text-gray-400\">Small text for captions or additional information<\u002Fp>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">text-sm<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fsection>\n    \n    <!-- Components Section -->\n    <section class=\"mb-16\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white mb-8\">Components<\u002Fh2>\n        \n        <!-- Buttons -->\n        <div class=\"mb-12\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6\">Buttons<\u002Fh3>\n            <div class=\"flex flex-wrap gap-4\">\n                <button class=\"bg-brand-500 hover:bg-brand-600 text-white font-medium px-6 py-3 rounded-lg transition-colors\">\n                    Primary\n                <\u002Fbutton>\n                <button class=\"border-2 border-brand-500 text-brand-500 hover:bg-brand-500 hover:text-white font-medium px-6 py-3 rounded-lg transition-all\">\n                    Secondary\n                <\u002Fbutton>\n                <button class=\"text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-900\u002F20 font-medium px-6 py-3 rounded-lg transition-colors\">\n                    Ghost\n                <\u002Fbutton>\n                <button class=\"bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 font-medium px-6 py-3 rounded-lg cursor-not-allowed\">\n                    Disabled\n                <\u002Fbutton>\n            <\u002Fdiv>\n        <\u002Fdiv>\n        \n        <!-- Cards -->\n        <div class=\"mb-12\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6\">Cards<\u002Fh3>\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                <div class=\"bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6\">\n                    <h4 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-2\">Basic Card<\u002Fh4>\n                    <p class=\"text-gray-600 dark:text-gray-300\">Simple card with border and shadow<\u002Fp>\n                <\u002Fdiv>\n                \n                <div class=\"bg-gradient-to-br from-brand-500 to-purple-600 rounded-xl shadow-lg p-6 text-white\">\n                    <h4 class=\"text-lg font-semibold mb-2\">Featured Card<\u002Fh4>\n                    <p class=\"opacity-90\">Card with gradient background<\u002Fp>\n                <\u002Fdiv>\n                \n                <div class=\"bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg hover:border-brand-300 dark:hover:border-brand-600 transition-all cursor-pointer\">\n                    <h4 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-2\">Interactive Card<\u002Fh4>\n                    <p class=\"text-gray-600 dark:text-gray-300\">Hover to see the effect<\u002Fp>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002Fdiv>\n        \n        <!-- Forms -->\n        <div class=\"mb-12\">\n            <h3 class=\"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6\">Form Elements<\u002Fh3>\n            <div class=\"bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700 max-w-md\">\n                <form class=\"space-y-6\">\n                    <div>\n                        <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n                            Email\n                        <\u002Flabel>\n                        <input \n                            type=\"email\" \n                            class=\"w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors\"\n                            placeholder=\"your@email.com\"\n                        >\n                    <\u002Fdiv>\n                    \n                    <div>\n                        <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n                            Message\n                        <\u002Flabel>\n                        <textarea \n                            rows=\"4\"\n                            class=\"w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors resize-none\"\n                            placeholder=\"Your message...\"\n                        ><\u002Ftextarea>\n                    <\u002Fdiv>\n                    \n                    <button type=\"submit\" class=\"w-full bg-brand-500 hover:bg-brand-600 text-white font-medium py-3 rounded-lg transition-colors\">\n                        Send Message\n                    <\u002Fbutton>\n                <\u002Fform>\n            <\u002Fdiv>\n        <\u002Fdiv>\n    <\u002Fsection>\n<\u002Fmain>\n\n<script>\n\u002F\u002F Dark Mode Toggle\nfunction initTheme() {\n    const savedTheme = localStorage.getItem('theme');\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    \n    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n        document.documentElement.classList.add('dark');\n    }\n}\n\ninitTheme();\n\ndocument.getElementById('theme-toggle').addEventListener('click', function() {\n    const isDark = document.documentElement.classList.contains('dark');\n    \n    if (isDark) {\n        document.documentElement.classList.remove('dark');\n        localStorage.setItem('theme', 'light');\n    } else {\n        document.documentElement.classList.add('dark');\n        localStorage.setItem('theme', 'dark');\n    }\n});\n<\u002Fscript>\n\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Performance and Best Practices\u003C\u002Fh2>\u003Ch3>1. Optimizing Colors and Typography\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js - Optimizing colors and fonts\nmodule.exports = {\n  content: [\n    \".\u002Fsrc\u002F**\u002F*.{html,js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      \u002F\u002F Use only colors that are actually needed\n      colors: {\n        primary: '#3b82f6',\n        secondary: '#6b7280',\n        success: '#10b981',\n        warning: '#f59e0b',\n        error: '#ef4444',\n      },\n      \u002F\u002F Use system fonts for better performance\n      fontFamily: {\n        sans: ['system-ui', '-apple-system', 'sans-serif'],\n        serif: ['Georgia', 'serif'],\n        mono: ['Menlo', 'Monaco', 'monospace'],\n      }\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Accessibility Guidelines\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Examples of accessibility-friendly color usage -->\n<div class=\"space-y-4\">\n  <!-- Appropriate contrast ratio (4.5:1 for normal text) -->\n  <div class=\"bg-white text-gray-900 p-4 rounded\">\n    <p>This text has an appropriate contrast ratio<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Important text (3:1 for large text) -->\n  <div class=\"bg-red-50 border border-red-200 text-red-800 p-4 rounded\">\n    <p class=\"font-medium\">Error: Please check your data<\u002Fp>\n  <\u002Fdiv>\n  \n  <!-- Accessible links -->\n  <p>\n    Read more in the \n    <a href=\"#\" class=\"text-blue-600 underline hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded\">\n      documentation\n    <\u002Fa>\n  <\u002Fp>\n  \n  <!-- Don't rely on color alone for communication -->\n  <div class=\"flex items-center space-x-2\">\n    <span class=\"w-3 h-3 bg-green-500 rounded-full\"><\u002Fspan>\n    <span class=\"text-green-700\">✓ Success<\u002Fspan>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Techniques for Reducing CSS Bundle Size\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F tailwind.config.js\nmodule.exports = {\n  content: [\n    \".\u002Fsrc\u002F**\u002F*.{html,js}\",\n  ],\n  theme: {\n    \u002F\u002F Use only necessary colors\n    colors: {\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#ffffff',\n      black: '#000000',\n      gray: {\n        100: '#f3f4f6',\n        500: '#6b7280',\n        900: '#111827',\n      },\n      blue: {\n        500: '#3b82f6',\n        600: '#2563eb',\n      }\n    },\n    \u002F\u002F Remove unused utility classes\n    extend: {}\n  },\n  \u002F\u002F Disable unnecessary plugins\n  corePlugins: {\n    float: false,\n    clear: false,\n    skew: false,\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Chr>\u003Ch3>Summary\u003C\u002Fh3>\u003Cp>In EP 3, we've learned comprehensive color and font usage in Tailwind CSS:\u003C\u002Fp>\u003Ch4>Key Learnings:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Tailwind CSS Color System\u003C\u002Fstrong> with 22 color groups, each having 11 intensity levels\u003C\u002Fli>\u003Cli>\u003Cstrong>Professional Color Selection Techniques\u003C\u002Fstrong> using Color Harmony and Semantic Colors\u003C\u002Fli>\u003Cli>\u003Cstrong>Typography System\u003C\u002Fstrong> that creates good Visual Hierarchy\u003C\u002Fli>\u003Cli>\u003Cstrong>Building Design Systems\u003C\u002Fstrong> that are consistent and easy to use\u003C\u002Fli>\u003Cli>\u003Cstrong>Dark Mode Implementation\u003C\u002Fstrong> that works seamlessly without flicker\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance and Accessibility\u003C\u002Fstrong> considerations\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>Important Techniques to Remember:\u003C\u002Fh4>\u003Col>\u003Cli>\u003Cstrong>Use appropriate contrast ratios\u003C\u002Fstrong> - at least 4.5:1 for normal text\u003C\u002Fli>\u003Cli>\u003Cstrong>Create semantic color systems\u003C\u002Fstrong> - success, warning, error, info\u003C\u002Fli>\u003Cli>\u003Cstrong>Use Typography scale consistently\u003C\u002Fstrong> - from text-xs to text-6xl\u003C\u002Fli>\u003Cli>\u003Cstrong>Design Dark Mode from the start\u003C\u002Fstrong> - not as an afterthought\u003C\u002Fli>\u003Cli>\u003Cstrong>Always test accessibility\u003C\u002Fstrong> - use contrast checking tools\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Understanding and using colors and fonts correctly will make your website look professional, create a great user experience, and stand out from competitors.\u003C\u002Fp>\u003Cp>\u003Cstrong>EP 4\u003C\u002Fstrong> \"Flexbox and Grid in Tailwind: Create Professional Layouts in 10 Minutes\" will teach us how to use Flexbox and CSS Grid like a pro, create complex layouts, advanced Responsive Design, and layout techniques that make websites beautiful and user-friendly.\u003C\u002Fp>\u003Cp>Ready to become a Layout master with Tailwind CSS? Follow Superdev School to not miss the pro techniques that will help you create layouts professionally!\u003C\u002Fp>\u003Cp>Good design starts with appropriate colors and fonts. Let's create beautiful and user-friendly websites with Tailwind CSS! 🎨\u003C\u002Fp>\u003Ch3>Read more\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fen\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Eps That Will Make You a Pro Tailwind CSS Overnight\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\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>\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>","6_11zon_1_1ed2fpz56p.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fazt5ol4h5j5skjz\u002F6_11zon_1_1ed2fpz56p.webp","2026-03-04 08:26:54.340Z","",{"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:50.705Z","nass8y409xzq9eh","Color Palette","2026-04-10 16:07:35.297Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:35.769Z","hp7u7nbteeiubmv","Dark Mode CSS","2026-04-10 16:07:31.407Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:38.830Z","vioxzx8mghwftdq","design system","2026-04-10 16:07:32.373Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:51.428Z","t6nh48y6jtthbbm","Typography System","2026-04-10 16:07:35.589Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:26:35.002Z","eq1u1plwlvvr2rh","Tailwind CSS","2026-04-10 16:07:31.210Z",{"code":44,"collectionId":45,"collectionName":46,"created":47,"flag":48,"id":49,"is_default":50,"label":51,"updated":52},"en","pbc_1989393366","locales","2026-01-22 11:00:02.726Z","twemoji:flag-united-states","qv9c1llfov2d88z",false,"English","2026-04-10 15:42:46.825Z",{"category":54,"collectionId":55,"collectionName":56,"created":13,"expand":57,"id":70,"slug":71,"updated":72,"views":73},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":58},{"blogIds":59,"collectionId":60,"collectionName":61,"created":62,"created_by":13,"id":54,"image":63,"image_alt":13,"image_path":64,"label":65,"name":41,"priority":66,"publish_at":67,"scheduled_at":13,"status":68,"updated":69,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:26:33.946Z","vzv2yduhfk_hs035tvsww.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fi22e96fj41lsws7\u002Fvzv2yduhfk_hs035tvsww.webp",{"en":41,"th":41},10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","2ky3tl9l0tf0wcw","ep3-tailwind-css-color-typography-design-system","2026-05-09 13:26:44.924Z",216,"azt5ol4h5j5skjz",[20,25,30,35,40],"2025-07-22 02:34:06.442Z","Master professional color and typography usage in Tailwind CSS. Learn Color Harmony, Typography Systems, Dark Mode Implementation, and build complete Design System with functional Component Library.","2026-05-12 01:14:31.129Z",1,{"th":71,"en":71}]