Styling — Tailwind, CSS Modules, component library আর design system

১ · সমস্যাটি নামের — চারটি পথ এক নজরে

একটি বড় বাজারের নোটিস বোর্ড ভাবুন। সব দোকানদার একই বোর্ডে নোটিস টাঙান। চালের দোকানি লিখলেন “কার্ড: আজ ছাড় নেই।” পাশের মোবাইল দোকানি লিখলেন “কার্ড: ৳৫০ রিচার্জ।” দুই “কার্ড” দুই জিনিস, কিন্তু বোর্ড একটাই। ক্রেতা কোনটি মানবেন?

CSS ঠিক এমন একটি বোর্ড। আপনি .card লিখলে সেটি পুরো পাতার সব class="card"-এ লাগে। এই সমস্যার নাম scope-এর অভাব। ছোট সাইটে টের পাওয়া যায় না। পর্ব ০৭-এ শেখা component ভাবনায় কিন্তু একই পাতায় অনেক লেখকের component বসে, তাই নামের ধাক্কা লাগে।

দুটি নিয়ম মিলে কে জিতবে তা ঠিক হয়। Cascade আর specificity. বিস্তারিত আছে HTML ও CSS কোর্সের cascade পর্বে, এখানে এক লাইনে: বেশি নির্দিষ্ট selector জেতে, সমান হলে যেটি পরে লেখা। ফলে বড় project-এ একটি ভয়ের চক্র তৈরি হয়। কেউ পুরোনো CSS মোছেন না, কারণ জানেন না কোথায় লাগছে। নতুন নিয়ম জেতাতে আরও লম্বা selector লেখেন, শেষে !important.

দুটি পাশের পথও চিনে রাখুন। BEM-এর মতো নামকরণ শুধু শৃঙ্খলা দিয়ে নামের ধাক্কা কমায়। Sass CSS লেখা সহজ করে, কিন্তু scope সমস্যা নিজে মেটায় না। আর React-এর style={{}} prop চলে শুধু সেই element-এ, তাতে :hover বা media query লেখা যায় না।

২ · CSS Modules — নামের পেছনে লুকানো পদবি

স্কুলের একই ক্লাসে দুজন “রাফি” থাকলে শিক্ষক পদবি জুড়ে ডাকেন। CSS Modules ঠিক এই কাজটি করে। আপনি ফাইলের ভেতরে ছোট নাম লেখেন, Vite build-এর সময় প্রতিটি নামের সাথে ফাইলভিত্তিক একটি hash জুড়ে দেয়। Import করলে পাওয়া যায় একটি object: আপনার নাম থেকে আসল নামের ম্যাপ।

import a from './Card.module.css'   // .card { padding: 1rem; ... }
import b from './Promo.module.css'  // .card { padding: 2rem; ... }

<div className={a.card}>চাল</div>
<div className={b.card}>অফার</div>

দুই ফাইলেই .card আছে। সত্যিকারের run-এ (Vite 8.3.5) build শেষে CSS আর JS-এ যা পাওয়া গেল:

._card_14suu_1{border-radius:12px;padding:1rem}
._title_14suu_2{color:teal}
._card_1ujsx_1{background:gold;padding:2rem}

{card:`_card_14suu_1`,title:`_title_14suu_2`}
{card:`_card_1ujsx_1`}

দুই .card আলাদা নাম পেয়েছে, তাই ধাক্কা লাগার পথ নেই। নিচের live block-এ Tailwind বা build tool নেই। তাই hash করা নাম হাতে লিখে একই ফল দেখানো হয়েছে, সাথে clsx-এর একটি ছোট্ট নকল। “অফার” বোতাম চেপে দেখুন class কীভাবে বদলায়।

<style>
  .Card_card_a1x { padding: 8px; background: #ecfdf5; }
  .Promo_card_b7k { padding: 8px; background: #fef3c7; }
  .Promo_hot_c2m { font-weight: 700; color: #b91c1c; }
</style>
<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const Card = { card: 'Card_card_a1x' };   // Card.module.css-এর ম্যাপ
const Promo = { card: 'Promo_card_b7k', hot: 'Promo_hot_c2m' };

function cx(...args) {                    // ছোট্ট clsx
  const out = [];
  for (const a of args) {
    if (typeof a === 'string' && a) out.push(a);
    else if (a && typeof a === 'object')
      for (const k in a) if (a[k]) out.push(k);
  }
  return out.join(' ');
}
function App() {
  const [hot, setHot] = useState(false);
  const cls = cx(Promo.card, false && 'hidden', { [Promo.hot]: hot });
  console.log('class:', cls);
  return (<><p className={Card.card}>চাল ৫ কেজি</p>
    <button className={cls} onClick={() => setHot(!hot)}>অফার</button></>);
}
createRoot(document.getElementById('root')).render(<App />);
</script>

৩ · Tailwind v4 — দর্জির মাপের বদলে তৈরি টুকরো, আর সত্যিকারের build

Plain CSS যেন প্রতিটি জামার জন্য দর্জিকে নতুন করে মাপ দেওয়া। Utility-first ধারণায় আগে থেকে ছোট ছোট টুকরো তৈরি থাকে: p-4 মানে চারদিকে ফাঁকা, text-lg মানে একটু বড় লেখা। আপনি নতুন নাম না ভেবে টুকরোগুলো জোড়া দেন। তুলনা আর Bootstrap-এর সাথে পার্থক্য আছে CSS framework পর্বে। এখানে আমরা React project-এ বসিয়ে দেখব।

লেখার সময়ে npm-এ tailwindcss ৪.৩.৩, vite ৮.৩.৫, react ১৯.৩.১. Tailwind-এর docs অনুযায়ী সেটআপ মাত্র তিন ধাপ। v4 (২০২৫ সালের জানুয়ারি) থেকে config-এর বড় অংশ CSS-এ চলে এসেছে, tailwind.config.js বাধ্যতামূলক নয়।

npm create vite@latest bazarghar -- --template react-ts
cd bazarghar
npm install
npm install tailwindcss @tailwindcss/vite clsx

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

@import "tailwindcss";

এবার “বাজারঘর”-এর পণ্যের কার্ড:

export function ProductCard({ name, price }: Props) {
  return (
    <article className="rounded-card bg-surface p-4 text-ink shadow dark:shadow-none md:p-6">
      <h3 className="font-bangla text-lg leading-bn font-semibold">{name}</h3>
      <p className="mt-1 text-brand-700 dark:text-brand-400">৳ {price}</p>
      <Button className="mt-3 w-full">কার্টে যোগ</Button>
    </article>
  )
}

এখানে bg-surface বা font-bangla Tailwind-এর নিজের class নয়, আমাদের theme থেকে আসে। অংশ ৮-এ দেখবেন। আগে দেখুন, Tailwind এই লেখা পড়ে CSS বানায় কীভাবে। সে কোনো class-এর তালিকা আগে থেকে পাঠায় না। ধাপে ধাপে দেখুন:

<article className="rounded-card bg-surface p-4
  text-ink shadow dark:shadow-none md:p-6">

article  className  rounded-card  bg-surface
p-4  text-ink  shadow  dark:shadow-none  md:p-6

article    → utility নয়, বাদ
className  → utility নয়, বাদ
p-4        → আছে
md:p-6     → আছে (variant md + p-6)

.p-4{padding:calc(var(--spacing) * 4)}
/* theme-এ --spacing:.25rem */
/* .25rem × 4 = 1rem = 16px */

@media (width>=48rem){
  .md\:p-6{padding:calc(var(--spacing) * 6)}
}

আগে : index-BmBz4Doq.css  11.11 kB
পরে : index-BmBz4Doq.css  11.11 kB
নামের hash একই, মানে ফাইল হুবহু এক

className={`bg-${color}-600 text-white`}
লেখায় “bg-green-600” কোথাও নেই
CSS-এ bg-green-600: 0 বার

সত্যিকারের npm run build (Tailwind ৪.৩.৩, Vite ৮.৩.৫, একটি লোকাল run, ~/bazarghar):

$ npm run build
> tsc -b && vite build
✓ 19 modules transformed.
dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/index-BmBz4Doq.css   11.11 kB │ gzip:  2.96 kB
dist/assets/index-4uBs9cUv.js   221.09 kB │ gzip: 69.38 kB
✓ built in 113ms

শেষ সারিটি মজার। আমাদের CSS-এ .transform আর .filter নিয়ম পাওয়া গেল, অথচ কোনো component-এ এগুলো নেই। Vite-এর template-এর SVG ফাইলে ঐ শব্দ দুটি আছে, স্ক্যানার সেখান থেকে পেয়েছে। এটাই “সাধারণ লেখা” স্ক্যানের প্রমাণ। সাথে এদের সঙ্গী variable-গুলোও এসেছিল। বাদ দিতে পারেন এভাবে:

@import "tailwindcss";
@source not "../public";
@source not "./assets";

একটি হিসাব মনে রাখুন। gzip-এর পর ২.৯৬ kB CSS, আর ঐ একই build-এ JS ৬৯.৩৮ kB. বেশিরভাগ React অ্যাপে bundle-এর ভার JS-এ, তাই CSS ফাইলের সামান্য কমবেশি নিয়ে বেশি ভাবার আগে JS মাপুন। .gitignore-এ থাকা ফাইল, node_modules, ছবির মতো binary ফাইল আর CSS ফাইল স্ক্যান হয় না। কোনো npm প্যাকেজের ভেতরের class লাগলে @source দিয়ে যোগ করতে হয়।

৪ · Utility, variant, theme আর dark mode

Tailwind-এর শক্তি utility-তে যতটা, variant-এ তার চেয়ে বেশি। Variant হলো class-এর আগে বসা শর্ত। মূল CSS জানা থাকলে নিচের সারণি মিলিয়ে নিতে পারবেন। ডান দিকের CSS আমাদের build থেকে নেওয়া, সামান্য ছাঁটা।

দুটি জিনিস খেয়াল করুন। এক, hover: v4-এ @media (hover:hover)-এর ভেতরে থাকে, তাই ফোনে আঙুল ছোঁয়ালে hover আটকে থাকে না। দুই, Tailwind mobile-first: p-4 সব পর্দায়, md:p-6 শুধু বড় থেকে শুরু। md: মানে “শুধু ট্যাবলেট” নয়। Breakpoint-এর ধারণা responsive পর্বে আছে।

Dark mode দুই পথে

ডিফল্টে dark: চলে prefers-color-scheme দিয়ে, অর্থাৎ ব্যবহারকারীর OS-এর পছন্দে। নিজের বোতাম দিয়ে বদলাতে হলে variant-টি নতুন করে লিখতে হয়। ধারণাটি dark mode পর্বে আছে, এখানে Tailwind-এর লেখা:

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

তৈরি CSS ছিল .dark\:text-brand-400:where([data-theme=dark],[data-theme=dark] *). :where()-এর specificity শূন্য, তাই এটি নিয়ম জটিল করে না। তবে প্রতিটি element-এ dark: লেখার চেয়ে ভালো পথ আছে: CSS variable বদলানো। একটি attribute বদলালেই সব রং বদলে যায়, React-কে কিছুই জানাতে হয় না। নিচের ব্লক চালিয়ে বোতামটি দুবার চাপুন।

<style>
  :root { --bg: #ffffff; --ink: #1f2937; --action: #0f766e; --on-action: #ffffff; }
  [data-theme=dark] { --bg: #111827; --ink: #f3f4f6;
                      --action: #2dd4bf; --on-action: #042f2e; }
  .card { background: var(--bg); color: var(--ink); padding: 12px; }
  .btn { background: var(--action); color: var(--on-action);
         padding: 6px 12px; border: 0; border-radius: 8px; }
</style>
<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
let renders = 0;
function toggle() {
  const root = document.documentElement;
  root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
  const bg = getComputedStyle(root).getPropertyValue('--bg').trim();
  console.log(root.dataset.theme, '--bg =', bg, '| renders =', renders);
}
function Card() {
  renders += 1;
  console.log('Card render:', renders);
  return (
    <div className="card">
      <p>মসুর ডাল ১ কেজি</p>
      <button className="btn" onClick={toggle}>থিম বদলান</button>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<Card />);
</script>

Card render: 1
dark --bg = #111827 | renders = 1
light --bg = #ffffff | renders = 1

৫ · clsx, variant ম্যাপ আর class soup-এর ওষুধ

Tailwind-এর সবচেয়ে বড় অভিযোগ class soup: এক লাইনে পনেরো-বিশটি class, পড়া কঠিন। দোকানের হিসাবে যদি প্রতিবার “চাল + ডাল + তেল + লবণ” আলাদা লিখতে হয়, দোকানি একটি “মাসিক প্যাকেট” বানান। লিখতে হয় একবার, ডাকেন নাম ধরে। React-এ সেই প্যাকেট হলো পর্ব ০৯-এর component.

Class-গুলো শর্ত অনুযায়ী জুড়তে clsx লাগে। ছোট একটি function, string, object, array নেয়, মিথ্যা মান বাদ দেয়। আর Tailwind-এর নিয়ম অনুযায়ী পুরো class নাম একটি ম্যাপে রাখতে হয়।

import clsx from 'clsx'
import type { ComponentProps } from 'react'

const variants = {
  primary: 'bg-action text-on-action hover:bg-action-hover',
  ghost: 'bg-transparent text-ink hover:bg-ink/10',
  danger: 'bg-red-700 text-white hover:bg-red-800',
}
const sizes = { sm: 'px-3 py-1 text-sm', md: 'px-4 py-2 text-base' }

type Props = ComponentProps<'button'> & {
  variant?: keyof typeof variants
  size?: keyof typeof sizes
}

export function Button({ variant = 'primary', size = 'md', className, ...rest }: Props) {
  return (
    <button
      className={clsx(
        'rounded-card font-bangla focus-visible:outline-2 focus-visible:outline-offset-2',
        'disabled:opacity-50',
        variants[variant],
        sizes[size],
        className,
      )}
      {...rest}
    />
  )
}

এখন component-এর ব্যবহারকারী শুধু লেখেন <Button variant="danger" size="sm">. কীভাবে সেটি class হয়, ধাপে ধাপে দেখুন। সহজ রাখতে শুরুর class একটিই দেখানো হয়েছে।

1function Button({ variant, size, className }) {2  const v = variants[variant];3  const s = sizes[size];4  const cls = clsx('rounded-card', v, s, className);5  return <button className={cls} />;6}

এবার একই ধারণা আপনার হাতে। Live block-এ Tailwind নেই, তাই ওপরে হাতে লেখা কয়েকটি ছোট class রাখা হয়েছে। variant বদলে দেখুন, আর Tab চেপে বোতামের focus দাগ দেখুন।

<style>
  .btn { border: 0; border-radius: 8px; margin: 4px; }
  .btn:focus-visible { outline: 2px solid #1f2937; outline-offset: 2px; }
  .btn:disabled { opacity: .5; }
  .sm { padding: 4px 12px; } .md { padding: 8px 16px; }
  .action { background: #0f766e; color: #fff; }
  .ghost { background: transparent; color: #1f2937; }
  .danger { background: #b91c1c; color: #fff; }
</style>
<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const variants = { primary: 'action', ghost: 'ghost', danger: 'danger' };
const cx = (...a) => a.filter(Boolean).join(' ');

function Button({ variant = 'primary', size = 'md', className, ...rest }) {
  const cls = cx('btn', variants[variant], size, className);
  console.log(variant, size, '=>', cls);
  return <button className={cls} {...rest} />;
}
function App() {
  return (<>
    <Button>কার্টে যোগ</Button>
    <Button variant="ghost" size="sm">বিস্তারিত</Button>
    <Button variant="danger" className="wide" disabled>বাতিল</Button>
  </>);
}
createRoot(document.getElementById('root')).render(<App />);
</script>

বাইরে থেকে class দিলে কে জেতে?

এখানে একটি গোপন ফাঁদ। Class লেখার ক্রম CSS-এ কিছু ঠিক করে না, ঠিক করে CSS ফাইলের ক্রম। Tailwind নিজের ক্রমে নিয়ম সাজায়। Edge-এ বাজারঘরের Button মেপে পাওয়া গেল (ডিফল্টে px-4, মানে 16px):

<Button className="px-8">  padding-left: 32px   (কাজ করল)
<Button className="px-2">  padding-left: 16px   (কাজ করল না!)

দুটোতেই class-এ শেষে বসেছে, তবু px-2 হেরেছে। কারণ CSS-এ .px-2 আগে, .px-4 পরে। সমাধান tailwind-merge: এটি একই কাজের আগের class ফেলে দেয়। সত্যিকারের run (tailwind-merge ৩.৭.০):

clsx('px-4 py-2', 'px-2')                 → px-4 py-2 px-2
twMerge('px-4 py-2', 'px-2')              → py-2 px-2
twMerge('bg-brand-600 hover:bg-brand-700', 'bg-red-700')
                                          → hover:bg-brand-700 bg-red-700

দুটি প্রচলিত পথ আছে। clsx আর twMerge জুড়ে একটি cn() function, আর variant ম্যাপ লেখার জন্য cva. ছোট project-এ এর কোনোটিই বাধ্যতামূলক নয়। Variant যত বেশি বদলাবে, className খোলা রাখা তত কম দরকার। এমন বাইরের ফাঁকফোকর যত কম, design system তত ঠিক থাকে। পর্ব ০৯-এর boolean prop বিস্ফোরণ এখানেও মনে রাখুন: isRed isBig isGhost-এর বদলে একটি variant.

৬ · CSS-in-JS — সুবিধা, চলার সময়ের খরচ আর Server Component

CSS-in-JS-এ style লেখা হয় JavaScript-এর ভেতরে। Prop অনুযায়ী রং বদলানো খুব সহজ, আর component মুছলে তার style-ও মুছে যায়। ২০১০-এর দশকের শেষে React জগতে এটি খুব জনপ্রিয় ছিল।

import styled from '@emotion/styled'
const Btn = styled.button`background:#0f766e;color:#fff;`

Runtime ধরনের library-তে দাম দিতে হয় তিন জায়গায়। Library-র কোড bundle-এ যায়। Render-এর সময় style হিসাব হয়ে <style>-এ বসে। আর server-rendering-এ style জোগাড় করে HTML-এ ঢোকাতে আলাদা সেটআপ লাগে। একটি বোতামের সবচেয়ে সরল build-এ মাপা ফল আছে অংশ ৭-এর সারণিতে।

তারপর আসে Server Component, যা পর্ব ৫২-এ বিস্তারিত দেখবেন। এখানে একটি কথাই দরকার: Server Component browser-এ চলে না, তাই সেখানে React Context-ও চলে না। Runtime CSS-in-JS library-গুলো theme-এর জন্য সাধারণত Context-এর ওপর নির্ভর করে। AI প্রায়ই বলে “CSS-in-JS Server Component-এ চলে না।” পুরো সত্য কী? Next.js ১৬.৪.৩-এ একই পাতা বানিয়ে সত্যিকারের next build চালানো হলো (আউটপুট ছাঁটা):

# @emotion/styled 11.14.1, 'use client' ছাড়া
Collecting page data using 4 workers ...
Error: Failed to collect configuration for /
  [cause]: TypeError: g.createContext is not a function
> Build error occurred

# একই ফাইলের প্রথমে 'use client' যোগ করে
✓ Generating static pages using 4 workers (3/3)
○  (Static)  prerendered as static content

# styled-components 6.6.0, 'use client' ছাড়া
✓ Generating static pages using 4 workers (3/3)
○  (Static)  prerendered as static content

অর্থাৎ ছবিটি এক রকম নয়। Emotion-এর এই পাতা Client Component হলে তবেই build হলো। styled-components v6 Server Component-এ build হলো, আর তৈরি HTML-এ দেখা গেল <style data-styled="">.dLCdml{background:#0f766e;color:#fff;}</style>. এটি একটি ছোট পরীক্ষা, সব feature-এর প্রমাণ নয়। Library বদলায়, তাই নিজের version-এ চালিয়ে দেখুন।

২০২৫ সালের মার্চে styled-components-এর maintainer প্রকল্পটিকে maintenance mode-এ নেওয়ার ঘোষণা দেন, নতুন project-এ না নেওয়ার পরামর্শসহ। পরে নতুন release এসেছে, তাই অবস্থা দেখে নিতে হয়। এর পাশে zero-runtime পথও আছে: Next.js-এর docs vanilla-extract, Panda CSS আর StyleX-এর নাম তালিকায় রেখেছে। এগুলো JS-এর মতো করে style লিখতে দিলেও মূল কাজ build-এর সময় করার দিকে যায়। নতুন project-এ অনেক দল এখন CSS Modules বা Tailwind বেছে নেন, তবে পুরোনো CSS-in-JS codebase তাড়াহুড়ো করে পাল্টানোর যুক্তি কম। আগে মাপুন।

৭ · Component library — headless, styled আর কপি করা কোড

Dialog, dropdown, tab বানানো শুনতে সহজ, আসলে কঠিন। একটি Dialog-কে Esc-এ বন্ধ হতে হয়। Focus ভেতরে আটকে রাখতে হয়, বন্ধ হলে আগের জায়গায় ফেরাতে হয়। Screen reader-কে ARIA দিয়ে জানাতে হয়। এই কাজগুলো হাতে লিখলে সাধারণত ভুল থাকে। তাই component library. নতুন বাড়ি তোলার তিন উপায় ভাবুন: শুধু কাঠামো ঢালাই করা ঘর কেনা, পুরো সাজানো ফ্ল্যাট কেনা, অথবা নকশাসহ মিস্ত্রি ডেকে নিজের জমিতে বানানো।

Bundle-এ দাম কত? একই React-এ প্রতিটি আলাদা Vite build, সবচেয়ে ছোট ব্যবহার। এটি একটি লোকাল run, সাধারণ নিয়ম নয়। Library-র বেশি অংশ ব্যবহার করলে খরচ বাড়ে, আর একবার দাম দিলে পরের component কম লাগে। Headless দুটিতে style একদম ছিল না, সেটি আলাদা।

হিসাব: MUI বোতামের বাড়তি ৩৫.৮৯ kB নামাতে কত সময়? ধরা যাক গতি ১ Mbps, এটি অনুমান করা মান। ৩৫.৮৯ × ৮ = ২৮৭.১২ kilobit. ২৮৭.১২ ÷ ১০০০ ≈ ০.২৯ সেকেন্ড। ৫ Mbps ধরলে ≈ ০.০৬ সেকেন্ড। এটি শুধু নামানোর সময়, JS parse আর চালানোর সময় আলাদা। এই সংখ্যা MUI-কে খারাপ প্রমাণ করে না। অনেক screen-এর admin panel-এ MUI কয়েক সপ্তাহের কাজ বাঁচাতে পারে, সেখানে এই দাম ন্যায্য। খোলা দোকানের প্রথম পাতায় হিসাব আলাদা হতে পারে।

shadcn/ui-এর সত্যিকারের run

লেখার সময়ে CLI ৪.২৩.০. একটি কপি project-এ চালানো হলো। লক্ষ্য করুন, এটি node_modules নয়, আপনার src-এ ফাইল লেখে:

$ npx shadcn@latest init -t vite -b base -p nova --no-monorepo -y
✔ Writing components.json.
✔ Installing dependencies.
✔ Created 2 files:
  - src\components\ui\button.tsx
  - src\lib\utils.ts
✔ Updating src\index.css

$ npx shadcn@latest add button dialog -y
✔ Created 1 file:
  - src\components\ui\dialog.tsx

$ wc -l src/components/ui/*
   57 src/components/ui/button.tsx
  158 src/components/ui/dialog.tsx

তৈরি button.tsx-এর প্রথম লাইনগুলোতে ছিল @base-ui/react/button আর cva. অর্থাৎ অংশ ৫-এর ধারণাই, অনেক বেশি variant-সহ। সাথে package.json-এ lucide-react, tw-animate-css, একটি font প্যাকেজ আর cn-সহ কয়েকটি dependency যোগ হলো। Changelog অনুযায়ী এখন Radix আর Base UI দুটোই বেছে নেওয়া যায়, Base UI ২০২৬ সালে ডিফল্টের দিকে গেছে। এই তথ্য দ্রুত বদলায়, তাই docs দেখে নিন।

কোনো একটি সব জায়গায় সেরা নয়, এখানে সমাজে মতভেদও আছে। সিদ্ধান্তের একটি সহজ ক্রম: ডিজাইনার আর নিজের ব্র্যান্ড জরুরি হলে headless. ভেতরের admin টুলে styled. Tailwind-ভিত্তিক অ্যাপ আর কোড পড়তে পারা দল থাকলে কপি করা পথ ভেবে দেখুন।

৮ · Design token আর বাজারঘরের ছোট design system

বাজারঘরের সবুজটি যদি ৪০টি ফাইলে #0f766e হয়ে লেখা থাকে, রং বদলানো মানে ৪০টি ফাইল ঘাঁটা। ব্যাংকের রেট বোর্ড ভাবুন: সব শাখা এক জায়গার রেট দেখায়, প্রতিটি শাখা আলাদা করে হিসাব করে না। Design token তেমন নাম-দেওয়া একটি নকশার সিদ্ধান্ত: রং, ফাঁকা, ফন্ট, কোণের বাঁক। Design system এর ওপরে বসানো component আর নিয়মের সংগ্রহ।

Tailwind v4-এ token লেখা হয় @theme-এ। Variable-এর নামের প্রথম অংশ (--color-*, --font-*, --radius-*, --leading-*) ঠিক করে কোন utility তৈরি হবে। বাজারঘরের আসল ফাইল, যা ওপরের সব run-এ চলেছে:

@import "tailwindcss";

/* dark: চলবে <html data-theme="dark"> থাকলে */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* ধাপ ১: কাঁচা মান (primitive token) */
@theme {
  --color-brand-400: #2dd4bf;
  --color-brand-600: #0f766e;
  --color-brand-700: #115e59;
  --font-bangla: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  --radius-card: 0.75rem;
  --leading-bn: 1.7;
}

/* ধাপ ২: অর্থ (semantic token), utility বানায় */
@theme inline {
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-action: var(--action);
  --color-action-hover: var(--action-hover);
  --color-on-action: var(--on-action);
}

/* ধাপ ৩: থিম অনুযায়ী মান */
:root {
  --surface: #ffffff; --ink: #1f2937;
  --action: var(--color-brand-600);
  --action-hover: var(--color-brand-700);
  --on-action: #ffffff;
}
[data-theme=dark] {
  --surface: #111827; --ink: #f3f4f6;
  --action: var(--color-brand-400);
  --action-hover: #5eead4;
  --on-action: #042f2e;
}

@theme utility বানায়, :root বানায় না, সে কারণেই দুটি আলাদা। inline থাকলে utility সরাসরি var(--action) ব্যবহার করে, তাই পাতার যেকোনো অংশে data-theme বসালেও সেখানকার মানই কাজ করে। এবার একটি token-এর যাত্রা দেখুন:

--color-brand-600: #0f766e;

--action: var(--color-brand-600);
--on-action: #ffffff;

.bg-action{background-color:var(--action)}

primary: 'bg-action text-on-action
          hover:bg-action-hover'

background-color: rgb(15, 118, 110)
color:            rgb(255, 255, 255)

background-color: rgb(45, 212, 191)
color:            rgb(4, 47, 46)

বাজারঘরের ছোট নিয়মপত্র এটুকুই: কাঁচা hex শুধু index.css-এ। পাতা শুধু component ডাকে। Variant হিসেবে primary, ghost, danger, মাপ sm, md. প্রতিটি রং জোড়া contrast মাপা। ছোট দলের জন্য এই একটি ফাইলই design system-এর শুরু, বড় ডকুমেন্টেশন সাইট নয়। Figma-র মতো টুল আর code-এর মধ্যে token ভাগ করতে একটি সাধারণ ফরম্যাট আছে: Design Tokens Community Group-এর প্রথম স্থির সংস্করণ এসেছে ২০২৫ সালের অক্টোবরে।

৯ · বাংলা UI আর accessibility — font, line height, focus, contrast

ইংরেজির জন্য বানানো design system বাংলায় হুবহু খাটে না। বাংলা অক্ষরের ওপরে মাত্রা, নিচে উ-কার, ঋ-কার আর যুক্তাক্ষর থাকে। Tailwind-এর text-sm-এর সঙ্গী line height প্রায় ১.৪৩ (calc(1.25 / .875)), text-base-এর ১.৫, আর text-2xl-এর প্রায় ১.৩৩. ইংরেজিতে ঠিক দেখায়, বাংলায় লাইন গায়ে গায়ে লেগে যায়। ভিত্তি আছে ওয়েবে বাংলা পর্বে, UI-এর জন্য কয়েকটি কাজের নিয়ম:

• Line height: মূল লেখায় ১.৬ থেকে ১.৮. তাই আমাদের --leading-bn: 1.7 আর leading-bn. বোতাম আর ছোট লেবেলেও একবার চোখে দেখে নিন।
• Font: --font-bangla-এ একটি fallback তালিকা রাখুন। font-display: swap আর শুধু bengali subset নিলে দেরি আর লাফানো কমে। বিস্তারিত পর্ব ৫৯-এ।
• মাপ: text-xs বাংলায় প্রায়ই পড়া কঠিন। একই px-এ বাংলা ইংরেজির চেয়ে ঘন দেখায়।
• Letter spacing আর italic: ইংরেজি শিরোনামের tracking-wide বা italic অভ্যাস বাংলায় আনবেন না। ফাঁক দিলে মাত্রা ভেঙে দেখায়।
• Button height: h-8-এর মতো স্থির উচ্চতায় দুই লাইনের বাংলা কেটে যেতে পারে। Padding দিয়ে উচ্চতা হতে দিন। আমাদের Button তাই করে।

Focus — keyboard-এর পথ

অনেকে মাউস ব্যবহার করেন না। তাঁদের একমাত্র পথনির্দেশ focus-এর দাগ। WCAG ২.২-এর 2.4.7 বলে, keyboard focus-এর চিহ্ন দেখা যেতে হবে। AI প্রায়ই outline-none লেখে “সুন্দর দেখানোর” জন্য, পাশে বদলি কিছু দেয় না। নিয়ম হলো focus-visible দিয়ে বদলি দাগ রাখা, যেমন আমাদের focus-visible:outline-2 focus-visible:outline-offset-2. ধারণাটি অ্যাক্সেসিবল CSS পর্বে আছে। বোতাম হলে <div onClick> নয়, আসল <button> লিখুন।

Contrast ratio — হাতে হিসাব

লেখা আর পটের আলোর পার্থক্য মাপে contrast ratio. WCAG-এর AA স্তরে সাধারণ লেখার জন্য অন্তত 4.5:1, বড় লেখা (১৮pt, বা ১৪pt মোটা) আর বোতামের সীমার মতো UI অংশে অন্তত 3:1. সূত্র:

L হলো relative luminance. প্রতিটি চ্যানেল c = মান ÷ 255. c ≤ 0.04045 হলে c ÷ 12.92, নইলে ((c + 0.055) ÷ 1.055)^2.4. তারপর L = 0.2126R + 0.7152G + 0.0722B. চোখ সবুজে সবচেয়ে সংবেদনশীল, তাই G-এর ভাগ সবচেয়ে বড়।

উদাহরণ: সাদার ওপর #0f766e, মানে rgb(15, 118, 110). রূপান্তরের পর R = 0.0048, G = 0.1812, B = 0.1559. তাহলে L = 0.2126 × 0.0048 + 0.7152 × 0.1812 + 0.0722 × 0.1559 = 0.0010 + 0.1296 + 0.0113 = 0.1418. সাদার L = 1. Contrast = 1.05 ÷ 0.1918 ≈ 5.47. সাধারণ লেখায় 4.5 পার হলো। নিচের calculator-এ এটি মিলিয়ে নিন, আর নিজের রং বসান।

// WCAG 2.2: sRGB মান থেকে relative luminance
function channel(v) {
  const c = v / 255;
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}
function luminance(hex) {
  const n = parseInt(hex.slice(1), 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
}
function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}
const pairs = [
  ['#ffffff', '#0f766e', 'light বোতাম'],
  ['#042f2e', '#2dd4bf', 'dark বোতাম'],
  ['#ffffff', '#2dd4bf', 'ভুল: dark-এ সাদা লেখা'],
  ['#9ca3af', '#ffffff', 'সাদা পটে হালকা ধূসর'],
  ['#0f766e', '#111827', 'light-এর রং dark পটে'],
];
for (const [fg, bg, label] of pairs) {
  const r = contrast(fg, bg);
  const verdict = r >= 4.5 ? 'AA pass' : r >= 3 ? 'large only' : 'fail';
  console.log(r.toFixed(2), verdict, '-', label);
}

১০ · AI-এর যুগে — Tailwind-এর পুরোনো স্মৃতি আর সুন্দর কিন্তু ভুল UI

Styling-এ AI খুব দ্রুত, আর ফলও দেখতে সুন্দর। বিপদ সেখানেই: চোখে ঠিক লাগে, কিন্তু কী ভেঙেছে তা পর্দায় দেখা যায় না। আমরা AI-এর একটি প্রচলিত ভুল সত্যিই চালিয়ে দেখলাম। v4 project-এ v3-এর দুটি নির্দেশ:

$ npx --no-install tailwindcss init
npm error could not determine executable to run

# index.css-এ @tailwind base; @tailwind components; @tailwind utilities;
$ npx vite build
dist/assets/index-BPih_y-5.css    3.93 kB │ gzip:  0.89 kB
✓ built
# CSS-এ .p-4 নেই, .bg-action নেই। .grid আর .mx-auto আছে।

দ্বিতীয়টি ভয়ংকর। Build সফল, error নেই, CSS ১১.১১ থেকে ৩.৯৩ kB-এ নেমেছে। Theme না আসায় theme-নির্ভর class হারিয়ে গেছে। AI-কে “ঠিক আছে তো?” জিজ্ঞেস করলে সে হয়তো “হ্যাঁ” বলবে। ধরা পড়ে শুধু চোখে দেখে আর CSS-এর আকার মেপে।

AI-এর লেখা UI হাতে পেলে — যাচাইয়ের চেকলিস্ট

• package.json-এ Tailwind-এর version দেখে সেই version-এর docs-এর সাথে সেটআপ মিলিয়েছি
• npm run build চালিয়ে CSS-এর আকার দেখেছি, নতুন class তৈরি CSS-এ আছে
• Diff পড়ে দেখেছি কোনো অপ্রয়োজনীয় dependency আসেনি, প্যাকেজের নাম npm-এ সত্যি আছে
• মাউস ছাড়া Tab, Enter, Esc দিয়ে পুরো কাজটি করতে পেরেছি, focus-এর দাগ দেখা যায়
• Light আর dark দুই থিমে প্রতিটি রং জোড়ার contrast মেপেছি
• ৩২০px ফোন-চওড়ায় লম্বা বাংলা লেখা দিয়ে দেখেছি, কিছু কাটছে না