Tailwind CSS তাদের নতুন v4.0 beta ভার্শন রিলিজ দিয়ে দিয়েছে আজকে অর্থাৎ (২২ নভেম্বরে)। তাদের কথা অনুযায়ী এই ভার্শনে তারা Performance এর দিকে অনেক নজর দিয়েছে এবং Modern Web অনুসারে ডিজাইন নিয়ে system রেখেছে। তাহলে চলুন জেনে নেই এই নতুন ভার্শনে Tailwind CSS নতুন কি কি নিয়ে এসেছে এবং কি কি মডিফাই করেছে!
Tailwind CSS v4.0 beta changing key points:
তারা বলছে যে আগের ভার্শনের চেয়ে এই ভার্শনে (v4.0) তে নতুন build গুলো 5x faster হয়েছে এবং আপনি যখন ক্রমবর্ধমান build করবেন তখন 100x বা তার চেয়েও বেশি faster হবে।
তারা এখন থেকে built-in ভাবে import, prefix, syntax transforms এগুলা হ্যান্ডল করবে without কোনো প্যাকেজ ( ব্যাপারটা মজার না? )।
এটা আমার কাছে অনেক ভালো লেগেছে, যে এখন Tailwind configuration সরাসরি CSS ফাইল থেকে করা যাবে। মানে এখন আর আমাদের
tailwind.config.jsফাইলে গিয়ে configuration করতে হবে না আমরা ডিরেক্ট CSS ফাইলের মধ্যে configuration করতে পারব, তার জন্য আমাদের@import "tailwindcss";এভাবে Tailwind CSS কে import করে নিতে হবে। এই বিষয়ে আরো ভালভাবে জানতে এই লিঙ্কে ভিজিট করতে পারেন (https://tailwindcss.com/docs/v4-beta#css-configuration-in-depth)modern web এর কথা চিন্তা করে তারা এই ভার্শনে CSS এর native cascade layers, popover, container queries এবং আর অনেক কিছু রেখেছে ( নিচে আলোচনা হবে এগুলা নিয়ে )।
| v3.4 | v4.0 Beta | Improvement | |
| Full build | 378ms | 100ms | 3.78x |
| Incremental rebuild with new CSS | 44ms | 5ms | 8.8x |
| Incremental rebuild with no new CSS | 35ms | 192µs | 182x |
Move to the changes:
Dynamic Spacing Scale:
এই ভার্শনে Tailwind CSS আমাদের —spacing নামে একটা ভারিয়েবল দিচ্ছে এটা হচ্ছে একটা global value যা আমাদের স্পেসিং ব্যবহার হবে ( pt, mt, mb, w- etc) এইগুলাতে। এটা আমাদের CSS configuration এর theme এর মধ্যে থাকবে এভাবে,
@theme {
--spacing: 0.25rem;
}
এখন এখানে spacing এর value যত দিবো আমরা ততো default value হিসেবে যুক্ত হবে আমাদের spacing scale এ।
কিন্তু আপনি চাইলে এই —spacing variable disabled করে নিজের মতো করে variable ডিফাইন করতে পারবেন এভাবে,
@theme {
--spacing: initial
--spacing-1: 0.25rem
--spacing-2: 0.5rem
--spacing-4: 1rem
--spacing-8: 2rem
--spacing-12: 3rem
}
Modernized P3 Color Palette:
এই ভার্শনে তারা color palette কে rgb থেকে oklch এ transfer করেছে। এটা আর বেশি কিছু না শুধু sRGB থেকে এখন ওরা oklch color code এ নিয়ে গেছে এবং সব color সেইম রাখার try করেছে যাতে করে আগের ভার্শনের কোনো প্রজেক্টে সমস্যা না হয়।
Simplified Variable Colors:
এখন থেকে আপনি যখন color এর জন্য variable তৈরি করবেন তখন আপনাকে কোনো opacity ডিফাইন করা লাগবে না কারণ এখন এই কাজটা Tailwind CSS auto করে নিবে আপনি যখন variable ব্যাবহার করার সময় bg-primary/50 এভাবে দিবেন, এখানে /50 হচ্ছে আপনার opacity value. এখানে আপনি 10, 20….100 পর্যন্ত দিতে পারবেন।
Container Query Support:
এটা অনেক হেল্পফুল হবে সবার জন্য আমার মনে হয়। Tailwind CSS v4.0 তে @container-quries নিয়ে আসছে। তো এখন আর আমাদের এটা ব্যবহার করার জন্য কোনো plugin ব্যবহার করা লাগবে না ( আগে কিন্তু এটা ব্যাবহার করার জন্য plugin ব্যবহার করা লাগতো )। এবং তারা কিন্তু এই ভার্শনে max-width সাপোর্ট নিয়ে আসছে, আগে শুধু ছিলো min-width । এটা কিন্তু কাজ করবে সেইম breakpoint এ যেটা min-width এ ছিলো।
আমরা চাইলে শুধু max-width ব্যবহার করতে পারি এভাবে,
<div class="@container">
<div class="grid grid-cols-3 @max-md:grid-cols-1">
<!-- ... -->
</div>
</div>
অথবা আমরা কিন্তু min-width এবং max-width একসাথে ব্যবহার করতে পারবো এভাবে,
<div class="@container">
<div class="flex @min-md:@max-xl:hidden">
<!-- ... -->
</div>
</div>
বিষয়টি আমার কাছে অনেক ভাল লেগেছে। কারণ অনেকেই এই min-width মানে আগের রেস্পন্সিভ breakpoint ব্যবহার করতে গিয়ে অনেক প্যারা খেতেন কারণ v3.0 তে রেস্পন্সিভ কাজ করতো min-width তে। আশা করছি এইবার আর প্যারা খেতে হবে না।
3D Transforms:
তারা এই ভার্শনে 3d transforms এর জন্য API ব্যবহার করেছে এবং আমরা এখন rotate-x-*, rotate-y-*, scale-z-*, translate-z-* etc এগুলা ব্যবহার করে 3d transforms তৈরি করতে পারবো।
3d transforms তৈরি করতে আমাদের আগে transform এর স্টাইল বলে দিতে হবে যে এটা 3d হতে হবে এভাবে transform-3d এতে করে 3d transform এর utility enable হবে। এবং একটা 3d transform বানানোর জন্য এভাবে CSS লিখতে পারি,
<div class="perspective-distant">
<article class="... transform-3d rotate-x-51 rotate-z-43 shadow-xl transition-all duration-500 hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38 hover:shadow-2xl">
<!-- ... -->
</article>
</div>
rotate-x-*, rotate-y-*, rotate-z-*, translate-z-*, scale-z-* etc এগুলার value সম্পর্কে বিস্তারিত জানতে আপনি Tailwind CSS এর এই অফিশিয়াল docs ভিজিট করতে পারেন - https://tailwindcss.com/docs/v4-beta#3-d-transforms
Linear Gradient Angles:
এই ভার্শনে তারা Linear gradient এর angles ডিফাইন করে দেওয়ার অপশন দিয়েছে যাতে আমরা বলতে পারি যে আমাদের Linear gradient কতো degree angle থেকে তৈরি হবে।
এবং আরেকটা বিষয় আমরা আগে background gradient করার জন্য bg-gradient- ব্যাবহার করতাম কিন্তু v4.0 তে এটা তারা short করে bg-linear- করে ফেলেছে। তো আমাদের এখন background-gradient করতে হলে এভাবে লিখতে হবে,
<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>
Conic And Radial Gradients:
এই ভার্শনে Tailwind CSS নতুন ২টি gradient style নিয়ে এসেছে bg-conic-* and bg-radial-* ।
আমরা আগে যেরকম ভাবে gradient তৈরি করতাম সেইরকম ভাবেই এই style এর gradient গুলো তৈরি করতে পারব। যেমনঃ আমরা from-, via-, to- এইগুলা ব্যাবহার করতে পারব bg-conic-* and bg-radial-* এর মধ্যে ঠিক আগের মতো করে।
Inset Shadows And Rings:
এই ভার্শনে তারা নতুন inset-shadow-* and inset-ring-* এর সাথে পরিচিত করেছে। এখন আমরা চাইলে ৪টি লেয়ারের shadow ব্যবহার করতে পারব একসাথে।
এইগুলা ব্যাবহার করার জন্য আমরা এভাবে কোড লিখতে পারি,
<button class="shadow-md inset-shadow-sm inset-shadow-white/20 ring ring-blue-600 inset-ring inset-ring-white/15 ...">
<!-- ... -->
</button>
inset-ring-* যেকোনো width value support করবে ring- মতো। কিন্তু inset-shadow-* যেকোনো width value support করবে না এখন শুধুমাত্র ডিফাইন করা গুলা করবে যেমনঃ 2xs, xs, and sm এই সাইজগুলো সাপোর্ট করবে।
Field-Sizing Utilities:
এখানে তারা নতুন একটি প্রপার্টি এর সাথে পরিচয় করিয়েছে field-sizing। যেটির মাধ্যমে আমরা textarea কে কন্ট্রোল করতে পারব যেমনঃ আমরা যদি field-sizing-content দেই তাহলে textarea auto resizing হবে মানে auto height বাড়বে তার কন্টেন্টের উপর ভিত্তি করে আর যদি আমরা field-sizing-fixed দেই তাহলে একটা fixed size এ থাকবে textarea।
color-scheme Utilities:
আমরা যখন একটা ওয়েবসাইটে light mood and dark mood ব্যবহার করি তখন একটা সমস্যা দেখা দেয় আমাদের scrollbar এর ক্ষেত্রে, যে আমরা যখন dark mood এ চলে যাই তখন আমাদের পুরো ওয়েবসাইট dark হয়ে যায় কিন্তু আমাদের যেখানে যেখানে scrollbar রয়েছে সেখানে সেই scrollbar light mood এ রয়েছে।
তো এই সমস্যার সমাধান করার জন্য তারা এই ভার্শনে color-scheme নামে একটা প্রপার্টি নিয়ে এসেছে। যেটা আমাদের ব্যবহার করার জন্য প্রথমে আমাদের প্রজেক্টের html ফাইলের মধ্যে যে body রয়েছে সেখানে scheme-light dark:scheme-dark এই ২টি জিনিস যুক্ত করে দিতে হবে এবং এইটা করার পর আমাদের যেখানে যেখানে scrollbar তৈরি হবে এমন জায়গা রয়েছে সেইখানে গিয়ে scheme-dark এবং scheme-light class টি যুক্ত করে দিব তাতে করে Tailwind CSS auto আমাদের scrollbar কে light mood এ light রাখবে এবং dark mood এ dark রাখবে।
<div class="grid grid-cols-2">
<div class="bg-white overflow-y-scroll scheme-light">
...
</div>
<div class="bg-slate-800 overflow-y-scroll scheme-dark">
...
</div>
</div>
@starting-style Variant:
নতুন starting variant যুক্ত হয়েছে এই ভার্শনে যাতে করে CSS @starting-style feature যুক্ত হতে পারে। একটা example দেখে নেই প্রথমেঃ
<div>
<button popovertarget="my-popover">Check for updates</button>
<div popover id="my-popover" class="opacity-0 transition-all duration-500 transition-discrete open:opacity-100 starting:open:opacity-0">
<!-- ... -->
</div>
</div>
starting ব্যাবহার করে আপনি একটি element কখন visible হচ্ছে সেটা track করতে পারবেন ।এবং সেই element এ animation যুক্ত করতে পারবেন। যেমনটা উপরের কোডে দেখানো হয়েছে।
not-* Variant:
এটা কিন্তু দারুন হয়েছে যে CSS এর নতুন feature not- এখন Tailwind CSS এ চলে এসেছে। আমরা এভাবে ব্যবহার করতে পারব,
<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
<!-- ... -->
</button>
কিন্তু আরেকটা মজার বিষয় আছে, যে আমরা অনেক সময় দেখি যে কিছু browser এ কিছু CSS কাজ করে না মানে support করে না, তো আমরা এই সমস্যা সমাধান করার জন্য এই not- ব্যবহার করতে পারি with supports- variant এভাবে,
<div class="not-supports-[display:grid]:flex">
<!-- ... -->
</div>
এখানের কোড এভাবে কাজ করবে যে, যেই browser এ grid কাজ করবে না সেই browser এ flex কাজ করব ( যদিও grid কাজ করে সব browser ই। এটা শুধু উদাহরণ এর জন্য )।
Iinert Variant:
নতুন inert variant যুক্ত করেছে Tailwind CSS এর নতুন ভার্শনে। এটার কাজ হচ্ছে যদি কোনো element এ inert attribute থাকে সেটা দ্বারা বুঝায় ওই element এ কোনো interactivity হবে না। যেমনঃ focus, events etc.
আমরা একটি element কে এভাবে inert বানাতে পারি,
<main inert class="inert:opacity-50 inert:blur">
<!-- ... -->
</main>
একটি element কে inert বানাতে হলে সেটায় inert attribute দিতে হবে এবং তারপর আমরা চাইলে Tailwind CSS দিয়ে ওই inert attribute ধরে styling করতে পারবো।
এই inert attribute আমরা ব্যবহার করতে পারি এইরকম কিছু situation এ, যে আমাদের একটা modal আছে এখন যখন ওই modal open হবে তখন আপনি আপনার পুরো ওয়েবসাইট কে inert করে দিতে পারেন শুধুমাত্র ওই modal এ কাজ করবে ইউজার।
nth-* Variants:
Tailwind CSS v4.0 তে CSS এর :nth-child(…), :nth-last-child(…), :nth-of-type(…), and :nth-last-of-type(…) pseudo-classes গুলো নিয়ে আসছে। এভার এগুলো আমরা Tailwind CSS এ ব্যবহার করতে পারব এভাবে,
<div class="nth-3:underline">…</div>
<div class="nth-last-5:underline">…</div>
<div class="nth-of-type-4:underline">…</div>
<div class="nth-last-of-type-6:underline">…</div>
in-* Variant:
আগে parent hover করলে child এ কোনো style করতে গেলে আমাদের group variant যুক্ত করতে হতো আমাদের যে parent রয়েছে তার মধ্যে এবং তারপর আমরা group-hover: এভাবে লিখে child কে styling করতাম।
কিন্তু v4.0 তে আমাদের আর group লিখতে হবে না parent এর মধ্যে কিন্তু still আমরা সেইম কাজ করতে পারব in-* ব্যবহার করে। আচ্ছা নিচের কোড একটু দেখলে আর ভালোভাবে বুঝতে পারবেন,
<!-- old -->
<div tabindex="0" class="group">
<div class="opacity-50 group-focus:opacity-100">
<!-- new in v4.0 -->
<div tabindex="0">
<div class="opacity-50 in-focus:opacity-100">
<!-- ... -->
</div>
</div>
আমরা in-* ব্যাবহার করে still parent এর মধ্যে group না লিখেই সেইম কাজ করতে পারবো এই নতুন ভার্শনে।
এই ছিলো Tailwind CSS v4.0 beta এর changes নিয়ে সংক্ষিপ্ত একটা ব্লগ। কিন্তু কয়েকটা জিনিশ এখানে তুলে ধরা হয় নি আপনি চাইলে ওই বিষয়গুলো Tailwind CSS এর অফিশিয়াল Docs থেকে দেখে নিতে পারেন।
কেমন হয়েছে ব্লগ আপনার মতামত জানাতে ভুলবেন না আর অবশ্যই ব্লগটি শেয়ার করে দিবেন যাতে করে আপনার ডেভেলপার বন্দু এই বিষয়গুলো জানতে পারে এবং নতুন Tailwind CSS v4.0 ব্যবহার করে নিজের কাজ আর দ্রুত করতে পারে।