Tailwind v4-এর প্রধান পরিবর্তন হলো tailwind.config.js আর নেই। কনফিগারেশন এখন থাকে আপনার সিএসএস ফাইলে।

শুনতে রুচির ব্যাপার মনে হলেও এটি তা নয়। এটি বদলে দেয় আপনার ডিজাইন টোকেন কোথায় থাকে, কীভাবে ব্রাউজারে পৌঁছায়, আর — এই অংশেই মানুষ ধাক্কা খায় — Tailwind কোন ফাইলগুলোতে ক্লাসের নাম খুঁজবে তা কীভাবে ঠিক করে। শেষেরটি ভুল হলে সাইটের কিছু অংশ চুপচাপ স্টাইলহীন হয়ে যায়।

আমরা এই সাইটটি v4-এ সরিয়েছি। মডেলটি, আর ফাঁদটি — দুটোই এখানে।

নতুন মানসিক মডেল

v3: একটি জাভাস্ক্রিপ্ট কনফিগ ফাইল আপনার থিম ঠিক করত। Tailwind সেটি বিল্ডের সময় পড়ে সিএসএস বানাত। আপনার ডিজাইন টোকেন থাকত জাভাস্ক্রিপ্টে, আর কেবল ব্যবহার করা ইউটিলিটিগুলোই ব্রাউজারে যেত।

v4: আপনার সিএসএস ফাইলই কনফিগ। টোকেনগুলো @theme ব্লকের ভেতরে সিএসএস কাস্টম প্রপার্টি হিসেবে ঘোষণা করা হয়, আর সেগুলো সত্যিকারের সিএসএস ভেরিয়েবল হিসেবেই বেরোয়।

css
@import 'tailwindcss';

@theme {
  --color-brand: oklch(0.62 0.19 265);
  --font-display: 'Inter', sans-serif;
  --spacing-gutter: 1.5rem;
}

এটি bg-brand, text-brand, font-display, p-gutter আর বাকিগুলো বানায় — এবং --color-brand-কে রানটাইমে জীবন্ত সিএসএস ভেরিয়েবল হিসেবে রেখে দেয়।

দ্বিতীয় অংশটাই আসল কাজের। v3-তে থিমের মান ছিল কেবল কম্পাইল-টাইমের: রানটাইমে একটি রং বদলাতে হলে সিএসএস আবার বানাতে হতো, নয়তো হাতে করে সমান্তরাল একগুচ্ছ ভেরিয়েবল রাখতে হতো। v4-এ ভেরিয়েবলটি এমনিতেই আছে, তাই রানটাইম থিমিং — কালার পিকার, লাইট/ডার্ক সুইচ, প্রতি টেন্যান্টে আলাদা প্যালেট — আর কোনো বিল্ড ধাপ চায় না।

এই সাইটে সাতটি বদলানো যায় এমন থিম আর একটি লাইট/ডার্ক টগল আছে, আর দুটোই চলে <html>-এ দুটি ভেরিয়েবল বদলে দিয়ে। v3-তে এর মানে ছিল দুই জায়গায় টোকেন রক্ষণাবেক্ষণ। v4-এ জায়গা একটিই।

আসলে কী বদলেছে

@theme কনফিগ অবজেক্টের জায়গা নিয়েছে। ডিজাইন টোকেন এখন সিএসএস ভেরিয়েবল।

@source content-এর জায়গা নিয়েছে। এটি Tailwind-কে বলে কোন ফাইলগুলো স্ক্যান করতে হবে। এখন স্বয়ংক্রিয় শনাক্তকরণ আছে, যা সাধারণ একক-অ্যাপ প্রকল্পে কাজ করে — আর অন্য যেকোনো কিছুতে ঠিক এখান থেকেই ঝামেলা শুরু। নিচে দেখুন।

@custom-variant ভ্যারিয়েন্ট প্লাগইনের জায়গা নিয়েছে। ক্লাস-ভিত্তিক ডার্ক মোড এখন এক লাইন:

css
@custom-variant dark (&:where(.dark, .dark *));

@utility কাস্টম ইউটিলিটির জন্য প্লাগইন এপিআইয়ের জায়গা নিয়েছে।

নেটিভ ক্যাসকেড লেয়ার, তাই Tailwind-এর নিজের লেয়ারগুলো আর অপ্রত্যাশিতভাবে আপনার সিএসএসের সঙ্গে লড়ে না।

দ্রুততর ইঞ্জিন। পূর্ণ বিল্ড কয়েক গুণ দ্রুত আর ইনক্রিমেন্টাল রিবিল্ড প্রায় তাৎক্ষণিক। বড় প্রকল্পে এই পরিবর্তনটাই আপনি প্রতি ঘণ্টায় টের পান।

ডিফল্টে আধুনিক রং। ডিফল্ট প্যালেট OKLCH-এ সরেছে, যা আধুনিক ডিসপ্লেতে আরও উজ্জ্বল রং দেয়। আপনার পুরোনো হেক্স মান এখনো চলে — তবে v3-তে যে প্যালেট ভারসাম্যপূর্ণ লাগত, নতুন ডিফল্টগুলোর পাশে সেটি একটু আলাদা লাগতে পারে।

@source-এর ফাঁদ

এটির পেছনে আমাদের একটা বিকেল গেছে, আর এ কারণেই এই লেখাটির অস্তিত্ব।

@source গ্লোবগুলো রিজলভ হয় সিএসএস ফাইলের সাপেক্ষে, প্রকল্পের রুটের সাপেক্ষে নয়। একক-অ্যাপ প্রকল্পে স্বয়ংক্রিয় শনাক্তকরণ সবই সামলায় আর আপনি এ নিয়ে কখনো ভাবেনই না। মনোরিপোতে — বা যেখানেই স্টাইলশিটটি সে যে কোডকে স্টাইল করছে তার রুটে বসে না — আপনাকে স্পষ্ট করে লিখতে হবে, আর ভুল হলে সেটি এমনভাবে ব্যর্থ হয় যা মোটেও কনফিগারেশন এররের মতো দেখায় না।

আমাদের স্টাইলশিটটি একটি শেয়ার্ড প্যাকেজে থাকে আর ছয়টি আলাদা অ্যাপ সেটি ইমপোর্ট করে। গ্লোবগুলোকে দুটোতেই পৌঁছাতে হবে:

css
@import 'tailwindcss';

/* এই ফাইলের সাপেক্ষে, প্রকল্পের রুটের সাপেক্ষে নয়। */
@source '../**/*.{js,ts,jsx,tsx}';          /* শেয়ার্ড প্যাকেজ */
@source '../../site/**/*.{js,ts,jsx,tsx}';  /* প্রতিটি অ্যাপ */

এর বদলে @source './components' লিখুন — স্বাভাবিক যেটা মনে আসে — আর সেটি স্টাইলশিটের নিজের ডিরেক্টরির সাপেক্ষে রিজলভ হয়ে কিছুই পায় না, আর Tailwind চুপচাপ ওই ফাইলগুলোর ব্যবহার করা ক্লাসগুলো বানানো বন্ধ করে দেয়।

লক্ষণটা সত্যিই বিভ্রান্তিকর: আপনার পেজের কনটেন্ট ঠিকঠাক দেখায়, আর হেডার, ফুটার ও প্রতিটি শেয়ার্ড কম্পোনেন্ট সম্পূর্ণ স্টাইলহীন রেন্ডার হয়। কোনো এরর নেই। কোনো সতর্কবার্তা নেই। বিল্ড সফল। দেখতে লাগে ভাঙা ইমপোর্ট বা সিএসএস লোড-অর্ডারের সমস্যার মতো, আর আপনি ওই একটি লাইন ছাড়া সব জায়গায় খুঁজবেন।

নিজেকে বাঁচানোর দুটি নিয়ম:

  1. গ্লোবগুলো সিএসএস ফাইলের সাপেক্ষে। লেখার সময় মুখে বলুন।
  2. @source সম্পাদনার পর ডেভ সার্ভার রিস্টার্ট করুন। এগুলো চালু হওয়ার সময় পড়া হয়, আর পুরোনো ওয়াচার আপনাকে বিশ্বাস করাবে যে সমাধানটা কাজ করেনি।

v3 থেকে আপগ্রেড

অফিশিয়াল কোডমড বেশিরভাগটাই সামলায়:

bash
npx @tailwindcss/upgrade@latest

এটি আপনার কনফিগ @theme-এ সরায়, নাম বদলানো ইউটিলিটি হালনাগাদ করে, আর ইমপোর্ট নতুন করে লেখে। যা করে না:

নাম বদলানো ইউটিলিটি। বেশ কয়েকটি বদলেছে। প্রচলিতগুলো:

v3

v4

shadow-sm

shadow-xs

shadow

shadow-sm

rounded-sm

rounded-xs

rounded

rounded-sm

outline-none

outline-hidden

সরে যাওয়াটা লক্ষ করুন: প্রত্যয়হীন পুরোনো নামগুলো এখন সেটাই বোঝায় যা আগে -sm বোঝাত। একটি বাদ পড়লে ছায়াটি অনুপস্থিত হয় না, সূক্ষ্মভাবে আলাদা হয় — যা ধরা আরও কঠিন।

PostCSS ব্যবস্থা। Tailwind এখন নিজেই একটি প্লাগইন আর তার autoprefixer বা postcss-import লাগে না:

js
export default { plugins: { '@tailwindcss/postcss': {} } }

প্লাগইন। v3-র জাভাস্ক্রিপ্ট প্লাগইন এপিআই ব্যবহার করা যেকোনো কিছুর v4-সামঞ্জস্যপূর্ণ ভার্সন লাগবে, নয়তো @utility হিসেবে নতুন করে লিখতে হবে।

ব্রাউজার সমর্থন। v4 লক্ষ্য করে Safari 16.4+, Chrome 111+ আর Firefox 128+, কারণ এটি ক্যাসকেড লেয়ার, @property আর color-mix() ব্যবহার করে। পুরোনো ব্রাউজার সমর্থন করতেই হলে v3.7-এ থাকুন — সত্যিকারের বাধা এটিই।

v4 কোথায় সত্যিকারের উন্নতি

রানটাইম থিমিং তুচ্ছ হয়ে যায়। টোকেনগুলো জীবন্ত সিএসএস ভেরিয়েবল, তাই থিম বদল মানে <html>-এ একটি ক্লাস:

css
:root { --primary: oklch(0.62 0.19 265); }
.theme-teal { --primary: oklch(0.70 0.13 195); }

--primary ব্যবহার করা প্রতিটি ইউটিলিটি সঙ্গে সঙ্গে বদলায় — কোনো রিবিল্ড ছাড়া, আর একটি ক্লাস টগল করা ছাড়া কোনো জাভাস্ক্রিপ্ট ছাড়াই।

ইউটিলিটিতে color-mix()। অপাসিটি ভ্যারিয়েন্ট এখন আপনার ভেরিয়েবলের সঙ্গে মেলে, তাই রানটাইমে বসানো রঙেও bg-primary/10 কাজ করে — যা v3-তে করত না।

টোকেনের একটিই সত্যের উৎস। ডিজাইনাররা সিএসএস ফাইলটাই পড়তে পারেন। একটি জাভাস্ক্রিপ্ট অবজেক্ট আর একটি স্টাইলশিট মিলিয়ে রাখতে কাউকে হয় না।

বিল্ড এত দ্রুত যে খেয়ালই থাকে না।

কোথায় খারাপ

লেনদেনটা নিয়ে সৎ থাকা যাক:

  • জাভাস্ক্রিপ্ট কনফিগারেশন সত্যিই চলে গেছে। থিমের মান প্রোগ্রাম দিয়ে বানাতেন — ধরুন ডিজাইন-টোকেন JSON থেকে ব্র্যান্ড রং টেনে — এমন হলে সেই ধাঁচটা নতুন করে ভাবতে হবে।
  • প্লাগইন ইকোসিস্টেম পিছিয়ে ছিল, যেমনটা মেজর ভার্সন বদলে সবসময়ই হয়।
  • ব্রাউজারের সর্বনিম্ন সীমা বাস্তব। বেশিরভাগ অডিয়েন্সের জন্য এটি ঠিক আছে; কারও কারও জন্য নয়, আর ধরে না নিয়ে নিজের অ্যানালিটিক্স দেখা উচিত।
  • সিএসএসের ভেতরে কনফিগ কম আবিষ্কারযোগ্য। JS অবজেক্টের জন্য এডিটরের অটোকমপ্লিট ভালো ছিল। এখন টোকেনের সংজ্ঞা খুঁজতে হলে জানতে হয় কোন ফাইল খুলতে হবে।

আপগ্রেড করবেন?

হ্যাঁ যদি: নতুন প্রকল্প শুরু করছেন, রানটাইম থিমিং চান, বিল্ডের সময় কষ্ট দিচ্ছে, বা আপনি ইতিমধ্যে v3.4+-এ আছেন আর প্লাগইন কম।

অপেক্ষা করুন যদি: পুরোনো ব্রাউজার সমর্থন করতেই হয়, এমন কোনো প্লাগইনের ওপর নির্ভরশীল যা এখনো সরেনি, বা জাভাস্ক্রিপ্ট থেকে কনফিগ তৈরি করেন।

সাধারণ অ্যাপ্লিকেশনে মাইগ্রেশন একটি বিকেলের কাজ, আর তার বেশিরভাগ সময় যায় নাম বদলানো ইউটিলিটি মেলাতে — নতুন মডেলের সঙ্গে লড়তে নয়। বিকেলটা যদি আপনার খরচ করার মতো না হয়, তাহলে নিজে না করে হাতে তুলে দিতে চাইলে আমরা এই কাজটাই করি।

v4-এর সঙ্গে যে রীতিগুলো নেওয়ার মতো

নতুন মডেল কয়েকটি অভ্যাসের পুরস্কার দেয়, যেগুলো আগে ঐচ্ছিক ছিল।

@theme-এ কাঁচা রং নয়, অর্থবহ টোকেন রাখুন। --color-indigo-600 নয়, --color-primary আর --color-surface ঠিক করুন। তখন ইউটিলিটিগুলো উদ্দেশ্য বোঝায় — bg-primary — আর রিব্র্যান্ডিং মানে প্রতিটি কম্পোনেন্টে খোঁজাখুঁজি নয়, দুই লাইনের পরিবর্তন। ডিজাইন সিস্টেম বরাবরই এই যুক্তিটাই দিয়ে এসেছে; v4-ই প্রথম ভার্সন যেখানে এতে কোনো খরচ নেই।

একক অ্যাপ নয় এমন যেকোনো কিছুতে @source স্পষ্ট করে লিখুন। স্বয়ংক্রিয় শনাক্তকরণ সুবিধাজনক, আর মনোরিপোতে ঠিক এটাই চুপচাপ ব্যর্থ হয়। গ্লোবগুলো লিখে রাখা এক লাইনের কাজ, আর সেটাই পাঁচ মিনিটের সমস্যা আর একটা বিকেলের পার্থক্য।

@utility কম ব্যবহার করুন। এক্সটেনশন এপিআই সহজ হলে ইউটিলিটি বানানোর লোভ হয়। বেশিরভাগ সময় সঠিক বিমূর্তন একটি কম্পোনেন্ট — .btn ইউটিলিটি নয়, একটি Button কম্পোনেন্ট — কারণ কম্পোনেন্ট কাঠামো, অবস্থা আর অ্যাক্সেসিবিলিটি বহন করতে পারে, আর ইউটিলিটি কেবল ঘোষণা।

অপাসিটির কাজটা color-mix()-কে করতে দিন। bg-primary/10 এখন রানটাইমে বসানো ভেরিয়েবলের সঙ্গেও মেলে, তাই হালকা ছোপের জন্য আলাদা টোকেন খুব কমই লাগে। এতে প্রায়-একরকম রঙের সংজ্ঞার একটা গোটা শ্রেণিই বাদ পড়ে যায়।

সিএসএস কনফিগে হাত দিলে ডেভ সার্ভার রিস্টার্ট করুন। @source আর @theme চালু হওয়ার সময় পড়া হয়। একাধিক মানুষ কনফিগ "ঠিক" করে, কোনো পরিবর্তন না দেখে, সেই সংশোধনটাই ফিরিয়ে নিয়ে সম্পূর্ণ অন্য জায়গায় খুঁজতে গেছেন।

এর কোনোটিই বাধ্যতামূলক নয়। সবগুলো মিলে ঠিক করে দেয় v4 কেবল একটা শেষ করা মাইগ্রেশন থাকবে, নাকি এমন একটি ব্যবস্থা হবে যা থেকে আপনি সত্যিই কিছু পাচ্ছেন।

v4 যা বদলায় না

বলা দরকার, কারণ "কনফিগ ফাইল আর নেই" শুনে রিলিজটাকে যতটা বড় মনে হয়, ততটা নয়।

ইউটিলিটিগুলো একই। flex, grid, p-4, text-lg, প্রতিটি রেসপনসিভ ও স্টেট ভ্যারিয়েন্ট — অপরিবর্তিত। ওপরে বলা হাতেগোনা নাম বদল ছাড়া আপনার বিদ্যমান মার্কআপ চলতেই থাকে। এটি একই নাম পরে থাকা নতুন কোনো ফ্রেমওয়ার্ক নয়।

অ্যারবিট্রারি ভ্যালু এখনো চলে। w-[347px], bg-[#1a1a1a], grid-cols-[1fr_2fr] — একই সিনট্যাক্স, একই আচরণ।

মূল সমালোচনাটি এখনো খাটে। v3-তে লম্বা ক্লাস স্ট্রিং অপছন্দ হয়ে থাকলে v4-তেও হবে। সিএসএস-ফার্স্ট কনফিগের কোনো কিছুই সেটির সমাধান করে না, আর করার কথাও ছিল না।

ডায়নামিক ক্লাসের নাম এখনো কাজ করে না। এটি বারবার বলা দরকার, কারণ প্রতিটি ভার্সনেই মানুষ এতে ধরা খান: Tailwind আপনার সোর্স লেখা হিসেবে স্ক্যান করে। কখনো চালায় না। তাই ` bg-${colour}-500 কিছুই বানায় না, কারণ bg-red-500` স্ট্রিংটি স্ক্যানারের খুঁজে পাওয়ার মতো কোথাও থাকেই না। পূর্ণ ক্লাসের নাম লিখুন আর তার মধ্যে থেকে বাছুন:

tsx
const tone = { red: 'bg-red-500', blue: 'bg-blue-500' }[colour]

এই সীমাবদ্ধতা এই কোডবেসেও একবার কামড় বসিয়েছিল — একটি তুলনা টেবিলে, যেটি 'grid-cols-' + count বানাত আর এমন একটি কলাম সংখ্যা দরকার হওয়ামাত্র ভেঙে পড়ত যা আর কোথাও ব্যবহার হয়নি। v4-এ ইঞ্জিন বদলেছে; এটি বদলায়নি।

সচরাচর জিজ্ঞাসা

v4-এ কি এখনো tailwind.config.js লাগে? না। কনফিগারেশন সিএসএসে সরেছে — @theme, @source, @custom-variant আর @utility দিয়ে। সামঞ্জস্যের জন্য JS কনফিগ এখনো সমর্থিত, তবে সেটি উদ্দিষ্ট পথ নয়।

আপগ্রেডের পর আমার শেয়ার্ড কম্পোনেন্ট স্টাইলহীন কেন? প্রায় নিশ্চিতভাবে @source। গ্লোবগুলো প্রকল্পের রুট নয়, সিএসএস ফাইলের সাপেক্ষে রিজলভ হয় — তাই শেয়ার্ড প্যাকেজে থাকা স্টাইলশিটের জন্য প্যাকেজ ও অ্যাপ দুটোতেই পৌঁছানো স্পষ্ট গ্লোব দরকার। ভুল হলে কোনো এরর হয় না — ক্লাসগুলো কেবল তৈরিই হয় না। ঠিক করার পর ডেভ সার্ভার রিস্টার্ট করুন।

Tailwind v4 কি দ্রুত? অনেকটাই। পূর্ণ বিল্ড কয়েক গুণ দ্রুত আর ইনক্রিমেন্টাল রিবিল্ড প্রায় তাৎক্ষণিক। বড় কোডবেসে দৈনন্দিন সবচেয়ে চোখে পড়া পরিবর্তন এটাই।

Tailwind v4-এ কি সিএসএস ভেরিয়েবল ব্যবহার করা যায়? নতুন মডেলের মূলই তো এটি। @theme টোকেনগুলো সত্যিকারের সিএসএস ভেরিয়েবল হিসেবে বেরোয়, তাই রানটাইমে বদলানো যায় আর ইউটিলিটিগুলো নিজে থেকেই সঙ্গে বদলায় — এ কারণেই রানটাইম থিমিং সহজ।

Tailwind v4 কোন ব্রাউজার সমর্থন করে? Safari 16.4+, Chrome 111+, Firefox 128+। এটি ক্যাসকেড লেয়ার, @property আর color-mix()-এর ওপর নির্ভর করে। এর চেয়ে পুরোনো সমর্থন দরকার হলে v3-তেই থাকতে হবে।

মাইগ্রেশন কি কঠিন? সাধারণত একটি বিকেল। npx @tailwindcss/upgrade@latest চালান, নাম বদলানো ইউটিলিটি ঠিক করুন, PostCSS কনফিগ হালনাগাদ করুন, আর প্লাগইনগুলো দেখুন। shadow আর rounded-এর নাম বদলই সবচেয়ে বেশি নজর এড়ায়, কারণ এগুলো ভেঙে না গিয়ে চেহারা সূক্ষ্মভাবে বদলে দেয়।