Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

របៀបប្រើ Tailwind CSS - Installation Methods

មាន 3 វិធីសាស្ត្រសំខាន់ ក្នុងការដំឡើង និងប្រើ Tailwind CSS ដោយនីមួយៗមានគុណសម្បត្តិផ្សេងៗគ្នា:

📊 ប្រៀបធៀប Installation Methods

Method	Setup Time	File Size	Customization	Best For
1. Play CDN	⚡ 1 minute	❌ Large (~3.5MB)	⚠️ Limited	Learning, Prototyping
2. Tailwind CLI	🔶 5 minutes	✅ Small (10-50KB)	✅ Full	Simple projects, Static sites
3. PostCSS	🔶 10 minutes	✅ Smallest	✅ Full + Build tools	Production apps, React/Vue/Next

🎯 របៀបជ្រើសរើស?

If you want to...	Use this method
រៀន Tailwind ឬ test ideas លឿន	✅ Play CDN - Just add script tag!
បង្កើត simple website (HTML only)	✅ Tailwind CLI - Easy setup
បង្កើត React, Vue, Next.js app	✅ PostCSS - Integrate with build tools
Deploy to production	✅ CLI or PostCSS - Optimized CSS

🔍 Method Comparison - Detail

Method 1: Play CDN 🎪

Pros ✅	Cons ❌
No build process needed	Large file size (~3.5MB uncompressed)
Works immediately	No PurgeCSS (all classes included)
Perfect for learning	Not recommended for production
Can customize with inline config	Limited plugin support
No installation required	Requires internet connection

Method 2: Tailwind CLI 🛠️

Pros ✅	Cons ❌
Simple setup (one command)	Requires Node.js installed
Auto purge unused CSS	Manual build process
Full configuration support	No hot module replacement
Small production file (~10-50KB)	Separate terminal for watching
Works offline	-

Method 3: PostCSS Integration 🏗️

Pros ✅	Cons ❌
Best for frameworks (React, Vue)	More complex setup
Integrates with build tools	Requires knowledge of build tools
Hot reload in development	Longer initial setup time
Advanced plugin ecosystem	-
Smallest production bundle	-

ដំឡើងតាមរយៈ npm (Tailwind CLI)

📋 System Requirements

Requirement	Minimum Version	ពិនិត្យ
Node.js	12.13.0+	`node --version`
npm	6.0.0+	`npm --version`

⚙️ Installation Steps - Detailed

ជំហានទី 1: Initialize Project

npm init -y

បង្កើត package.json file ដើម្បីគ្រប់គ្រង dependencies។

ជំហានទី 2: Install Tailwind CSS

npm install -D tailwindcss

📝 -D = --save-dev (install as dev dependency)

ជំហានទី 3: Generate Config File

npx tailwindcss init

បង្កើត tailwind.config.js - configuration file

Optional flags:

npx tailwindcss init --full - បង្កើត config ពេញលេញ (all defaults)
npx tailwindcss init --ts - TypeScript config file
npx tailwindcss init -p - បង្កើត postcss.config.js ផងដែរ

ជំហានទី 4: Configure Content Paths

Edit tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
    "./public/**/*.html",
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  // ...
}

⚠️ សំខាន់: Content paths ត្រូវតែត្រឹមត្រូវ ដើម្បី PurgeCSS ដំណើរការ!

ជំហានទី 5: Create Input CSS

បង្កើត src/input.css (or any name you like):

@tailwind base;
@tailwind components;
@tailwind utilities;

Directive	មាតិកា
`@tailwind base;`	Reset styles, base HTML element styles
`@tailwind components;`	Component classes (buttons, cards, etc.)
`@tailwind utilities;`	All utility classes (bg-blue-500, p-4, etc.)

ជំហានទី 6: Build CSS

Development (with watch mode):

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Production (minified):

npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Flag	Purpose
`-i`	Input file path
`-o`	Output file path
`--watch`	Watch for changes and rebuild
`--minify`	Minify output CSS
`--config`	Specify config file path

ជំហានទី 7: Link in HTML

<!DOCTYPE html>
<html>
<head>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        Hello Tailwind!
    </h1>
</body>
</html>

📦 package.json Scripts

បន្ថែមក្នុង package.json ដើម្បីងាយស្រួលប្រើ:

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

ប្រើ:

npm run dev - Development mode (auto-rebuild)
npm run build - Production build (minified)

🚀 Framework-Specific Setup

For React (Create React App)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
content: ["./src/**/*.{js,jsx,ts,tsx}"]

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

For Next.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
content: [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
]

// styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

For Vue 3 (Vite)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"]

// src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Configuration File - tailwind.config.js

⚙️ Config File Structure

module.exports = {
  content: [],    // Files to scan for classes
  theme: {},      // Customize design system
  plugins: [],    // Add plugins
  darkMode: '',   // Dark mode strategy
  corePlugins: {} // Enable/disable core plugins
}

📝 Key Configuration Options

1. Content (Most Important!)

Tailwind scans these files to find what classes are used:

content: [
  './src/**/*.{html,js,jsx,ts,tsx,vue}',
  './public/index.html'
]

⚠️ Common Mistakes:

Wrong ❌	Correct ✅
`content: ["./src"]`	`content: ["./src/*/.js"]`
Forget file extensions	Include all: `.{html,js,jsx}`
Wrong path	Use correct relative path from config

2. Theme - Extend vs Override

Approach	Effect	Use When
`theme: { colors: {...} }`	❌ Replaces all default colors	You want completely custom palette
`theme: { extend: { colors: {...} } }`	✅ Adds to default colors	You want to keep defaults + add custom

3. Customizing Colors

theme: {
  extend: {
    colors: {
      // Simple color
      'brand-blue': '#1e40af',
      
      // Color palette (100-900)
      'custom': {
        50: '#f0f9ff',
        100: '#e0f2fe',
        500: '#0284c7',
        900: '#0c4a6e',
      }
    }
  }
}

4. Customizing Spacing

theme: {
  extend: {
    spacing: {
      '128': '32rem',    // p-128, m-128
      '144': '36rem',    // p-144, m-144
      '1/10': '10%',     // w-1/10
    }
  }
}

5. Custom Fonts

theme: {
  extend: {
    fontFamily: {
      'sans': ['Inter', 'system-ui', 'sans-serif'],
      'heading': ['Poppins', 'sans-serif'],
      'khmer': ['Battambang', 'sans-serif'],
    }
  }
}

6. Breakpoints (Screens)

theme: {
  extend: {
    screens: {
      'xs': '475px',      // Custom breakpoint
      '3xl': '1600px',    // Extra large
      'tablet': '640px',  // Named breakpoint
    }
  }
}

🌙 Dark Mode Configuration

Strategy	Code	Behavior
Media Query	`darkMode: 'media'`	Follows OS preference automatically
Class	`darkMode: 'class'`	Manual toggle (add `dark` class to `<html>`)

🔌 Popular Plugins

Plugin	Install	Purpose
@tailwindcss/typography	`npm i -D @tailwindcss/typography`	Beautiful typography for articles (`prose` class)
@tailwindcss/forms	`npm i -D @tailwindcss/forms`	Better default form styles
@tailwindcss/aspect-ratio	`npm i -D @tailwindcss/aspect-ratio`	Aspect ratio utilities for images/videos
@tailwindcss/line-clamp	`npm i -D @tailwindcss/line-clamp`	Multi-line text truncation
daisyUI	`npm i -D daisyui`	Component library (buttons, cards, etc.)

Add plugins to config:

plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('daisyui'),
]

💡 Best Practices

Do ✅	Don't ❌
Use `extend` to keep defaults	Override entire theme (lose defaults)
Configure content paths correctly	Forget file extensions in content
Use semantic color names	Use `'color1', 'color2'`
Test with `--watch` in development	Manually rebuild every change
Use `--minify` for production	Deploy unminified CSS

ការដំឡើង Tailwind CSS