CSS framework — Bootstrap আর Tailwind CSS, কখন কোনটি

১ · Framework কী দেয়, আর বিনিময়ে কী নেয়

রাকিব একজন নতুন ফ্রিল্যান্সার। একটি ক্লায়েন্ট বলল, “আমার কাপড়ের দোকানের জন্য এক সপ্তাহে একটি ওয়েবসাইট চাই — মোবাইলে সুন্দর দেখাতে হবে, মেনু থাকবে, পণ্যের কার্ড থাকবে, অর্ডারের আগে একটি নিশ্চিত করার জানালা খুলবে।” রাকিব জানে এসব শূন্য থেকে CSS লিখে বানানো যায় — পর্ব ২৫-এ Flexbox, পর্ব ২৭-এ Grid, পর্ব ৩০-এ রেসপন্সিভ নকশা শিখেছে। কিন্তু সময় মাত্র এক সপ্তাহ। তখন কেউ বলল, “Bootstrap নাও, এক দিনেই হয়ে যাবে।” আরেকজন বলল, “এখন সবাই Tailwind ব্যবহার করে।” কোনটি ঠিক?

প্রশ্নের উত্তরের আগে বুঝতে হবে CSS framework আসলে কী। সহজ কথায়: অন্য কেউ আগে থেকে লিখে রাখা, পরীক্ষা করা একগাদা CSS (কখনো সাথে কিছু JavaScript), যা আপনি নিজের পাতায় যোগ করে HTML-এ তাদের ঠিক করা class নাম বসিয়ে ব্যবহার করেন। Framework কোনো নতুন ভাষা নয় — ব্রাউজার শেষ পর্যন্ত সাধারণ CSS-ই পায়।

যেকোনো framework মোটামুটি চারটি জিনিস দেয়, আর চারটি দাম চায়:

“আকার” কথাটি মেপে দেখা যাক। Bootstrap 5.3.8-এর পুরো minify করা CSS ফাইল প্রায় ২৩২ KB; সার্ভার gzip দিয়ে চেপে পাঠালে প্রায় ৩১ KB. সাথে modal, dropdown-এর JavaScript (Popper-সহ bundle) আরও প্রায় ৮০ KB, চাপলে প্রায় ২৪ KB. আপনি হয়তো ব্যবহার করবেন এর দশ ভাগের এক ভাগ — বাকিটাও ফোনে নামবে, পার্স হবে, আর CSS ফাইলটি পর্ব ৪৯-এর ভাষায় render-blocking বলে পাতার প্রথম দৃশ্য দেখাতে দেরি করাবে। অন্যদিকে Tailwind শুধু ব্যবহৃত class-এর CSS বানায়, তাই ফল সাধারণত অনেক ছোট — সেটি কীভাবে, অংশ ৬-এ দেখবেন।

২ · Bootstrap — ইতিহাস আর ১২ কলামের grid

Bootstrap-এর জন্ম Twitter-এর ভেতরে। কোম্পানির নানা অভ্যন্তরীণ টুল নানা রকম দেখাত, তাই ডিজাইনার Mark Otto আর ডেভেলপার Jacob Thornton একটি সাধারণ নকশার সেট তৈরি করেন। ২০১১ সালের আগস্টে সেটি open source হিসেবে প্রকাশ পায়, আর অল্প দিনেই GitHub-এর সবচেয়ে জনপ্রিয় প্রজেক্টগুলোর একটি হয়ে ওঠে। প্রধান সংস্করণগুলো এক নজরে:

Bootstrap-এর হৃদয় তার grid system. তিনটি class মনে রাখলেই চলে: .container (পাতার মাঝখানে একটি সীমিত চওড়ার বাক্স), .row (একটি সারি) আর .col-* (সারির ভেতরের কলাম)। প্রতিটি সারি ১২ ভাগে ভাগ করা — .col-6 মানে ১২-র ৬ ভাগ, অর্থাৎ অর্ধেক। আর মাঝখানে breakpoint-এর নাম বসালে শর্ত যোগ হয়: .col-sm-6 মানে “sm মাপ (576px) বা তার বেশি চওড়া পর্দায় অর্ধেক; তার চেয়ে ছোট পর্দায় পুরো চওড়া।” এটি পর্ব ৩০-এর মোবাইল-ফার্স্ট ভাবনাই — ছোট পর্দার নিয়ম আগে, বড় পর্দার নিয়ম যোগ হয় পরে।

একই HTML বিভিন্ন চওড়ায় কীভাবে সাজে, আর ভেতরে আসলে কোন CSS কাজ করছে, ধাপে ধাপে দেখুন। ধরুন তিনটি পণ্য-কার্ডের প্রতিটিতে class="col-12 col-sm-6 col-lg-4":

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-sm-6 col-lg-4">কার্ড ১</div>
    <div class="col-12 col-sm-6 col-lg-4">কার্ড ২</div>
    <div class="col-12 col-sm-6 col-lg-4">কার্ড ৩</div>
  </div>
</div>

┌───────────────────────────┐
│ কার্ড ১       (১২/১২)      │
├───────────────────────────┤
│ কার্ড ২       (১২/১২)      │
├───────────────────────────┤
│ কার্ড ৩       (১২/১২)      │
└───────────────────────────┘

┌─────────────┬─────────────┐
│ কার্ড ১ (৬)  │ কার্ড ২ (৬)  │
├─────────────┼─────────────┘
│ কার্ড ৩ (৬)  │   ← জায়গা না পেয়ে নিচে
└─────────────┘

┌────────┬────────┬────────┐
│ কার্ড ১ │ কার্ড ২ │ কার্ড ৩ │
│  (৪)   │  (৪)   │  (৪)   │
└────────┴────────┴────────┘

.row { --bs-gutter-x: 1.5rem; display: flex; flex-wrap: wrap;
       margin-right: calc(-.5 * var(--bs-gutter-x)); … }
.row > * { flex-shrink: 0; width: 100%;
          padding-right: calc(var(--bs-gutter-x) * .5); … }
@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
}

এবার আসল Bootstrap দিয়ে দুটি পণ্য-কার্ড। CDN (content delivery network — সারা পৃথিবীতে ছড়ানো সার্ভার, যা কাছের জায়গা থেকে ফাইল দেয়) থেকে একটি <link>-ই যথেষ্ট:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">

<div class="container py-3">
  <div class="row g-3">
    <div class="col-12 col-sm-6">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <h3 class="card-title h5">নকশী কাঁথা</h3>
          <p class="card-text text-body-secondary">হাতে সেলাই, যশোরের কারিগর</p>
          <p class="fs-5 fw-bold text-success">৳১,২৫০</p>
          <button class="btn btn-success">কার্টে নিন</button>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <h3 class="card-title h5">জামদানি শাড়ি</h3>
          <p class="card-text text-body-secondary">নারায়ণগঞ্জের তাঁত</p>
          <p class="fs-5 fw-bold text-success">৳৮,৫০০</p>
          <button class="btn btn-success">কার্টে নিন</button>
        </div>
      </div>
    </div>
  </div>
</div>

৩ · Bootstrap-এর component, JavaScript আর utility

Bootstrap-এর আসল শক্তি grid নয় — grid এখন CSS নিজেই দেয়। শক্তি হলো তৈরি component-এর বিশাল ভাণ্ডার: navbar (মেনু, ছোট পর্দায় ভাঁজ হয়ে “হ্যামবার্গার” বোতাম), card, alert, badge, form-এর সাজ, pagination, modal (পাতার ওপর ভেসে ওঠা জানালা), dropdown, tooltip, offcanvas (পাশ থেকে বেরিয়ে আসা প্যানেল), carousel, toast. এর মধ্যে যেগুলো ক্লিকে খোলে-বন্ধ হয়, তাদের জন্য Bootstrap একটি JavaScript ফাইলও দেয়। আপনাকে JavaScript লিখতে হয় না — HTML-এ data-bs-toggle আর data-bs-target attribute বসালেই হয়।

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style> body { min-height: 400px; } </style>

<button type="button" class="btn btn-primary m-3"
        data-bs-toggle="modal" data-bs-target="#order">অর্ডার নিশ্চিত করুন</button>

<div class="modal fade" id="order" tabindex="-1" aria-labelledby="order-title" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="order-title">অর্ডারটি পাঠাবেন?</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="বন্ধ করুন"></button>
      </div>
      <div class="modal-body">নকশী কাঁথা × ১ — মোট ৳১,২৫০ (ক্যাশ অন ডেলিভারি)</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">না, ফিরে যাই</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">হ্যাঁ, পাঠান</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

Component-এর পাশাপাশি Bootstrap-এ শত শত ছোট utility class আছে, যেগুলো একটি করে CSS ঘোষণা: mt-3 (ওপরে margin), p-2 (padding), d-flex (display: flex), justify-content-between, text-center, fw-bold, d-none d-md-block (ছোট পর্দায় লুকানো, md থেকে দেখানো)। ফাঁকের মাপ ০ থেকে ৫ — 1 মানে 0.25rem, 3 মানে 1rem, 5 মানে 3rem. v5-এ বাম-ডানের বদলে start-end নাম এসেছে — ms-3 (margin-start), me-3 (margin-end) — যাতে আরবি-উর্দুর মতো ডান-থেকে-বাম ভাষায়ও (RTL) একই class ঠিক কাজ করে; পর্ব ৩৫-এর logical property-র ভাবনাই।

৪ · Bootstrap নিজের মতো করা — Sass, CSS variable আর override-এর যন্ত্রণা

ক্লায়েন্ট বলল, “বোতাম Bootstrap-এর নীল নয়, আমাদের ব্র্যান্ডের সবুজ চাই।” এখানেই অনেক নতুন ডেভেলপার প্রথম ধাক্কা খান। সহজ মনে হয় — নিজের CSS-এ .btn-primary-এর রং বদলে দিলেই তো হয়! নিচের দুটি বোতাম দেখুন — দুটিই সবুজ করার চেষ্টা, দুই ভাবে:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>
  /* উপায় ১: সরাসরি রং বসানো */
  .btn-a { background: #006a4e; border-color: #006a4e; }

  /* উপায় ২: Bootstrap-এর নিজের CSS variable বদলানো */
  .btn-b {
    --bs-btn-bg: #006a4e;        --bs-btn-border-color: #006a4e;
    --bs-btn-hover-bg: #00513b;  --bs-btn-hover-border-color: #00513b;
    --bs-btn-active-bg: #003d2c; --bs-btn-active-border-color: #003d2c;
  }
</style>

<div class="d-flex flex-wrap gap-2 p-3">
  <button class="btn btn-primary btn-a">উপায় ১ — মাউস রাখুন</button>
  <button class="btn btn-primary btn-b">উপায় ২ — মাউস রাখুন</button>
</div>

Bootstrap নিজের মতো করার তিনটি স্তর আছে — ভালো থেকে কম ভালো ক্রমে:

// custom.scss — Bootstrap আনার আগে নিজের মান
$primary: #006a4e;
$border-radius: .75rem;
$font-family-base: "Noto Sans Bengali", system-ui, sans-serif;

@import "bootstrap/scss/bootstrap";

৫ · Tailwind CSS — utility-first ভাবনা

Tailwind CSS সম্পূর্ণ উল্টো পথে হাঁটে। এতে কোনো .card বা .btn নেই। আছে হাজারো ছোট class, প্রতিটি সাধারণত একটি CSS ঘোষণা — p-4, flex, rounded-lg, text-white — আর আপনি HTML-এ সেগুলো জোড়া দিয়ে নিজের component বানান। এই ধারণার নাম utility-first. Bootstrap-এও utility আছে, কিন্তু সেখানে সেগুলো component-এর সহকারী; Tailwind-এ utility-ই প্রধান হাতিয়ার।

একটি Tailwind class আসলে কী, সবচেয়ে ভালো বোঝা যায় নিজে কয়েকটি বানিয়ে। নিচের এডিটরে কোনো framework নেই — শুধু সাধারণ CSS-এ Tailwind-এর মতো নাম ও মাপের কয়েকটি utility (ইন্টারনেট ছাড়াই চলে):

:root { --spacing: 0.25rem; }   /* Tailwind v4-এর মাপের একক */
body  { font-family: system-ui, sans-serif; background: #f4f4f5; padding: 1rem; }

.flex            { display: flex; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.p-5   { padding: calc(var(--spacing) * 5); }        /* 1.25rem */
.px-4  { padding-inline: calc(var(--spacing) * 4); } /* 1rem */
.py-2  { padding-block: calc(var(--spacing) * 2); }
.mt-1  { margin-top: calc(var(--spacing) * 1); }
.mt-4  { margin-top: calc(var(--spacing) * 4); }
.m-0 { margin: 0; }  .mb-0 { margin-bottom: 0; }
.max-w-72  { max-width: calc(var(--spacing) * 72); } /* 18rem */
.rounded-lg { border-radius: 0.5rem; }  .rounded-xl { border-radius: 0.75rem; }
.shadow    { box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.bg-white  { background: #fff; }  .bg-green { background: #006a4e; border: 0; }
.text-white { color: #fff; } .text-green { color: #006a4e; } .text-gray { color: #52525b; }
.text-lg   { font-size: 1.125rem; }  .font-bold { font-weight: 700; }

আসল Tailwind এই কাজটিই করে, শুধু অনেক বড় পরিসরে আর একটি নিয়মিত ব্যাকরণে। একটি class-এর নামে তিনটি অংশ থাকতে পারে: শর্ত (variant, যেমন md:, hover:), property (যেমন p = padding, bg = background) আর মান (যেমন 4, emerald-700). নিচের class-গুচ্ছটি ধাপে ধাপে ভেঙে দেখুন — প্রতিটি টুকরো কোন CSS হয়:

৬ · Tailwind-এর ভেতরে — build, @theme, layer আর @apply

প্রশ্ন জাগে: হাজারো class-এর CSS তো বিশাল হওয়ার কথা। Tailwind ছোট থাকে কীভাবে? উত্তর: Tailwind আগে থেকে কোনো বড় CSS ফাইল দেয় না। একটি build টুল আপনার প্রজেক্টের ফাইলগুলো পড়ে, class-এর মতো দেখতে শব্দগুলো খুঁজে বের করে, আর শুধু সেগুলোর CSS তৈরি করে। এই পদ্ধতিকে বলা হয় JIT (just-in-time — দরকারের মুহূর্তে বানানো)।

<button class="rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-dark">
  কার্টে নিন
</button>

rounded-lg  bg-brand  px-4  py-2  text-white  hover:bg-brand-dark
button  class  কার্টে  নিন   ← এগুলোও “প্রার্থী”, কিন্তু কোনো utility নয় — বাদ

@import "tailwindcss";

@theme {
  --color-brand: #006a4e;        /* → bg-brand, text-brand, border-brand … */
  --color-brand-dark: #00513b;
  --font-bangla: "Noto Sans Bengali", sans-serif;   /* → font-bangla */
}

@layer theme, base, components, utilities;
@layer theme     { :root { --color-brand: #006a4e; --spacing: .25rem; … } }
@layer base      { /* Preflight: margin শূন্য, বোতামের সাজ মোছা … */ }
@layer utilities { .bg-brand { background-color: var(--color-brand); } … }

.rounded-lg { border-radius: var(--radius-lg); }
.bg-brand { background-color: var(--color-brand); }
.px-4 { padding-inline: calc(var(--spacing) * 4); }
… ছয়টি class-এর নিয়ম, হাজার হাজার নয় …
bg-red-500 লেখেননি? তার CSS-ও নেই।

শেখার আর ছোট পরীক্ষার জন্য Tailwind একটি “ব্রাউজার সংস্করণ” দেয় — একটি <script>, যা পাতার ভেতরে বসেই class পড়ে CSS বানায়। নিচের এডিটরে সেটিই আছে, সাথে @theme দিয়ে নিজের ব্র্যান্ড রং:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
<style type="text/tailwindcss">
  @theme {
    --color-brand: #006a4e;
    --color-brand-dark: #00513b;
  }
</style>

<div class="space-y-3 p-4">
  <button class="rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-dark
                 focus-visible:outline-3 focus-visible:outline-offset-2
                 focus-visible:outline-amber-500 sm:px-8">কার্টে নিন</button>

  <p class="w-[22rem] max-w-full rounded-md border border-brand/30 p-3 text-sm">
    এই বাক্সের চওড়া w-[22rem] — স্কেলের বাইরের এককালীন মান।
  </p>

  <div class="grid grid-cols-[1fr_2fr] gap-2 text-center text-white">
    <div class="bg-brand p-2">1fr</div>
    <div class="bg-brand-dark p-2">2fr</div>
  </div>
</div>

@apply — সুবিধা আর ফাঁদ

লম্বা class-গুচ্ছ বারবার লিখতে বিরক্ত লাগলে Tailwind একটি পথ দেয়: নিজের CSS-এ @apply দিয়ে utility-গুলো একটি নামে জড়ো করা।

/* কাজ করে — কিন্তু বেশি করলে Tailwind-এর মূল সুবিধাই হারায় */
.btn-brand {
  @apply rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-dark;
}

সমস্যা হলো, সব কিছু @apply দিয়ে লিখলে আপনি আবার সেই নাম-বানানো, আলাদা-ফাইলে-খোঁজা পুরোনো CSS-এ ফিরে গেলেন — শুধু মাঝখানে একটি বাড়তি টুল রেখে। Tailwind-এর নিজের ডকুমেন্টেশনও বারবার ব্যবহৃত অংশের জন্য প্রথমে component (React, Vue, Blade-এর partial) বা লুপ ব্যবহারের পরামর্শ দেয়; @apply রাখুন ছোট, সত্যিকারের পুনরাবৃত্ত জিনিসের জন্য — যেমন বাইরের কোনো library-র HTML, যেখানে class বসানো যায় না।

৭ · একই কার্ড তিনভাবে — সাধারণ CSS, Bootstrap আর Tailwind

তুলনা করার সবচেয়ে সৎ উপায় হলো একই জিনিস তিনভাবে বানানো। অংশ ২-এ Bootstrap কার্ড দেখেছেন। এবার একই নকশী কাঁথার কার্ড — ওপরে রঙিন ছবির জায়গা, নিচে নাম, বিবরণ, দাম আর বোতাম — প্রথমে নিজের লেখা CSS-এ, যেখানে HTML পরিষ্কার আর সব সিদ্ধান্ত CSS ফাইলে:

:root { --brand: #006a4e; --brand-dark: #00513b; --radius: 12px; }
body { font-family: system-ui, sans-serif; background: #f4f4f5; padding: 1rem; }

.card { max-width: 18rem; background: #fff; border-radius: var(--radius);
        overflow: hidden; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.card-img { aspect-ratio: 16 / 9; display: grid; place-items: center;
            font-size: 3rem; background: linear-gradient(135deg, #fde68a, #fca5a5); }
.card-body  { padding: 1rem 1.25rem 1.25rem; }
.card-title { margin: 0 0 .25rem; font-size: 1.15rem; }
.card-text  { margin: 0; color: #52525b; }
.price { margin: .75rem 0; font-size: 1.25rem; font-weight: 700; color: var(--brand); }
.btn { font: inherit; color: #fff; background: var(--brand); border: 0;
       border-radius: 8px; padding: .5rem 1rem; cursor: pointer; }
.btn:hover { background: var(--brand-dark); }
.btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

এবার হুবহু একই কার্ড Tailwind-এ। খেয়াল করুন, CSS ফাইল নেই — সব সিদ্ধান্ত HTML-এর class-এ:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>

<div class="bg-zinc-100 p-4">
  <article class="max-w-72 overflow-hidden rounded-xl bg-white shadow-md">
    <div class="grid aspect-video place-items-center bg-linear-135
                from-amber-200 to-red-300 text-5xl" aria-hidden="true">🧵</div>
    <div class="p-5">
      <h3 class="text-lg font-semibold">নকশী কাঁথা</h3>
      <p class="text-zinc-600">হাতে সেলাই, যশোরের কারিগর</p>
      <p class="my-3 text-xl font-bold text-emerald-700">৳১,২৫০</p>
      <button class="rounded-lg bg-emerald-700 px-4 py-2 text-white
                     hover:bg-emerald-800 focus-visible:outline-3
                     focus-visible:outline-offset-2 focus-visible:outline-amber-500">
        কার্টে নিন
      </button>
    </div>
  </article>
</div>

তিনটি পদ্ধতি পাশাপাশি রাখলে পার্থক্যটা পরিষ্কার হয়:

৮ · ওপরের তলা আর অন্য বিকল্প — daisyUI, shadcn/ui, Bulma, Pico.css, Open Props

Tailwind শুধু utility দেয়, তৈরি বোতাম বা modal দেয় না। তাই এর ওপর দাঁড়িয়ে বেশ কিছু component library গড়ে উঠেছে। দুটি পরিচিত নাম, দুটি আলাদা দর্শন:

Bootstrap আর Tailwind ছাড়াও কয়েকটি বিকল্প চেনা থাকা ভালো:

Classless CSS-এর ধারণাটি সবচেয়ে সহজে বোঝা যায় চোখে দেখে। নিচের HTML-এ একটিও class নেই — শুধু পর্ব ৮ আর ১০-এর মতো অর্থবহ ট্যাগ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.classless.min.css">

<main>
  <h2>অর্ডারের জন্য যোগাযোগ</h2>
  <form>
    <label>আপনার নাম <input name="name" required></label>
    <label>মোবাইল নম্বর <input name="phone" type="tel" inputmode="tel"></label>
    <fieldset>
      <legend>পেমেন্ট</legend>
      <label><input type="radio" name="pay" value="cod" checked> ক্যাশ অন ডেলিভারি</label>
      <label><input type="radio" name="pay" value="mobile"> মোবাইল ব্যাংকিং</label>
    </fieldset>
    <button>পাঠান</button>
  </form>
</main>

৯ · কোনটি কখন — আর কেন CSS জানা এখনো জরুরি

“সেরা framework কোনটি?” প্রশ্নটির সঠিক উত্তর নেই — আছে “এই প্রজেক্টে, এই দলের জন্য কোনটি?” সিদ্ধান্তের সময় এই প্রশ্নগুলো নিজেকে করুন:

বাংলাদেশের কাজের বাজারে দুটো নামই নিয়মিত দেখা যায়। ফ্রিল্যান্সিং মার্কেটপ্লেসে ল্যান্ডিং পেজ, WordPress থিম, admin ড্যাশবোর্ড আর পুরোনো সাইট ঠিক করার বহু কাজে Bootstrap আসে, কারণ লাখো টেমপ্লেট আর থিম এর ওপর বানানো। নতুন React বা Next.js প্রজেক্ট, স্টার্টআপ আর বিদেশি এজেন্সির কাজে Tailwind-এর চাহিদা গত কয়েক বছরে দ্রুত বেড়েছে; Laravel-এর মতো জনপ্রিয় backend-এর শুরুর টেমপ্লেটেও Tailwind থাকে। তাই দুটোরই মূল জিনিসগুলো চেনা থাকলে সুবিধা — কিন্তু ক্লায়েন্ট আসলে কেনেন একটি দ্রুত, সুন্দর, সবার জন্য ব্যবহারযোগ্য সাইট, কোনো framework-এর নাম নয়। (ফ্রিল্যান্সিংয়ের বিস্তারিত পথ জানতে ICT কোর্সের ফ্রিল্যান্সিং পর্ব দেখতে পারেন।)

আরেকটি কারণ আছে: framework বদলায়। Bootstrap 3 থেকে 4-এ যাওয়া মানে অনেক প্রজেক্টে প্রায় নতুন করে লেখা; Tailwind v3 থেকে v4-এ কনফিগের জায়গাই বদলে গেছে। দশ বছর আগে যিনি শুধু Bootstrap 3-এর class মুখস্থ করেছিলেন, আজ তাঁকে আবার শুরু করতে হয়। যিনি Flexbox, Grid আর cascade বুঝেছিলেন, তিনি যেকোনো নতুন framework এক বিকেলে ধরতে পারেন।

১০ · AI-এর যুগে — framework-এর কোড AI-কে দিয়ে লেখালে

AI-কে “Bootstrap দিয়ে একটি navbar বানাও” বা “Tailwind-এ একটি pricing কার্ড দাও” বললে কয়েক সেকেন্ডে কোড পাবেন — আর প্রায়ই সেটি দেখতে ঠিকঠাক লাগবে। সমস্যা লুকিয়ে থাকে সংস্করণে। AI শিখেছে বহু বছরের পুরোনো-নতুন কোড মিশিয়ে, তাই এক উত্তরে Bootstrap 4 আর 5, বা Tailwind v3 আর v4 মিলে যায়। আর framework থাকলেই কোড অ্যাক্সেসিবল হয় না — framework-এর class দিয়েও div-soup লেখা যায়।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া framework-কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রজেক্টে framework-এর কোন সংস্করণ আছে দেখেছি (package.json বা CDN লিংক), আর সন্দেহজনক প্রতিটি class সেই সংস্করণের অফিসিয়াল ডকুমেন্টেশনে (getbootstrap.com, tailwindcss.com) খুঁজে পেয়েছি
• DevTools-এ কয়েকটি উপাদান বেছে Styles প্যানেলে দেখেছি class-গুলো আসলে কোন CSS দিচ্ছে, আর কোনো নিয়ম কাটা (overridden) পড়ছে কি না
• HTML validator.w3.org-এ দিয়েছি; শুধু Tab দিয়ে মেনু, modal আর বোতাম চালিয়ে দেখেছি
• Lighthouse চালিয়ে Performance আর Accessibility দেখেছি; DevTools-এর Coverage প্যানেলে অব্যবহৃত CSS কতটা, মেপেছি
• নতুন কোনো CSS ফিচার (যেমন color-mix(), @property) পেলে MDN আর Can I use-এ Baseline অবস্থা দেখে নিয়েছি — বিশেষ করে Tailwind v4 পুরোনো ফোনে চালাতে হলে