Tailwind CSS v4: مائیگریشن گائیڈ اور نئی خصوصیات

Tailwind CSS v4 فریم ورک کے شروع ہونے کے بعد سے سب سے اہم دوبارہ لکھنا ہے۔ JavaScript کنفیگریشن فائل ختم ہو گئی ہے — اپنی مرضی کے مطابق خصوصیات کا استعمال کرتے ہوئے CSS فرسٹ کنفیگریشن سے تبدیل ہو گئی ہے۔ کلاس API میں بڑی حد تک کوئی تبدیلی نہیں کی گئی ہے، لیکن انٹرنل بالکل نئے ہیں: ایک زنگ پر مبنی انجن (oxide)، P3 کلر گامٹ کے لیے فرسٹ کلاس سپورٹ، مقامی کنٹینر کے سوالات، اور ایک تعمیراتی پائپ لائن جو پوسٹ سی ایس ایس پلگ ان کے بجائے براہ راست CSS کے ساتھ مربوط ہوتی ہے۔

یہ گائیڈ آپ کو بتاتا ہے کہ کیا بدلا، کیوں بدلا، اور Tailwind v3 سے v4 میں حقیقی پروڈکشن ایپلیکیشن کو کیسے منتقل کیا جائے۔ ہم ان بریکنگ تبدیلیوں کا احاطہ کریں گے جو آپ کو ٹرپ کر دیں گی اور فوری طور پر اپنانے کے لائق نئی خصوصیات کا احاطہ کریں گے۔

اہم ٹیک ویز

• tailwind.config.js فرسودہ ہے — کنفیگریشن @theme ہدایت کا استعمال کرتے ہوئے CSS میں منتقل ہو جاتی ہے
• درآمد کو @tailwind base/components/utilities سے ایک @import "tailwindcss" میں تبدیل کر دیا گیا
• حسب ضرورت رنگ اب --color-* نام کی جگہ کے تحت CSS اپنی مرضی کی خصوصیات استعمال کرتے ہیں۔
• content کنفیگریشن خودکار ہے — Tailwind v4 فائلوں کو گلوب کے ذریعے خود بخود اسکین کرتا ہے
• کنٹینر کے استفسارات اب @container اور @sm:، @lg: مختلف حالتوں کے ساتھ بلٹ ان ہیں۔
• تمام بلٹ ان رنگوں کے لیے oklch() رنگ کی جگہ کے ذریعے P3 کلر گامٹ سپورٹ
• @apply اب بھی کام کرتا ہے لیکن CSS حسب ضرورت خصوصیات کے ساتھ کم ضروری ہے۔
• JIT انجن کو آکسائیڈ (Rust) سے بدل دیا گیا ہے — ڈرامائی طور پر تیز تر تالیف

---

کیا بدلا اور کیوں؟

Tailwind v3 نے PostCSS کو پروسیسنگ پائپ لائن، JavaScript کنفگ فائل کے طور پر استعمال کیا، اور JavaScript میں لکھے JIT انجن کے ذریعے یوٹیلیٹی کلاسز تیار کیں۔ اس نے اچھا کام کیا لیکن اس کی حدود تھیں:

• کنفیگریشن کے لیے جاوا اسکرپٹ کی ضرورت ہے، اسے صرف CSS ٹولز سے ناقابل رسائی بناتا ہے۔
• کسٹم پراپرٹیز کو Tailwind config سے الگ سے سیٹ کرنا تھا۔
• کنٹینر کے سوالات کے لیے ایک پلگ ان درکار ہے۔
• کلر سسٹم P3 گیمٹ کو سپورٹ نہیں کرتا تھا۔

Tailwind v4 ان سب کو خود CSS میں منتقل کر کے، براؤزر کے مقامی CSS کسٹم پراپرٹی سسٹم کا استعمال کرتے ہوئے، اور 5-10x تیزی سے تعمیرات کے لیے Rust میں انجن کو دوبارہ لکھ کر ان سب کو حل کرتا ہے۔

---

انسٹالیشن

# Tailwind v4
pnpm add tailwindcss@^4.0.0 @tailwindcss/vite

# For Next.js
pnpm add tailwindcss@^4.0.0 @tailwindcss/postcss

@tailwindcss/vite پلگ ان براہ راست وائٹ کے ساتھ مربوط ہوتا ہے۔ Next.js کے لیے (جو پوسٹ سی ایس ایس کو اندرونی طور پر استعمال کرتا ہے)، @tailwindcss/postcss استعمال کریں۔

---

سی ایس ایس - پہلی ترتیب

یہ سب سے بڑی تصوراتی تبدیلی ہے۔ آپ کا globals.css Tailwind کنفیگریشن کے لیے سچائی کا ذریعہ بن جاتا ہے:

/* Before: globals.css with v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* After: globals.css with v4 */
@import "tailwindcss";

/* Theme configuration replaces tailwind.config.js */
@theme {
  /* Custom colors as CSS custom properties */
  --color-brand-50: oklch(97% 0.02 250);
  --color-brand-100: oklch(94% 0.04 250);
  --color-brand-500: oklch(62% 0.18 250);
  --color-brand-900: oklch(28% 0.09 250);

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

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

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

  /* Custom shadows */
  --shadow-card: 0 1px 3px oklch(0% 0 0 / 12%), 0 1px 2px oklch(0% 0 0 / 8%);
}

آپ کا tailwind.config.js حذف کیا جا سکتا ہے (یا ابھی کے لیے رکھا جا سکتا ہے — v4 منتقلی کے دوران دونوں کو سپورٹ کرتا ہے)۔

---

مواد کی کھوج

Tailwind v4 خودکار طور پر ٹیمپلیٹ فائلوں کا پتہ لگاتا ہے۔ content کنفیگریشن جو آپ نے احتیاط سے v3 میں برقرار رکھی تھی وہ ختم ہو گئی ہے:

// v3 tailwind.config.js — you needed this
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

v4 میں، Tailwind سمجھدار ڈیفالٹس کا استعمال کرتے ہوئے آپ کے پروجیکٹ کو خود بخود اسکین کرتا ہے۔ اگر آپ کے پاس غیر معمولی جگہوں پر فائلیں ہیں، تو آپ انہیں واضح طور پر شامل کر سکتے ہیں:

@import "tailwindcss";
@source "../scripts/*.ts"; /* Scan additional paths */
@source "../../packages/ui/src/**/*.tsx"; /* Monorepo workspace packages */

---

پوسٹ سی ایس ایس کنفیگریشن اپ ڈیٹ

Next.js پروجیکٹس (اور کسی بھی پوسٹ سی ایس ایس پر مبنی سیٹ اپ) کے لیے، اپنی پوسٹ سی ایس ایس کی تشکیل کو اپ ڈیٹ کریں:

// Before: postcss.config.js with v3
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

// After: postcss.config.mjs with v4
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

autoprefixer @tailwindcss/postcss میں بطور ڈیفالٹ شامل ہے۔ علیحدہ autoprefixer انحصار کو ہٹا دیں۔

---

رنگین نظام: OKLCH

Tailwind v4 اپنے بلٹ ان کلر پیلیٹ کے لیے OKLCH استعمال کرتا ہے۔ OKLCH ایک ادراک طور پر یکساں رنگ کی جگہ ہے — ہلکی پن کو ایڈجسٹ کرنا دراصل HSL کے برعکس انسانی آنکھ کے برابر قدموں کی طرح لگتا ہے۔

/* v4 colors use OKLCH internally */
/* bg-blue-500 generates: */
background-color: oklch(62.8% 0.258 264.1);

/* Custom colors with OKLCH */
@theme {
  --color-ecosire-amber: oklch(78% 0.18 80);
  --color-ecosire-navy: oklch(22% 0.04 250);
}

وسیع تر گیمٹ ڈسپلے (زیادہ تر جدید فونز اور میک) کے لیے، OKLCH ایسے رنگوں کو قابل بناتا ہے جن کی sRGB آسانی سے نمائندگی نہیں کر سکتا۔ oklch() اقدار خود بخود rgb() میں تبدیل ہو جاتی ہیں ان ڈسپلے کے لیے جو P3 کو سپورٹ نہیں کرتے ہیں۔

---

کنٹینر کے سوالات — بلٹ ان

کنٹینر کے سوالات اب v4 میں فرسٹ کلاس ہیں۔ کوئی پلگ ان کی ضرورت نہیں:

/* Define a container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

<!-- Responsive based on parent container, not viewport -->
<div class="card-wrapper">
  <div class="@sm:flex-row @lg:grid-cols-3 flex flex-col">
    <!-- Layout changes based on container width, not screen width -->
  </div>
</div>

یہ اجزاء کی سطح پر ردعمل کو قابل بناتا ہے — ایک سائڈبار کارڈ اور ایک مکمل چوڑائی والے کارڈ میں الگ الگ CSS کے بغیر مختلف لے آؤٹ ہو سکتے ہیں۔

نامزد کنٹینرز آپ کو مخصوص آباؤ اجداد کو نشانہ بنانے دیتے ہیں:

<div class="card-wrapper [container-name:card]">
  <div class="@card/sm:text-lg text-base">
    Responsive to the 'card' container
  </div>
</div>

---

سی ایس ایس کسٹم پراپرٹیز انٹیگریشن

@theme میں بیان کردہ حسب ضرورت خصوصیات ہر جگہ قابل رسائی ہیں — CSS، JavaScript، اور ڈیزائن ٹولز جو CSS متغیرات کو پڑھتے ہیں:

@theme {
  --color-primary: oklch(62% 0.18 250);
  --spacing-section: 5rem;
}

// Access in JavaScript/TypeScript
const style = getComputedStyle(document.documentElement);
const primary = style.getPropertyValue('--color-primary');

<!-- Use in inline styles -->
<div style={{ color: 'var(--color-primary)' }}>
  Themed content
</div>

یہ tailwind.config.js اور tokens.ts فائل میں متوازی اقدار کو برقرار رکھنے کے پیٹرن کی جگہ لے لیتا ہے — اب CSS میں سچائی کا ایک واحد ذریعہ ہے۔

---

بریکنگ تبدیلیاں

1۔ پلگ ان API تبدیلیاں

addBase, addComponents, addUtilities استعمال کرنے والے v3 پلگ ان v4 کے ساتھ مطابقت نہیں رکھتے۔ نئے پرت کے نظام کا استعمال کرتے ہوئے انہیں CSS کے طور پر دوبارہ لکھیں:

/* v3 plugin equivalent in v4 CSS */
@layer base {
  h1 {
    @apply text-3xl font-bold;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium;
  }
}

2۔ @apply حسب ضرورت کلاسز کے ساتھ

@apply نان ٹیل ونڈ کلاسز کے ساتھ v4 میں زیادہ پابندی ہے۔ @apply کا استعمال صرف حقیقی یوٹیلیٹی کلاسز کے ساتھ کریں:

/* This works in v4 */
.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}

/* This is deprecated — use regular CSS instead */
.btn-primary {
  @apply custom-shadow; /* custom-shadow is not a Tailwind utility */
}

3۔ tailwind.config.js theme.extend چلا گیا

جے ایس میں کنفیگریشن اب بنیادی راستہ نہیں ہے۔ CSS میں @theme استعمال کریں۔ اگر آپ کے پاس دونوں ہیں، تو CSS کنفیگریشن کو فوقیت حاصل ہے۔

**4۔ پہلے سے طے شدہ رنگ پیلیٹ کا نام **

v4 میں چند رنگوں کے نام بدل گئے۔ ان کو پکڑنے کے لیے آفیشل کوڈ موڈ چلائیں:

npx @tailwindcss/upgrade@next --config tailwind.config.js

---

ہجرت کی حکمت عملی

ایک بڑی پروڈکشن ایپلیکیشن کے لیے، بتدریج منتقلی:

مرحلہ 1: اپ ڈیٹ انسٹالیشن

pnpm remove tailwindcss autoprefixer postcss
pnpm add tailwindcss@^4.0.0 @tailwindcss/postcss

اپ ڈیٹ postcss.config.mjs:

export default {
  plugins: { '@tailwindcss/postcss': {} },
};

اپ ڈیٹ globals.css:

/* Replace the three @tailwind directives */
@import "tailwindcss";

فیز 2: کوڈ موڈ چلائیں

npx @tailwindcss/upgrade@next

یہ زیادہ تر منتقلی کو خودکار کرتا ہے: رنگوں کے ناموں کو اپ ڈیٹ کرتا ہے، تشکیل کو CSS میں تبدیل کرتا ہے، اور ایسے مسائل کو جھنڈا دیتا ہے جن پر دستی توجہ کی ضرورت ہوتی ہے۔

مرحلہ 3: تشکیل کو CSS میں منتقل کریں

اپنی tailwind.config.js تھیم کی قدریں لیں اور انہیں اپنے CSS میں @theme میں منتقل کریں۔ تصدیق کے بعد تشکیل فائل کو حذف کریں۔

مرحلہ 4: نئی خصوصیات اپنائیں

ویو پورٹ پر مبنی ریسپانسیو بریک پوائنٹس کو کنٹینر کے سوالات سے تبدیل کریں جہاں مناسب ہو۔ P3 گیمٹ سپورٹ حاصل کرنے کے لیے اپنی مرضی کے مطابق رنگوں کے لیے OKLCH کو اختیار کریں۔

---

کارکردگی میں بہتری

Tailwind v4 کا آکسائیڈ انجن (Rust) پیمائش کے لحاظ سے تیزی سے تعمیرات فراہم کرتا ہے:

بڑی ایپلی کیشنز کے لیے، یہ ترقی میں نمایاں طور پر تیز HMR اور نمایاں طور پر مختصر سی آئی بلڈ ٹائم میں ترجمہ کرتا ہے۔

---

حقیقی دنیا کی نقل مکانی کی مثال

یہاں ایک ڈیزائن سسٹم کی بنیادی ترتیب کے لیے پہلے/بعد میں ایک عملی ہے:

// Before: tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fef3c7',
          500: '#f59e0b',
          900: '#78350f',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],
      },
      boxShadow: {
        card: '0 1px 3px rgba(0,0,0,0.12)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
};

/* After: globals.css (v4) */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@theme {
  --color-brand-50: oklch(97% 0.04 85);
  --color-brand-500: oklch(78% 0.18 85);
  --color-brand-900: oklch(33% 0.08 85);

  --font-sans: 'Inter', system-ui, sans-serif;

  --shadow-card: 0 1px 3px oklch(0% 0 0 / 12%);
}

سی ایس ایس کی مقامی ترتیب زیادہ جامع ہے اور ترتیب کو پڑھنے کے لیے node_modules انحصار کو ختم کرتی ہے۔

---

اکثر پوچھے گئے سوالات

کیا مجھے tailwind.config.js کو فوری طور پر حذف کرنے کی ضرورت ہے؟

نہیں — Tailwind v4 منتقلی کے دوران JS config اور CSS کنفیگریشن دونوں کو بیک وقت سپورٹ کرتا ہے۔ جے ایس کی تشکیل اب بھی کام کرتی ہے، لیکن سی ایس ایس میں @theme جیسی خصوصیات صرف اس کے بغیر دستیاب ہیں۔ بتدریج ہجرت کریں: پہلے v4 کے ساتھ ایپ بلڈنگ حاصل کریں، پھر آہستہ آہستہ کنفیگریشن کو CSS میں منتقل کریں، پھر جب آپ کو یقین ہو تو JS کنفیگریشن کو حذف کریں۔

کیا میری موجودہ Tailwind v3 کلاسز اب بھی v4 میں کام کریں گی؟

یوٹیلیٹی کلاسز کی اکثریت غیر تبدیل شدہ ہے۔ کچھ رنگوں کے ناموں کو اپ ڈیٹ کیا گیا تھا (کچھ سیاق و سباق میں سرمئی → غیر جانبدار)، اور کچھ فرسودہ افادیت کو ہٹا دیا گیا تھا۔ زیادہ تر مسائل کو خود بخود پکڑنے کے لیے npx @tailwindcss/upgrade@next چلائیں۔ بنیادی عدم مطابقتیں پلگ انز اور حسب ضرورت تھیم کنفیگریشن میں ہیں، اس میں نہیں کہ آپ HTML/JSX میں کلاسز کو کس طرح استعمال کرتے ہیں۔

کیا OKLCH تمام براؤزرز میں تعاون یافتہ ہے؟

OKLCH تمام جدید براؤزرز (Chrome 111+, Firefox 113+, Safari 15.4+) میں تعاون یافتہ ہے۔ Tailwind v4 ضرورت پڑنے پر پرانے براؤزرز کے لیے فال بیکس تیار کرتا ہے۔ P3 کلر گامٹ (توسیع شدہ رنگوں) کے لیے، سپورٹ کے لیے وسیع گامٹ ڈسپلے اور ایک معاون براؤزر دونوں کی ضرورت ہوتی ہے — ٹیل وِنڈ تنگ گامٹ ڈسپلے کے لیے rgb() فال بیکس تیار کرتا ہے۔

میں Shadcn/ui کے ساتھ Tailwind v4 کیسے استعمال کروں؟

shadcn/ui 2.0+ Tailwind v4 کو سپورٹ کرتا ہے۔ v4 CSS متغیر فارمیٹ استعمال کرنے کے لیے اپنا components.json اپ ڈیٹ کریں۔ اجزاء کی لائبریری تھیمنگ کے لیے CSS حسب ضرورت خصوصیات کا استعمال کرتی ہے، جو قدرتی طور پر Tailwind v4 کے @theme سسٹم سے نقشہ بناتی ہے۔ v4 کے موافق کنفیگریشن حاصل کرنے کے لیے موجودہ پروجیکٹ میں npx shadcn@latest init چلائیں۔

کیا نئی کنفیگریشن کے لیے TypeScript کی قسمیں ہیں؟

Tailwind v4 کی کنفیگریشن CSS ہے، اس لیے خود کنفیگریشن کے لیے کوئی TypeScript کی قسمیں نہیں ہیں۔ IDE سپورٹ CSS لینگویج سروسز سے آتا ہے جو حسب ضرورت خصوصیات کو سمجھتی ہیں۔ TypeScript میں تھیم ویلیوز تک رسائی حاصل کرنے کے لیے (چارٹس، اینیمیشنز وغیرہ کے لیے)، رن ٹائم پر CSS کسٹم پراپرٹیز کو پڑھنے کے لیے getComputedStyle استعمال کریں، یا اپنی تعمیر کے حصے کے طور پر اپنے CSS سے ٹوکن فائل بنائیں۔

---

اگلے اقدامات

Tailwind CSS v4 نئے پروجیکٹس کے لیے اپنانے اور موجودہ پروجیکٹس کے لیے منصوبہ بندی کرنے کے قابل ایک اہم اپ گریڈ ہے۔ ECOSIRE کا فرنٹ اینڈ اسٹیک ایک جامع ڈیزائن سسٹم کے ساتھ 249 صفحات پر مشتمل Next.js 16 ایپلی کیشن میں ٹیل وِنڈ CSS v4.1 چلاتا ہے۔

Tailwind v4 منتقلی میں مدد کی ضرورت ہے یا زمین سے بنایا ہوا ڈیزائن سسٹم چاہتے ہیں؟ ہماری فرنٹ اینڈ انجینئرنگ سروسز کو دریافت کریں یہ دیکھنے کے لیے کہ ہم کس طرح مدد کر سکتے ہیں۔