Tailwind CSS কীভাবে কাজ করে?

Tailwind CSS কীভাবে কাজ করে তা বোঝা গুরুত্বপূর্ণ। এটি JIT (Just-In-Time) engine ব্যবহার করে যা আপনার HTML/JSX ফাইলগুলো scan করে এবং শুধুমাত্র ব্যবহৃত utility classes-এর CSS generate করে।

Build Process

1. Tailwind আপনার ফাইলগুলো (HTML, JSX, TSX ইত্যাদি) scan করে
2. কোন utility class ব্যবহার করা হয়েছে তা শনাক্ত করে
3. শুধু সেই classes-এর CSS generate করে
4. Output CSS ফাইলে শুধু প্রয়োজনীয় CSS থাকে

JIT Engine (Just-In-Time)

Tailwind v3 থেকে JIT engine default। এটি real-time সময়ে CSS generate করে, ফলে development faster এবং CSS file ছোট থাকে। Tailwind v4-এও JIT mode default, তবে এটি আরও optimized।

/* Tailwind v4-এ CSS-first approach */
@import "tailwindcss";

/* Custom theme */
@theme {
  --color-brand: #3b82f6;
  --font-heading: "Inter", sans-serif;
}

Output CSS

Tailwind-এর output CSS file-এ থাকে শুধু আপনার ব্যবহৃত utility classes। যদি আপনি bg-blue-500 ব্যবহার করেন, তাহলে output CSS-এ bg-blue-500 class থাকবে — bg-red-500 থাকবে না।