❖ 1. ស្គាល់ដំបូងអំពី Tailwind CSS

1.1 Tailwind CSS គឺជាអ្វី រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Tailwind CSS ជា CSS Framework បែប Utility-First៖ ខុសពី Bootstrap ដែលផ្ដល់ Component រួចរាល់ (ដូចជា .btn, .card), Tailwind ផ្ដល់ Class តូចៗរាប់រយ (Utility Class) ដែលនីមួយៗធ្វើមុខងារតែមួយ ហើយអ្នកផ្សំពួកវាដោយផ្ទាល់ក្នុង HTML ដើម្បីស្ថាបនារចនាប័ទ្មផ្ទាល់ខ្លួន។

<!-- Bootstrap: ប្រើ Component ដែលមានរួច -->
<button class="btn btn-primary">ចុច</button>

<!-- Tailwind: ផ្សំ Utility Class ដោយខ្លួនឯង -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">ចុច</button>

គន្លឹះ៖ Tailwind ផ្ដល់សេរីភាពរចនាបានច្រើនជាង ព្រោះមិនចាំបាច់តវ៉ាទាស់ Style ដើមរបស់ Component ដូច Bootstrap ទេ ថ្លៃឈ្នួលគឺ Class ក្នុង HTML វែងជាង។

1.2 ការដំឡើង Tailwind រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

វិធី	ការប្រើប្រាស់
CDN (Play CDN)	ដាក់ Script មួយបន្ទាត់ក្នុង <head> ល្អសម្រាប់សាកល្បង មិនស័ក្តិសមសម្រាប់ Production
npm + Build Tool	`npm install tailwindcss` វិធីស្តង់ដារសម្រាប់ Project ពិតប្រាកដ (កាត់ Class ដែលមិនប្រើចេញស្វ័យប្រវត្តិ)

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">សួស្តី Tailwind!</h1>
</body>

1.3 រចនាសម្ព័ន្ធឈ្មោះ Class រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class ភាគច្រើនអនុវត្តតាមទម្រង់ property-value ដូចជា text-center (text-align:center), bg-red-500 (background ពណ៌ក្រហម កម្រិត 500)។ លេខកម្រិតពណ៌រត់ពី 50 (ស្រាលបំផុត) ដល់ 950 (ចាស់បំផុត)។

❖ 2. Layout & Sizing

2.1 Width, Height & Container រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ន័យ
w-full / h-full	ទទឹង/កម្ពស់ 100%
w-1/2	ទទឹង 50%
w-64	ទទឹងថេរ (256px គុណនឹង 4px ក្នុងមួយឯកតា)
max-w-screen-lg	ទទឹងអតិបរមាតាមទំហំអេក្រង់ lg
mx-auto	margin ឆ្វេង-ស្ដាំស្វ័យប្រវត្តិ (តម្រឹមកណ្ដាល)

<div class="w-full max-w-screen-lg mx-auto">
  ខ្លឹមសារកណ្ដាលទំព័រ
</div>

2.2 Display & Position រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ន័យ
block / hidden	display:block / display:none
relative / absolute / fixed / sticky	ត្រូវនឹង CSS position ដូចគ្នា
top-0 / left-0	ប្រើជាមួយ absolute/fixed ដើម្បីកំណត់ទីតាំង

<div class="relative">
  <span class="absolute top-0 right-0 bg-red-500 text-white px-2 rounded-full">3</span>
</div>

❖ 3. Flexbox & Grid Utilities

3.1 Flexbox Utilities រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ត្រូវនឹង CSS
flex	display: flex
flex-col	flex-direction: column
justify-between	justify-content: space-between
items-center	align-items: center
gap-4	gap: 1rem រវាងធាតុ Flex

<div class="flex justify-between items-center p-4">
  <span>ខាងឆ្វេង</span>
  <span>ខាងស្ដាំ</span>
</div>

3.2 Grid Utilities រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ត្រូវនឹង CSS
grid	display: grid
grid-cols-3	grid-template-columns: repeat(3, 1fr)
col-span-2	ធាតុនេះកាន់កាប់ 2 ជួរឈរ

<div class="grid grid-cols-3 gap-4">
  <div class="bg-slate-100 p-4">1</div>
  <div class="bg-slate-100 p-4">2</div>
  <div class="bg-slate-100 p-4">3</div>
</div>

❖ 4. Spacing (Margin, Padding & Gap)

4.1 Padding & Margin Scale រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Syntax ទូទៅ៖ {p|m}{side}-{size} ខ្នាតលេខមូលដ្ឋានស្មើ 0.25rem (4px), ដូច្នេះ p-4 = 1rem (16px)។

Class	ន័យ
p-4	padding គ្រប់ជ្រុង 1rem
px-6 / py-2	padding ឆ្វេង-ស្ដាំ / លើ-ក្រោម
mt-8	margin-top 2rem
-mt-2	margin-top អវិជ្ជមាន (ទាញឡើងលើ)

<div class="px-6 py-3 mt-4">ប្រអប់មានចន្លោះខាងក្នុង និងគម្លាតខាងលើ</div>

4.2 Gap (សម្រាប់ Flex/Grid) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

gap ជាវិធីទំនើបជាង Margin សម្រាប់ដាក់គម្លាតរវាងធាតុក្នុង Flex/Grid ព្រោះមិនបន្សល់ Margin លើសនៅគែម។

<div class="flex gap-3">
  <button class="px-3 py-1 bg-slate-200 rounded">A</button>
  <button class="px-3 py-1 bg-slate-200 rounded">B</button>
</div>

❖ 5. Typography & Colors

5.1 Font Size & Weight រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ន័យ
text-sm / text-base / text-xl	ទំហំអក្សរ (sm=តូច, base=ធម្មតា, xl=ធំ)
text-3xl / text-5xl	ទំហំធំសម្រាប់ចំណងជើង
font-bold / font-medium	កម្រាស់អក្សរ
text-center	តម្រឹមកណ្ដាល
leading-relaxed	គម្លាតរវាងបន្ទាត់ធំជាងធម្មតា

<h1 class="text-4xl font-bold text-center">ចំណងជើងធំ</h1>
<p class="text-base leading-relaxed text-slate-600">អត្ថបទធម្មតា...</p>

5.2 Color System រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Tailwind មាន Palette ពណ៌ជាង 20 ក្រុម (ឧ. slate, red, blue, emerald) នីមួយៗមាន 11 កម្រិត (50 ដល់ 950)។

<div class="bg-blue-500 text-white">ខៀវធម្មតា</div>
<div class="bg-blue-100 text-blue-800">ខៀវស្រាល ជាមួយអក្សរខៀវចាស់</div>
<div class="bg-emerald-600 text-white">បៃតងជ្រៅ</div>

គន្លឹះ៖ ចាប់តម្លៃ 500 ជាចំណុចកណ្ដាល៖ លេខតូចជាង (50-400) ស្រាលជាង, លេខធំជាង (600-950) ចាស់ជាង។

❖ 6. Borders, Shadows & Effects

6.1 Border & Rounded Corners រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ន័យ
border	ដាក់ស៊ុម 1px
border-2 border-blue-500	ស៊ុមកម្រាស់ 2px ពណ៌ខៀវ
rounded-lg	ជ្រុងមូល (border-radius)
rounded-full	មូលទាំងស្រុង (ប្រើសម្រាប់ Avatar)

6.2 Shadow & Opacity រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div class="bg-white rounded-xl shadow-lg p-6">
  កាតដែលមានស្រមោលទន់ៗ
</div>

<div class="bg-black/50">ផ្ទៃខាងក្រោយខ្មៅ តម្លាភាព 50%</div>

❖ 7. Responsive Design

7.1 Breakpoint Prefixes រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Tailwind ជា Mobile-First៖ Class ធម្មតា (គ្មាន Prefix) អនុវត្តលើគ្រប់ទំហំអេក្រង់ រួចប្រើ Prefix ដើម្បី Override នៅពេលអេក្រង់ធំជាងកម្រិតកំណត់។

Prefix	ទំហំអប្បបរមា
sm:	640px
md:	768px
lg:	1024px
xl:	1280px

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 1 ជួរឈរនៅទូរស័ព្ទ, 2 នៅ Tablet, 3 នៅ Desktop -->
</div>

ចំណាំ៖ Prefix តែងតែសរសេរនៅមុខ Class ដោយផ្ទាល់ (ឧ. md:text-xl) មិនមែនជា Class ដាច់ដោយឡែកទេ។

❖ 8. States & Interactivity

8.1 Hover, Focus & Active States រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ដូចនឹង Breakpoint, State ក៏ប្រើ Prefix ដែរ ដោយសរសេរផ្ទាល់នៅមុខ Class ដែលចង់ឲ្យប្រែប្រួលនៅ State នោះ។

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 active:scale-95 transition">
  ចុចទីនេះ
</button>

Prefix	ពេលណាអនុវត្ត
hover:	ពេលព្រួញកណ្ដុរដាក់លើ
focus:	ពេល Input កំពុងត្រូវបានជ្រើសរើស
disabled:	ពេល Element ត្រូវបានបិទ

8.2 Dark Mode រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Prefix dark: អនុវត្តរចនាប័ទ្មនៅពេលកម្មវិធីរុករក ឬប្រព័ន្ធកំពុងប្រើ Dark Mode។

<div class="bg-white dark:bg-slate-900 text-black dark:text-white p-4">
  ប្តូរពណ៌ដោយស្វ័យប្រវត្តិតាម Dark Mode
</div>

❖ 9. គម្រោងអនុវត្ត (ស្ថាបនាកាតសៀវភៅ)

9.1 ការរៀបចំគម្រោង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

តោះផ្សំចំណុចដែលបានរៀនទាំងអស់ (Grid, Spacing, Colors, Shadow, Responsive, Hover State) ធ្វើជាកាតសៀវភៅមួយ ដែលមានចលនាទន់ៗពេល Hover។

9.2 កូដពេញលេញ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div class="max-w-screen-lg mx-auto py-10 px-4">
  <h2 class="text-3xl font-bold text-center mb-8">សៀវភៅរបស់យើង</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition p-5">
      <span class="inline-block bg-blue-100 text-blue-700 text-xs font-medium px-2 py-1 rounded-full mb-2">
        ភាសាកម្មវិធី
      </span>
      <h3 class="text-lg font-bold mb-1">C Programming Khmer</h3>
      <p class="text-slate-500 text-sm mb-4">រៀនមូលដ្ឋានគ្រឹះកម្មវិធី។</p>
      <a href="#" class="text-blue-600 font-medium text-sm hover:underline">ចូលអាន →</a>
    </div>
    <!-- ធ្វើម្តងទៀតសម្រាប់កាតផ្សេងទៀត... -->
  </div>
</div>

លំហាត់អនុវត្ត

ប្រើ flex និង justify-between ស្ថាបនា Navbar ដែលមាន Logo ខាងឆ្វេង និងតំណភ្ជាប់ខាងស្ដាំ (មេរៀនទី៣)។
ធ្វើឲ្យ Navbar នោះបត់ជា Column នៅលើទូរស័ព្ទ ដោយប្រើ flex-col md:flex-row (មេរៀនទី៧)។
បន្ថែម hover: effect ទៅគ្រប់ប៊ូតុងក្នុងគម្រោង ដើម្បីឲ្យមានចលនាទន់ៗ (មេរៀនទី៨)។
សាកល្បងបន្ថែម dark: class ទៅកាតសៀវភៅ ដើម្បីគាំទ្រ Dark Mode។