១. Tailwind CSS ជាអ្វី? (សេចក្តីផ្តើម)

1.1 Tailwind CSS ជាអ្វី? (What is Tailwind CSS?)

Tailwind CSS គឺជា utility-first CSS framework ដែលអនុញ្ញាតឱ្យអ្នករចនា UI ដោយផ្ទាល់ក្នុង HTML ដោយប្រើ class តូចៗ (utility classes) ជំនួសឱ្យការសរសេរ CSS ដោយខ្លួនឯង។ វាខុសពី Bootstrap ត្រង់ Tailwind មិនមាន component ស្រាប់ ប៉ុន្តែផ្តល់ class មូលដ្ឋានដើម្បីបង្កើត design ផ្ទាល់ខ្លួន។

<!-- បញ្ចូល Tailwind CSS តាម CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- ឧទាហរណ៍ Tailwind utility classes -->
<div class="bg-blue-500 text-white p-4 rounded-lg shadow">
  សួស្តី Tailwind CSS!
</div>

▶ Output:

សួស្តី Tailwind CSS!

1.2 ការដំឡើង CDN (CDN Setup)

វិធីសាមញ្ញបំផុតក្នុងការប្រើ Tailwind គឺដាក់ CDN script tag ក្នុង <head>។ សម្រាប់ production ពិតប្រាកដ គួរប្រើ Tailwind CLI ឬ PostCSS ដើម្បី optimize file size។

<!DOCTYPE html>
<html lang="km">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tailwind Page</title>
  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
  <h1 class="text-3xl font-bold text-center mt-8">
    ស្វាគមន៍មកកាន់ Tailwind!
  </h1>
</body>
</html>

▶ Output:

ស្វាគមន៍មកកាន់ Tailwind!

1.3 គោលគំនិត Utility-First (Utility-First Concept)

ជំនួសឱ្យការសរសេរ CSS ដោយដាច់ដោយឡែក អ្នកដាក់ style ផ្ទាល់ក្នុង class attribute។ នេះធ្វើឱ្យ ឆាប់រហ័ស និង មិនចាំបាច់ប្តូរឯកសារ។

<!-- ❌ CSS ធម្មតា -->
<style>
  .my-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
  }
</style>
<div class="my-card">Card</div>

<!-- ✅ Tailwind CSS -->
<div class="bg-white p-6 rounded-xl shadow">Card</div>

▶ Output (Tailwind):

Card — រចនាដោយ Tailwind utility classes

២. Typography (ការកំណត់អក្សរ)

2.1 ទំហំអក្សរ (Text Size)

Tailwind មាន class សម្រាប់កំណត់ទំហំអក្សរចាប់ពី text-xs រហូតដល់ text-9xl។

<p class="text-xs">text-xs (0.75rem)</p>
<p class="text-sm">text-sm (0.875rem)</p>
<p class="text-base">text-base (1rem) — default</p>
<p class="text-lg">text-lg (1.125rem)</p>
<p class="text-xl">text-xl (1.25rem)</p>
<p class="text-2xl">text-2xl (1.5rem)</p>
<p class="text-4xl">text-4xl (2.25rem)</p>

▶ Output:

text-xs (0.75rem)

text-sm (0.875rem)

text-base (1rem — default)

text-lg (1.125rem)

text-xl (1.25rem)

text-2xl (1.5rem)

text-4xl (2.25rem)

2.2 ទម្ងន់អក្សរ (Font Weight)

កំណត់ boldness ដោយប្រើ font-thin ដល់ font-black។

<p class="font-light">font-light (300)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-medium">font-medium (500)</p>
<p class="font-semibold">font-semibold (600)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-extrabold">font-extrabold (800)</p>

▶ Output:

font-light (300)

font-normal (400)

font-medium (500)

font-semibold (600)

font-bold (700)

font-extrabold (800)

2.3 ការតម្រឹម និង ការតុបតែងអក្សរ (Alignment & Decoration)

text-left, text-center, text-right សម្រាប់តម្រឹម។ underline, line-through, uppercase សម្រាប់តុបតែង។

<p class="text-left">តម្រឹមឆ្វេង (Left)</p>
<p class="text-center">តម្រឹមកណ្តាល (Center)</p>
<p class="text-right">តម្រឹមស្តាំ (Right)</p>
<p class="underline">គូសបន្ទាត់ក្រោម (Underline)</p>
<p class="line-through">គូសបន្ទាត់កាត់ (Strikethrough)</p>
<p class="uppercase">uppercase text</p>
<p class="italic">italic text (អក្សរទ្រេត)</p>

▶ Output:

តម្រឹមឆ្វេង (Left)

តម្រឹមកណ្តាល (Center)

តម្រឹមស្តាំ (Right)

គូសបន្ទាត់ក្រោម (Underline)

គូសបន្ទាត់កាត់ (Strikethrough)

uppercase text

italic text (អក្សរទ្រេត)

៣. Spacing & Sizing (ចន្លោះ និង ទំហំ)

3.1 Padding (គម្លាតខាងក្នុង)

Padding គឺជាគម្លាតរវាង content និង border។ p- (all sides), px- (horizontal), py- (vertical), pt-, pr-, pb-, pl- (top/right/bottom/left)។ ១ unit = 0.25rem (4px)។

<div class="p-2 bg-blue-200">p-2 (8px)</div>
<div class="p-4 bg-blue-300">p-4 (16px)</div>
<div class="p-6 bg-blue-400">p-6 (24px)</div>
<div class="px-8 py-2 bg-blue-500 text-white">px-8 py-2</div>

▶ Output:

p-2 (8px)

p-4 (16px)

p-6 (24px)

px-8 py-2

3.2 Margin (គម្លាតខាងក្រៅ)

Margin គឺជាគម្លាតខាងក្រៅ element។ m-, mx-, my-, mt-, mb- ដូច padding។ mx-auto ប្រើសម្រាប់ center block element។

<!-- margin ជុំវិញ -->
<div class="m-4 p-4 bg-green-200">m-4 (16px margin)</div>

<!-- margin top + bottom -->
<div class="my-6 p-4 bg-green-300">my-6 (24px top & bottom)</div>

<!-- center ដោយ mx-auto -->
<div class="mx-auto w-64 p-4 bg-green-400 text-center text-white">
  mx-auto (centered)
</div>

▶ Output:

m-4 (16px margin)

my-6 (24px top & bottom)

mx-auto (centered)

3.3 Width & Height (ទទឹង និង កម្ពស់)

w- (width), h- (height)។ ប្រើលេខ (w-32 = 8rem), ភាគរយ (w-1/2 = 50%), ឬ w-full (100%)។ max-w-, min-h- សម្រាប់ min/max។

<div class="w-32 h-12 bg-purple-400 text-white p-2">w-32 h-12</div>
<div class="w-1/2 h-12 bg-purple-500 text-white p-2">w-1/2 (50%)</div>
<div class="w-full h-12 bg-purple-600 text-white p-2">w-full (100%)</div>
<div class="max-w-xs mx-auto h-12 bg-purple-700 text-white p-2 text-center">
  max-w-xs + mx-auto
</div>

▶ Output:

w-32 h-12

w-1/2 (50%)

w-full (100%)

max-w-xs + mx-auto

៤. Colors & Backgrounds (ពណ៌ និង ផ្ទៃខាងក្រោយ)

4.1 ពណ៌អក្សរ (Text Colors)

ប្រើ text-{color}-{shade}។ ពណ៌មាន: gray, red, orange, yellow, green, blue, indigo, purple, pink។ Shade ពី 50 (ស្រាល) ដល់ 950 (ងងឹត)។

<p class="text-red-500">ពណ៌ក្រហម (Red)</p>
<p class="text-blue-600">ពណ៌ខៀវ (Blue)</p>
<p class="text-green-500">ពណ៌បៃតង (Green)</p>
<p class="text-purple-600">ពណ៌ស្វាយ (Purple)</p>
<p class="text-orange-500">ពណ៌ទឹកក្រូច (Orange)</p>
<p class="text-gray-400">ពណ៌ប្រផេះ (Gray)</p>

▶ Output:

ពណ៌ក្រហម (Red)

ពណ៌ខៀវ (Blue)

ពណ៌បៃតង (Green)

ពណ៌ស្វាយ (Purple)

ពណ៌ទឹកក្រូច (Orange)

ពណ៌ប្រផេះ (Gray)

4.2 ផ្ទៃខាងក្រោយ (Background Colors)

ប្រើ bg-{color}-{shade}។ Shade ខ្ពស់ → ពណ៌ងងឹត។

<div class="bg-blue-100 p-3 rounded">bg-blue-100 (ស្រាល)</div>
<div class="bg-blue-300 p-3 rounded">bg-blue-300</div>
<div class="bg-blue-500 text-white p-3 rounded">bg-blue-500</div>
<div class="bg-blue-700 text-white p-3 rounded">bg-blue-700</div>
<div class="bg-blue-900 text-white p-3 rounded">bg-blue-900 (ងងឹត)</div>

▶ Output:

bg-blue-100 (ស្រាល)

bg-blue-300

bg-blue-500

bg-blue-700

bg-blue-900 (ងងឹត)

4.3 Border & Rounded Corners (ស៊ុម និង ជ្រុងកោង)

border បន្ថែមស៊ុម, border-2 ធ្វើឱ្យក្រាស់។ rounded, rounded-lg, rounded-xl, rounded-full សម្រាប់ជ្រុងកោង។

<div class="border border-gray-300 p-4 rounded">rounded (4px)</div>
<div class="border-2 border-blue-500 p-4 rounded-lg">rounded-lg (8px)</div>
<div class="border-2 border-green-500 p-4 rounded-xl">rounded-xl (12px)</div>
<div class="border-2 border-purple-500 p-4 rounded-full">rounded-full</div>
<div class="border-4 border-red-500 p-4 rounded-lg shadow-lg">
  border-4 + shadow-lg
</div>

▶ Output:

rounded (4px)

rounded-lg (8px)

rounded-xl (12px)

rounded-full

border-4 + shadow-lg

៥. Flexbox Layout (ការរៀបចំ Flexbox)

5.1 Flex មូលដ្ឋាន (Flex Basics)

flex ធ្វើឱ្យ element ក្លាយជា flex container។ gap- កំណត់គម្លាតរវាង children។ Default direction គឺ row (ផ្តេក)។

<div class="flex gap-4">
  <div class="bg-blue-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-blue-600 text-white p-4 rounded">Item 2</div>
  <div class="bg-blue-700 text-white p-4 rounded">Item 3</div>
</div>

▶ Output:

Item 1

Item 2

Item 3

5.2 Justify & Align (ការតម្រឹម)

justify-center (main axis), items-center (cross axis)។ justify-between ចែកចន្លោះស្មើរវាង items។

<!-- Center both axes -->
<div class="flex justify-center items-center h-24 bg-gray-200 rounded">
  <span class="bg-green-500 text-white px-4 py-2 rounded">Centered!</span>
</div>

<!-- Space between -->
<div class="flex justify-between items-center bg-gray-200 p-4 rounded mt-4">
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</div>

▶ Output:

Centered!

Left Center Right

5.3 Flex Direction & Wrap (ទិសដៅ និង ការរំកិល)

flex-col ផ្លាស់ទៅបញ្ឈរ។ flex-wrap អនុញ្ញាតឱ្យ items រំកិលទៅបន្ទាត់ថ្មី។

<!-- Column direction -->
<div class="flex flex-col gap-2">
  <div class="bg-amber-400 p-3 rounded">Row 1</div>
  <div class="bg-amber-500 p-3 rounded">Row 2</div>
  <div class="bg-amber-600 text-white p-3 rounded">Row 3</div>
</div>

<!-- Flex wrap -->
<div class="flex flex-wrap gap-2 mt-4">
  <div class="bg-teal-500 text-white px-4 py-2 rounded">Tag 1</div>
  <div class="bg-teal-500 text-white px-4 py-2 rounded">Tag 2</div>
  <div class="bg-teal-500 text-white px-4 py-2 rounded">Tag 3</div>
  <div class="bg-teal-500 text-white px-4 py-2 rounded">Tag 4</div>
  <div class="bg-teal-500 text-white px-4 py-2 rounded">Tag 5</div>
</div>

▶ Output:

flex-col:

Row 1

Row 2

Row 3

flex-wrap:

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

៦. Grid Layout (ការរៀបចំ Grid)

6.1 Grid មូលដ្ឋាន (Basic Grid)

grid បង្កើត grid container។ grid-cols-3 បែងចែកជា 3 ជួរឈរ។ gap-4 កំណត់គម្លាត។

<div class="grid grid-cols-3 gap-4">
  <div class="bg-indigo-500 text-white p-4 rounded text-center">1</div>
  <div class="bg-indigo-500 text-white p-4 rounded text-center">2</div>
  <div class="bg-indigo-500 text-white p-4 rounded text-center">3</div>
  <div class="bg-indigo-400 text-white p-4 rounded text-center">4</div>
  <div class="bg-indigo-400 text-white p-4 rounded text-center">5</div>
  <div class="bg-indigo-400 text-white p-4 rounded text-center">6</div>
</div>

▶ Output:

1

2

3

4

5

6

6.2 Column Span (ពង្រីកជួរ)

col-span-2 ពង្រីក item ឱ្យយក 2 columns។ អាចបង្កើត layout ដូចជា sidebar + main content។

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 bg-cyan-500 text-white p-4 rounded">
    col-span-2 (Main Content)
  </div>
  <div class="bg-cyan-700 text-white p-4 rounded">
    Sidebar
  </div>
  <div class="col-span-3 bg-cyan-900 text-white p-4 rounded text-center">
    col-span-3 (Full Width Footer)
  </div>
</div>

▶ Output:

col-span-2 (Main Content)

Sidebar

col-span-3 (Full Width Footer)

៧. Responsive Design (ការរចនាសម្រាប់គ្រប់ឧបករណ៍)

7.1 Breakpoints (ចំណុចប្រែប្រួល)

Tailwind ប្រើ mobile-first ។ class ធម្មតាអនុវត្តលើ screen តូចជាងគេ។ ប្រើ prefix ដើម្បីកំណត់ style សម្រាប់ screen ធំ៖

<!-- Breakpoints ក្នុង Tailwind -->
<!-- sm:  640px   (ទូរស័ព្ទធំ)            -->
<!-- md:  768px   (Tablet)                -->
<!-- lg:  1024px  (Laptop)                -->
<!-- xl:  1280px  (Desktop)               -->
<!-- 2xl: 1536px  (Desktop ធំ)            -->

<!-- ឧទាហរណ៍: 1 col (mobile) → 2 col (md) → 3 col (lg) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-rose-500 text-white p-4 rounded">Card 1</div>
  <div class="bg-rose-500 text-white p-4 rounded">Card 2</div>
  <div class="bg-rose-500 text-white p-4 rounded">Card 3</div>
</div>

▶ Output (resize browser ដើម្បីមើលផ្លាស់ប្តូរ):

Prefix	Min Width	ឧបករណ៍
sm:	640px	ទូរស័ព្ទធំ
md:	768px	Tablet
lg:	1024px	Laptop
xl:	1280px	Desktop
2xl:	1536px	Desktop ធំ

Card 1

Card 2

Card 3

7.2 Responsive Text & Visibility (អក្សរ និង ការបង្ហាញ/លាក់)

ប្រើ breakpoint prefix ជាមួយ class ណាមួយក៏បាន។ hidden md:block = លាក់នៅ mobile, បង្ហាញនៅ md+។

<!-- ទំហំអក្សរផ្លាស់ប្ដូរតាម screen -->
<h1 class="text-xl md:text-3xl lg:text-5xl font-bold">
  Responsive Title
</h1>

<!-- បង្ហាញ/លាក់តាម screen -->
<p class="block md:hidden text-red-500">📱 Mobile Only</p>
<p class="hidden md:block text-green-500">🖥️ Tablet + Desktop</p>

▶ Output (resize browser):

Responsive Title

📱 Mobile Only (បង្ហាញតែនៅ mobile)

🖥️ Tablet + Desktop (បង្ហាញនៅ md ឡើងទៅ)

៨. Components (សមាសធាតុ UI)

8.1 Buttons (ប៊ូតុង)

បង្កើតប៊ូតុង stylish ដោយផ្សំ class: background + text + padding + rounded + hover effect។ hover: prefix សម្រាប់ hover state។ transition ធ្វើឱ្យ animation រលូន។

<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition">
  Primary
</button>
<button class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-full transition">
  Success
</button>
<button class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg transition">
  Danger
</button>
<button class="border-2 border-indigo-500 text-indigo-500 hover:bg-indigo-500 hover:text-white px-6 py-2 rounded-lg transition">
  Outline
</button>

▶ Output:

8.2 Card Component (កាត)

Card គឺជា pattern ដ៏ពេញនិយម ផ្សំពី bg-white + rounded + shadow + padding។ អាចបន្ថែម image, title, text, button។

<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-sm">
  <div class="bg-gradient-to-r from-indigo-500 to-purple-600 h-32"></div>
  <div class="p-6">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">
      នេះជា card component ដែលប្រើ Tailwind CSS។
    </p>
    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded transition">
      Read More →
    </button>
  </div>
</div>

▶ Output:

PHP Course

រៀន PHP ពីមូលដ្ឋានដល់កម្រិតខ្ពស់

Web Design

រចនាគេហទំព័រស្អាតដោយ Tailwind

JavaScript

បង្កើតគេហទំព័រ interactive

8.3 Badges & Alerts (ស្លាក និង ការជូនដំណឹង)

Badges និង Alerts គឺជា pattern សាមញ្ញដែលផ្សំពី background ស្រាល + text ពណ៌ + padding + rounded។

<!-- Badges -->
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Inactive</span>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span>

<!-- Alert -->
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
  <p class="text-yellow-800 font-medium">⚠️ Warning Alert</p>
  <p class="text-yellow-700 text-sm">នេះជា warning message។</p>
</div>

▶ Output:

ActiveInactiveNewPremiumPending

✅ Success Alert

ប្រតិបត្តិការបានជោគជ័យ!

⚠️ Warning Alert

សូមពិនិត្យមើលទិន្នន័យម្តងទៀត។

❌ Error Alert

មានបញ្ហាកើតឡើង សូមព្យាយាមម្តងទៀត។

8.4 Navigation Bar (របារ Navigation)

Navbar ធម្មតាប្រើ flex + justify-between + items-center។ sticky top-0 ធ្វើឱ្យ navbar ជាប់នៅលើ។

<nav class="bg-gray-900 text-white px-6 py-3 flex justify-between items-center">
  <span class="text-xl font-bold">🌐 MyWebsite</span>
  <div class="flex gap-4">
    <a href="#" class="hover:text-blue-400 transition">Home</a>
    <a href="#" class="hover:text-blue-400 transition">About</a>
    <a href="#" class="hover:text-blue-400 transition">Contact</a>
  </div>
</nav>

▶ Output:

🎮 Tailwind CSS Playground

ជ្រើសរើស Tailwind classes ផ្សេងៗ រួចមើលលទ្ធផលភ្លាមៗ៖

📝 Text Content

📏 Text Size

🎨 Text Color

🖌️ Background

📐 Padding

🔵 Rounded

🌓 Shadow

🔤 Font Weight

↔ Alignment

📝 Practice Questions (លំហាត់)

Basics (មូលដ្ឋាន) — ២ សំណួរ

Q1

តើធ្វើដូចម្ដេចដើម្បីបន្ថែម Tailwind CSS ទៅក្នុងគេហទំព័ររបស់អ្នកដោយប្រើ CDN? សរសេរ tag ដែលត្រូវដាក់ក្នុង <head>។

💡 Hint: Tailwind CDN ប្រើ script tag មិនមែន link tag ទេ។

Q2

តើអ្វីខុសគ្នារវាង Tailwind CSS និង Bootstrap? ជ្រើសចម្លើយត្រឹមត្រូវ៖
A) Tailwind មាន ready-made components ដូច Bootstrap
B) Tailwind ប្រើ utility classes ហើយ Bootstrap ប្រើ component classes
C) Bootstrap ផ្ដល់ freedom ក្នុងការ design ច្រើនជាង Tailwind
D) Tailwind មិនគាំទ្រ responsive design

💡 Hint: Tailwind គឺជា utility-first framework ខណៈ Bootstrap មាន pre-built components។

Typography (អក្សរ) — ១ សំណួរ

Q3

សរសេរ HTML element ដែលមាន៖
- ទំហំអក្សរ 2xl
- ពណ៌ indigo-600
- font bold
- italic

💡 Hint: ផ្សំ classes: text-2xl + text-indigo-600 + font-bold + italic។

Spacing (ចន្លោះ) — ២ សំណួរ

Q4

ពន្យល់ភាពខុសគ្នារវាង p-4, px-4, py-4, pt-4។ តើ p-4 ស្មើប៉ុន្មាន px?

💡 Hint: p = all sides, px = horizontal, py = vertical, pt = top។ 1 unit = 0.25rem = 4px។

Q5

តើធ្វើយ៉ាងម៉េចដើម្បី center div មួយផ្ដេកតាម Tailwind? សរសេរ class ដែលត្រូវប្រើ។

💡 Hint: ប្រើ mx-auto ជាមួយ width ជាក់លាក់ ឬ ប្រើ flex + justify-center។

Colors (ពណ៌) — ១ សំណួរ

Q6

បង្កើត alert box មួយដែលមាន៖
- ផ្ទៃពណ៌បៃតងស្រាល (bg-green-50)
- border ឆ្វេង ក្រាស់ 4px ពណ៌បៃតង
- text ពណ៌បៃតងងងឹត
សរសេរ HTML ពេញលេញ។

💡 Hint: ផ្សំ bg-green-50 + border-l-4 + border-green-500 + text-green-800 + p-4 + rounded។

Layout (Flex/Grid) — ២ សំណួរ

Q7

បង្កើត layout 3 columns ស្មើគ្នាដោយប្រើ Flexbox។ ក្នុងនោះមាន items 3 ដែលមាន gap 4។ សរសេរ HTML ពេញលេញ។

💡 Hint: ប្រើ flex ជាមួយ gap-4 ហើយ item នីមួយៗមាន flex-1 ឬ w-1/3។

Q8

បង្កើត grid layout ដែល៖
- មាន 4 columns នៅ desktop (lg)
- មាន 2 columns នៅ tablet (md)
- មាន 1 column នៅ mobile
- gap = 6
សរសេរ class attribute ពេញលេញ។

💡 Hint: Tailwind ប្រើ mobile-first: ចាប់ផ្តើមពី grid-cols-1 រួចបន្ថែម md: និង lg: prefix។

Responsive — ១ សំណួរ

Q9

តើ hidden md:block មានន័យដូចម្ដេច? ហើយបើចង់បង្ហាញនៅ mobile តែលាក់នៅ tablet ឡើងទៅ ត្រូវសរសេរយ៉ាងម៉េច?

💡 Hint: hidden = display:none នៅគ្រប់ screen។ md:block = display:block នៅ ≥768px។

Components — ១ សំណួរ

Q10

បង្កើត button component មួយដែលមាន៖
- ផ្ទៃពណ៌ indigo-600
- hover: indigo-700
- text ពណ៌ស
- padding: px-6 py-2
- rounded-lg
- transition animation
សរសេរ HTML ពេញលេញរួមទាំង text "Subscribe"។

💡 Hint: ផ្សំ bg + hover:bg + text-white + px + py + rounded + transition។

⚠️ សាកល្បងធ្វើដោយខ្លួនឯងមុន! មើលចម្លើយបន្ទាប់ពីព្យាយាមរួច។

Q1 (Basics)

<script src="https://cdn.tailwindcss.com"></script>

ដាក់ tag នេះក្នុង <head> នៃឯកសារ HTML។
ចំណាំ: CDN សម្រាប់ development តែប៉ុណ្ណោះ។ សម្រាប់ production ប្រើ Tailwind CLI។

Q2 (Basics)

ចម្លើយ: B
Tailwind ប្រើ utility classes តូចៗ (ឧ: p-4, text-lg, bg-blue-500) ដើម្បីបង្កើត design ផ្ទាល់ខ្លួន។
Bootstrap ផ្ដល់ component ស្រាប់ (ឧ: .btn, .card, .navbar) ដែលមាន style រួចរាល់។

Q3 (Typography)

<p class="text-2xl text-indigo-600 font-bold italic">
  មេរៀន Tailwind CSS
</p>

text-2xl = 1.5rem, text-indigo-600 = ពណ៌ indigo, font-bold = 700, italic = អក្សរទ្រេត

Q4 (Spacing)

p-4 = padding: 1rem (16px) គ្រប់ទិស
px-4 = padding-left + padding-right: 1rem
py-4 = padding-top + padding-bottom: 1rem
pt-4 = padding-top: 1rem

រូបមន្ត: unit × 4px → p-4 = 4 × 4px = 16px

Q5 (Spacing)

វិធី 1: mx-auto (block element)
<div class="mx-auto w-64 bg-blue-500 text-white p-4">
  Centered!
</div>

វិធី 2: flex + justify-center (parent)
<div class="flex justify-center">
  <div class="bg-blue-500 text-white p-4">Centered!</div>
</div>

Q6 (Colors)

<div class="bg-green-50 border-l-4 border-green-500 p-4 rounded">
  <p class="text-green-800 font-medium">✅ Success!</p>
  <p class="text-green-700 text-sm">ប្រតិបត្តិការបានជោគជ័យ។</p>
</div>

Q7 (Layout)

<div class="flex gap-4">
  <div class="flex-1 bg-blue-500 text-white p-4 rounded">Col 1</div>
  <div class="flex-1 bg-blue-600 text-white p-4 rounded">Col 2</div>
  <div class="flex-1 bg-blue-700 text-white p-4 rounded">Col 3</div>
</div>

flex-1 ធ្វើឱ្យ item នីមួយៗយក space ស្មើគ្នា។
ជម្រើស: ប្រើ grid grid-cols-3 gap-4 ក៏បាន។

Q8 (Layout)

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

grid-cols-1 = default (mobile)
md:grid-cols-2 = 2 columns ≥768px
lg:grid-cols-4 = 4 columns ≥1024px

Q9 (Responsive)

hidden md:block មានន័យ:
- hidden → លាក់នៅគ្រប់ screen sizes
- md:block → បង្ហាញ (display:block) នៅ screen ≥768px

បើចង់បង្ហាញ mobile តែលាក់ tablet+:
class="block md:hidden"
- block → បង្ហាញនៅគ្រប់ screen sizes
- md:hidden → លាក់នៅ screen ≥768px

Q10 (Components)

<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition">
  Subscribe
</button>

bg-indigo-600 = ផ្ទៃខាងក្រោយ
hover:bg-indigo-700 = ពណ៌ងងឹតជាងពេល hover
text-white = អក្សរពណ៌ស
px-6 py-2 = padding ផ្តេក 24px បញ្ឈរ 8px
rounded-lg = ជ្រុងកោង 8px
transition = animation រលូន

ការប្រើប្រាស់ Tailwind CSS

Tailwind CSS for Beginners

១. Tailwind CSS ជាអ្វី? (សេចក្តីផ្តើម)

1.1 Tailwind CSS ជាអ្វី? (What is Tailwind CSS?)

1.2 ការដំឡើង CDN (CDN Setup)

ស្វាគមន៍មកកាន់ Tailwind!

1.3 គោលគំនិត Utility-First (Utility-First Concept)

២. Typography (ការកំណត់អក្សរ)

2.1 ទំហំអក្សរ (Text Size)

2.2 ទម្ងន់អក្សរ (Font Weight)

2.3 ការតម្រឹម និង ការតុបតែងអក្សរ (Alignment & Decoration)

៣. Spacing & Sizing (ចន្លោះ និង ទំហំ)

3.1 Padding (គម្លាតខាងក្នុង)

3.2 Margin (គម្លាតខាងក្រៅ)

3.3 Width & Height (ទទឹង និង កម្ពស់)

៤. Colors & Backgrounds (ពណ៌ និង ផ្ទៃខាងក្រោយ)

4.1 ពណ៌អក្សរ (Text Colors)

4.2 ផ្ទៃខាងក្រោយ (Background Colors)

4.3 Border & Rounded Corners (ស៊ុម និង ជ្រុងកោង)

៥. Flexbox Layout (ការរៀបចំ Flexbox)

5.1 Flex មូលដ្ឋាន (Flex Basics)

5.2 Justify & Align (ការតម្រឹម)

5.3 Flex Direction & Wrap (ទិសដៅ និង ការរំកិល)

៦. Grid Layout (ការរៀបចំ Grid)

6.1 Grid មូលដ្ឋាន (Basic Grid)

6.2 Column Span (ពង្រីកជួរ)

៧. Responsive Design (ការរចនាសម្រាប់គ្រប់ឧបករណ៍)

7.1 Breakpoints (ចំណុចប្រែប្រួល)

7.2 Responsive Text & Visibility (អក្សរ និង ការបង្ហាញ/លាក់)

Responsive Title

៨. Components (សមាសធាតុ UI)

8.1 Buttons (ប៊ូតុង)

8.2 Card Component (កាត)

PHP Course

Web Design

JavaScript

8.3 Badges & Alerts (ស្លាក និង ការជូនដំណឹង)

8.4 Navigation Bar (របារ Navigation)

🎮 Tailwind CSS Playground

📝 Practice Questions (លំហាត់)

Basics (មូលដ្ឋាន) — ២ សំណួរ

Typography (អក្សរ) — ១ សំណួរ

Spacing (ចន្លោះ) — ២ សំណួរ

Colors (ពណ៌) — ១ សំណួរ

Layout (Flex/Grid) — ២ សំណួរ

Responsive — ១ សំណួរ

Components — ១ សំណួរ

🔑 Answer Key (ចម្លើយទាំងអស់)