Tailwind CSS v4 সম্পূর্ণ নির্দেশিকা 2026: নতুন বৈশিষ্ট্য এবং স্থানান্তর

⏱️5 min read · 908 words

Tailwind CSS v4 হল একটি গ্রাউন্ড-আপ রিরাইট যা কনফিগার ফাইল ড্রপ করে, সিএসএস ভেরিয়েবলে অল-ইন যায় এবং একটি মরিচা-চালিত বিল্ড ইঞ্জিন সরবরাহ করে যা Tailwind v3 থেকে 100x দ্রুত। 2026 সালে, Tailwind v4 হল ইউটিলিটি-প্রথম CSS-এর জন্য ডিফল্ট পছন্দ। এই নির্দেশিকাটি নতুন এবং কীভাবে স্থানান্তর করা যায় সবকিছু কভার করে।

📋 Table of Contents

Tailwind v4 এ কি পরিবর্তন হয়েছে
ইনস্টলেশন
@theme এর সাথে কনফিগারেশন
প্রতিক্রিয়াশীল ডিজাইন
ধারক প্রশ্ন (ভি 4-এ অন্তর্নির্মিত)
ডার্ক মোড
v4 এ নতুন ইউটিলিটি
বাস্তব উপাদান উদাহরণ
Tailwind v3 থেকে স্থানান্তর করা
React/Next.js সহ Tailwind v4

Tailwind v4 এ কি পরিবর্তন হয়েছে

No tailwind.config.js— কনফিগারেশন ব্যবহার করে CSS এ চলে যায়@theme
CSS-নেটিভ ডিজাইন টোকেন— সমস্ত মান CSS কাস্টম বৈশিষ্ট্য হিসাবে উন্মুক্ত
নতুন অক্সাইড ইঞ্জিন— বিল্ট ইন মরিচা, 100x দ্রুত, শূন্য-কনফিগ
CSS @importপ্রথম– একক CSS ফাইল আমদানি, কোনো PostCSS কনফিগারেশন প্রয়োজন নেই
ধারক প্রশ্ন অন্তর্নির্মিত– কোন প্লাগইন প্রয়োজন
নতুন 3D রূপান্তর ইউটিলিটি— ঘোরান-x, ঘোরান-y, দৃষ্টিকোণ
রঙ প্যালেট পুনরায় কাজ— ভালো স্বরগ্রামের জন্য oklch-ভিত্তিক রং

ইনস্টলেশন

# Install
npm install tailwindcss @tailwindcss/vite

# Vite config
# vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

# Your main CSS file
# app.css
@import "tailwindcss";

@theme এর সাথে কনফিগারেশন

আর নেইtailwind.config.js– CSS-এ কনফিগার করুন:

/* app.css */
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-brand: oklch(60% 0.25 250);
  --color-brand-dark: oklch(40% 0.25 250);
  --color-surface: oklch(98% 0 0);

  /* Custom fonts */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;

  /* Custom animation */
  --animate-fade-in: fade-in 0.3s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CSS variables automatically available as utilities:
   bg-brand, text-brand, border-brand-dark,
   font-sans, animate-fade-in etc. */

প্রতিক্রিয়াশীল ডিজাইন

<!-- Mobile-first responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="rounded-xl bg-white p-6 shadow-sm">Card</div>
</div>

<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Headline
</h1>

<!-- Show/hide at breakpoints -->
<nav class="hidden md:flex gap-6">Desktop Nav</nav>
<button class="md:hidden">Menu</button>

<!-- Arbitrary breakpoints -->
<div class="[@media(min-width:900px)]:flex">Custom breakpoint</div>

ধারক প্রশ্ন (ভি 4-এ অন্তর্নির্মিত)

<!-- No plugin needed! -->
<div class="@container">
  <div class="@sm:flex @md:grid @md:grid-cols-2 gap-4">
    <!-- Layout changes based on CONTAINER size, not viewport -->
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

ডার্ক মোড

<!-- Auto dark mode (prefers-color-scheme) -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <p class="text-gray-600 dark:text-gray-300">Content</p>
</div>

/* Manual dark mode via data attribute */
@variant dark (&:where([data-theme="dark"] *));

/* Usage: <html data-theme="dark"> */

v4 এ নতুন ইউটিলিটি

<!-- 3D Transforms (new in v4) -->
<div class="perspective-500 rotate-x-12 rotate-y-12">3D Card</div>

<!-- Field sizing (auto-resize textarea) -->
<textarea class="field-sizing-content">
  Auto-resizes as you type
</textarea>

<!-- Color mix utilities -->
<div class="bg-blue-500/50">50% transparent blue</div>

<!-- CSS grid improvements -->
<div class="grid grid-cols-[auto_1fr_auto]">
  <div>Left</div>
  <div>Center (fills space)</div>
  <div>Right</div>
</div>

<!-- Starting style (entry animations) -->
<dialog class="starting:opacity-0 starting:scale-95 transition-all">
  Animates in from invisible
</dialog>

বাস্তব উপাদান উদাহরণ

<!-- Navigation bar -->
<nav class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 items-center justify-between">
      <a href="/" class="text-xl font-bold text-gray-900">TechPulse</a>
      <div class="hidden md:flex items-center gap-6">
        <a href="/blog" class="text-sm text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
        <a href="/about" class="text-sm text-gray-600 hover:text-gray-900 transition-colors">About</a>
        <a href="/contact" class="rounded-full bg-blue-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-blue-700 transition-colors">
          Get Started
        </a>
      </div>
    </div>
  </div>
</nav>

<!-- Card component -->
<article class="group rounded-2xl bg-white shadow-sm hover:shadow-md transition-shadow overflow-hidden">
  <div class="aspect-video overflow-hidden">
    <img src="..." alt="..." class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
  </div>
  <div class="p-6">
    <span class="text-xs font-medium text-blue-600 uppercase tracking-wide">Tutorial</span>
    <h2 class="mt-2 text-xl font-semibold text-gray-900 line-clamp-2">Article Title</h2>
    <p class="mt-2 text-gray-600 text-sm line-clamp-3">Article excerpt text goes here.</p>
    <div class="mt-4 flex items-center gap-3">
      <img src="avatar.jpg" alt="Author" class="size-8 rounded-full">
      <div>
        <p class="text-sm font-medium text-gray-900">Alice Chen</p>
        <p class="text-xs text-gray-500">May 29, 2026</p>
      </div>
    </div>
  </div>
</article>

Tailwind v3 থেকে স্থানান্তর করা

# Run upgrade tool
npx @tailwindcss/upgrade@next

# Changes:
# - tailwind.config.js → @theme in CSS
# - PostCSS config removed
# - @apply still works but prefer utilities
# - theme() fn → use CSS vars directly
# - Some utility names changed (e.g., shadow-sm → shadow-xs)

# Check migration guide at tailwindcss.com/docs/upgrade-guide

React/Next.js সহ Tailwind v4

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const button = cva(
  'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
        ghost: 'hover:bg-gray-100 text-gray-700',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return <button className={cn(button({ variant, size }), className)} {...props} />;
}

Tailwind CSS v4 ঘর্ষণ দূর করে — কোন কনফিগার ফাইল নেই, দ্রুত বিল্ড, CSS-নেটিভ টোকেন। আপনি v3 এ থাকলে আপগ্রেড কোডমড চালান এবং CSS-ভিত্তিক কনফিগারেশনে যান। নতুন প্রকল্পের জন্য, শূন্য-কনফিগার সেটআপের জন্য Vite প্লাগইন সহ প্রথম দিন থেকে v4 ব্যবহার করুন।

🔗 Share this article

X / Twitter Facebook WhatsApp LinkedIn Telegram