تیلویند 4 بتا منتشر شد Tailwind Css v4.0 beta

تیلویند 4 بتا منتشر شد Tailwind Css v4.0 beta
فهرست محتوا

نسخه بتا تیلویند Tailwind CSS v4
پیش‌نمایشی از ویژگی‌های جدید نسخه بعدی Tailwind CSS.

پس از یک دوره طولانی آزمایشی (آلفا)، اکنون خوشحالیم که Tailwind CSS v4.0 را به نسخه بتا ارتقا داده‌ایم!
هنوز ممکن است برخی قسمت‌ها نیاز به بهبود داشته باشند، اما مطمئن هستیم که از حالا تا زمان انتشار نسخه پایدار، هیچ تغییر بزرگی اعمال نخواهد شد.

این مستندات هنوز در حال تکمیل است و در طول دوره بتا بهبود خواهد یافت، اما در حال حاضر برای شروع کار کافی است.

شروع به کار

نصب با Vite

اگر از Vite یا فریم‌ورک‌هایی که با Vite کار می‌کنند (مانند SvelteKit یا Remix) استفاده می‌کنید، Tailwind و افزونه اختصاصی Vite را نصب کنید:

bashCopy code$ npm install tailwindcss@next @tailwindcss/vite@next

سپس، افزونه Vite ما را به فایل vite.config.ts اضافه کنید:

typescriptCopy codeimport { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

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

در نهایت، Tailwind را در فایل اصلی CSS خود وارد کنید:

cssCopy code@import "tailwindcss";

نصب با PostCSS

اگر پروژه شما از PostCSS استفاده می‌کند یا از فریم‌ورک‌هایی مثل Next.js بهره می‌برید که از افزونه‌های PostCSS پشتیبانی می‌کنند، Tailwind و افزونه اختصاصی PostCSS را نصب کنید:

bashCopy code$ npm install tailwindcss@next @tailwindcss/postcss@next

سپس افزونه PostCSS ما را به فایل postcss.config.mjs اضافه کنید:

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

در نهایت، Tailwind را در فایل اصلی CSS خود وارد کنید:

cssCopy code@import "tailwindcss";

نصب ابزار CLI

برای استفاده از ابزار CLI اختصاصی ما، Tailwind و بسته CLI جدید ما را نصب کنید:

bashCopy code$ npm install tailwindcss@next @tailwindcss/cli@next

سپس، Tailwind را در فایل اصلی CSS خود وارد کنید:

cssCopy code@import "tailwindcss";

و در نهایت، CSS خود را با استفاده از ابزار CLI کامپایل کنید:

bashCopy code$ npx @tailwindcss/cli -i input.css -o output.css

همچنین می‌توانید نسخه‌های مستقل ابزار CLI را از GitHub دانلود کنید، برای پروژه‌هایی که به اکوسیستم Node.js وابسته نیستند.

ارتقا از نسخه 3

برای ارتقا پروژه خود از نسخه 3 به نسخه بتا 4، می‌توانید از ابزار ارتقا ما استفاده کنید که بیشتر کارهای لازم را به‌طور خودکار انجام می‌دهد:

bashCopy code$ npx @tailwindcss/upgrade@next

این ابزار موارد زیر را به‌صورت خودکار انجام می‌دهد:

  • به‌روزرسانی وابستگی‌ها
  • انتقال فایل تنظیمات به CSS
  • اعمال تغییرات موردنیاز روی فایل‌های قالب.

نکته: بهتر است این ابزار را در یک شاخه (branch) جدید اجرا کرده و پس از آن تغییرات را بررسی و پروژه را در مرورگر آزمایش کنید.

ویژگی‌های جدید در نسخه 4.0

موتور جدید با عملکرد بالا

نسخه 4.0 یک بازنویسی کامل از معماری فریم‌ورک Tailwind CSS است که با هدف افزایش سرعت و بهینه‌سازی عملکرد طراحی شده است.
در پروژه‌های خودمان، زمان ساخت کامل CSS بیش از 3.5 برابر سریع‌تر و ساخت‌های افزایشی بیش از 8 برابر سریع‌تر شده‌اند.

نمونه زمان ساخت در نسخه بتا v4.0 در مقایسه با نسخه 3.4:
عملیاتv3.4v4.0 Betaبهبود
ساخت کامل378ms100ms3.78 برابر
ساخت افزایشی با CSS جدید44ms5ms8.8 برابر
ساخت افزایشی بدون CSS جدید35ms192μs182 برابر

پیکربندی مبتنی بر CSS

یکی از بزرگ‌ترین تغییرات در نسخه 4.0 Tailwind CSS، تغییر از پیکربندی پروژه با JavaScript به پیکربندی آن با CSS است.

به جای استفاده از فایل tailwind.config.js، می‌توانید تمام سفارشی‌سازی‌های خود را مستقیماً در فایل CSS که Tailwind را وارد می‌کنید، انجام دهید. این تغییر باعث می‌شود یک فایل کمتر در پروژه خود داشته باشید:

cssCopy code@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);

  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

  /* ... */
}

این پیکربندی جدید مبتنی بر CSS تقریباً تمامی قابلیت‌های tailwind.config.js را پوشش می‌دهد، از جمله تنظیم توکن‌های طراحی، تعریف ابزارهای سفارشی، و نصب پلاگین‌ها.

متغیرهای CSS موضوعی

Tailwind CSS v4.0 به‌طور پیش‌فرض تمامی توکن‌های طراحی شما را به‌عنوان متغیرهای CSS در دسترس قرار می‌دهد. این امکان به شما کمک می‌کند تا هر مقداری را که نیاز دارید به‌راحتی در زمان اجرا با استفاده از CSS به کار ببرید.

برای مثال، مقادیر @theme ذکرشده در بالا به شکل زیر به CSS شما اضافه می‌شوند:

cssCopy code:root {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);

  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

  /* ... */
}

این ویژگی به شما اجازه می‌دهد تا این مقادیر را به‌عنوان استایل‌های داخلی یا برای استفاده در کتابخانه‌هایی مانند Motion به کار ببرید.

لایه‌های سلسله مراتبی CSS بومی

در نسخه 4.0 از لایه‌های واقعی سلسله مراتبی CSS استفاده شده است که مدیریت اولویت استایل‌ها و تعامل آن‌ها با یکدیگر را بسیار ساده‌تر می‌کند.

خروجی CSS پس از ساخت با نسخه 4.0 به شکل زیر است:

cssCopy code@layer theme, base, components, utilities;

@layer theme {
  :root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
      'Courier New', monospace;

    /* ... */
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  /* ... */
}

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .visibility-hidden {
    visibility: hidden;
  }

  /* ... */
}

این لایه‌ها قابلیت‌های بیشتری را فراهم می‌کنند که در نسخه‌های پیشین قابل‌اجرا نبودند، مانند ایزوله کردن استایل‌ها درون یک لایه خاص.

تشخیص خودکار منابع

یکی از بهبودهای بزرگ در نسخه 4.0 حذف نیاز به پیکربندی دستی آرایه محتوا (content array) است. اکنون Tailwind CSS به‌طور خودکار منابع موردنیاز را شناسایی می‌کند.
به‌عنوان مثال، فایل‌هایی که در .gitignore تعریف شده‌اند، به‌طور خودکار نادیده گرفته می‌شوند:

gitignoreCopy code# dependencies
/node_modules

# testing
/coverage

# caches
/.next/

# production
/build

برای افزودن منبعی که به‌طور پیش‌فرض نادیده گرفته شده، می‌توانید از دستور @source در فایل CSS استفاده کنید:

cssCopy code@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

پشتیبانی داخلی از وارد کردن (Import)

پیش از نسخه 4.0، اگر می‌خواستید فایل‌های CSS دیگر را با استفاده از @import به‌صورت درون‌خطی اضافه کنید، باید از افزونه‌هایی مثل postcss-import استفاده می‌کردید. اما اکنون این قابلیت به‌صورت داخلی در Tailwind CSS وجود دارد و نیازی به ابزارهای اضافی نیست:

javascriptCopy codeexport default {
  plugins: {
    'postcss-import': {},
    '@tailwindcss/postcss': {},
  },
};

سیستم وارد کردن (Import) جدید ما به‌طور خاص برای Tailwind CSS طراحی شده و عملکرد سریع‌تری ارائه می‌دهد.

تبدیل (Transpilation) داخلی CSS

در نسخه 4.0، Tailwind CSS به‌طور خودکار CSS شما را از طریق ابزار Lightning CSS پردازش می‌کند. این ابزار وظایفی مثل اضافه کردن پیشوندهای مرورگر (vendor prefixes)، تبدیل ویژگی‌های مدرن به نسخه قدیمی‌تر، فشرده‌سازی (minification)، و موارد دیگر را انجام می‌دهد.

این تغییر به این معناست که می‌توانید ابزارهایی مثل autoprefixer و postcss-preset-env را از پروژه خود حذف کنید:

javascriptCopy codeexport default {
  plugins: {
    '@tailwindcss/postcss': {},
    'postcss-preset-env': {},
    'autoprefixer': {},
  },
};

در نسخه 4.0، Tailwind CSS تنها ابزاری است که برای مدیریت کل زنجیره CSS خود نیاز دارید.

پیکربندی ساده‌تر تم‌ها

در نسخه 4.0، حجم تنظیمات موردنیاز برای پیکربندی تم به‌طور چشمگیری کاهش یافته است. به‌ویژه در مواردی که به طراحی (Design Tokens) مرتبط نیستند.

برای مثال، مواردی مثل grid-cols-12، z-40 و opacity-70 دیگر نیازی به تعریف در تم ندارند. این کلاس‌ها به‌طور خودکار و بدون پیکربندی اضافی در دسترس هستند:

htmlCopy code<div class="grid grid-cols-73">
  <div>1</div>
  <!-- ... -->
  <div>73</div>
</div>

همین ساده‌سازی‌ها برای واریانت‌هایی مثل data-* اعمال شده است — شما دیگر نیازی به تنظیم این موارد ندارید و می‌توانید به‌راحتی از آن‌ها استفاده کنید:

htmlCopy code<div class="opacity-50 data-[selected]:opacity-100" data-selected>
  <!-- ... -->
</div>

مقیاس پویا برای فاصله‌دهی (Dynamic Spacing Scale)

ما نحوه کارکرد ابزارهای فاصله‌دهی (مثل px-*, mt-*, w-*, h-*) را ساده‌تر کرده‌ایم. اکنون همه این ابزارها از یک مقیاس فاصله‌دهی واحد مشتق می‌شوند که در تم پیش‌فرض برابر با 0.25rem تعریف شده است:

cssCopy code@theme {
  --spacing: 0.25rem;
}

این ویژگی به شما اجازه می‌دهد تا هر مقداری که چندبرابر این مقیاس است را بدون نیاز به تنظیم اضافی استفاده کنید. برای مثال:

htmlCopy code<div class="mt-21">
  <!-- فاصله‌دهی 21 برابر مقدار پایه -->
</div>

و اگر می‌خواهید مقیاس را محدودتر کنید، می‌توانید مقادیر مشخصی را تعریف کنید:

cssCopy code@theme {
  --spacing: initial;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
}

پالت رنگ مدرن P3

در نسخه 4.0، کل پالت رنگ پیش‌فرض از rgb به oklch ارتقا یافته است. این تغییر از طیف رنگ گسترده‌تر استفاده می‌کند و باعث می‌شود رنگ‌ها زنده‌تر و جذاب‌تر باشند.
ما تلاش کرده‌ایم تا تعادل بین رنگ‌ها را همانند نسخه 3 حفظ کنیم، بنابراین این تغییر نباید باعث ناسازگاری در پروژه‌های موجود شود.

رنگ‌های متغیر ساده‌تر

در نسخه 4.0، دیگر نیازی به روش‌های پیچیده برای تعریف رنگ‌های متغیر وجود ندارد. اکنون می‌توانید رنگ‌های خود را به‌عنوان متغیر تعریف کنید و تمامی ویژگی‌های مرتبط مثل تنظیم شفافیت (Opacity) به‌صورت خودکار کار می‌کنند:

cssCopy code@import "tailwindcss";

@theme {
  --color-primary: var(--color-blue-500);
  --color-error: var(--color-red-500);

  /* ... */
}

برای مثال، وقتی از کلاس bg-primary/50 استفاده می‌کنید، به‌راحتی قابل اجراست:

htmlCopy code<div class="bg-primary/50">
  <!-- ... -->
</div>

پشتیبانی از کوئری‌های کانتینر (Container Queries)

پشتیبانی از کوئری‌های کانتینر به نسخه اصلی اضافه شده و دیگر نیازی به پلاگین @tailwindcss/container-queries ندارید:

htmlCopy code<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

همچنین می‌توانید از کوئری‌های کانتینر با بیشینه عرض (max-width) استفاده کنید:

htmlCopy code<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

این ویژگی‌ها با واریانت‌های معمولی مثل @min-* و @max-* ترکیب می‌شوند تا دامنه‌های کوئری کانتینر را تعریف کنید.

ترانسفورم‌های سه‌بعدی (3D Transforms)

در نسخه 4.0، ابزارهایی برای انجام ترانسفورم‌های سه‌بعدی به Tailwind CSS اضافه شده‌اند. این ابزارها شامل rotate-x-*, rotate-y-*, scale-z-*, translate-z-* و بسیاری موارد دیگر هستند.

چرخش (Rotate)

ابزارهای rotate-x-*, rotate-y-* و rotate-z-* برای چرخش عناصر در فضای سه‌بعدی به کار می‌روند. این ابزارها به‌صورت خودکار از هر مقدار عددی پشتیبانی می‌کنند. مثال:

کلاسخصوصیت‌ها
rotate-x-0transform: rotateX(0deg) var(--tw-rotate-y) var(--tw-rotate-z);
rotate-x-45transform: rotateX(45deg) var(--tw-rotate-y) var(--tw-rotate-z);
rotate-y-180transform: var(--tw-rotate-x) rotateY(180deg) var(--tw-rotate-z);

مقیاس (Scale)

ابزارهای scale-z-* برای تغییر اندازه عناصر در محور z استفاده می‌شوند. این ابزارها نیز از هر مقدار عددی پشتیبانی می‌کنند. مثال:

کلاسخصوصیت‌ها
scale-z-100scale: var(--tw-scale-x) var(--tw-scale-y) 100%;
scale-z-200scale: var(--tw-scale-x) var(--tw-scale-y) 200%;

ترجمه (Translate)

ابزارهای translate-z-* برای جابه‌جایی عناصر به جلو یا عقب در فضای سه‌بعدی استفاده می‌شوند. این ابزار از مقیاس فاصله‌دهی پیش‌فرض استفاده می‌کند:

کلاسخصوصیت‌ها
translate-z-0translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * 0);
translate-z-4translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * 4);

پرسپکتیو (Perspective)

ابزارهایی مثل perspective-near, perspective-normal, و perspective-distant همراه با ابزارهای جدید perspective-origin-* برای کنترل پرسپکتیو در ترانسفورم‌های سه‌بعدی ارائه شده‌اند:

کلاسخصوصیت‌ها
perspective-distantperspective: 1200px;
perspective-origin-bottomperspective-origin: bottom;
perspective-origin-top-rightperspective-origin: top-right;

قابلیت مشاهده پشت عنصر (Backface Visibility)

دو ابزار جدید برای کنترل مشاهده‌پذیری پشت عناصر سه‌بعدی ارائه شده‌اند:

کلاسخصوصیت‌ها
backface-visiblebackface-visibility: visible;
backface-hiddenbackface-visibility: hidden;

زاویه‌های گرادیان خطی (Linear Gradient Angles)

اکنون می‌توانید زاویه‌ها را برای گرادیان‌های خطی تعیین کنید. به‌عنوان مثال:

htmlCopy code<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

در این نسخه، نام ابزارهای bg-gradient-* به bg-linear-* تغییر کرده است.

تغییر حالت تداخل رنگ‌ها در گرادیان‌ها

حالت تداخل رنگ در گرادیان‌ها اکنون با یک مودیفایر کنترل می‌شود. برای مثال:

htmlCopy code<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>

حالت پیش‌فرض OKLCH است که رنگ‌های زنده‌تر و جذاب‌تری تولید می‌کند.

گرادیان‌های مخروطی و شعاعی (Conic and Radial Gradients)

ابزارهای جدید bg-conic-* و bg-radial-* برای ایجاد گرادیان‌های مخروطی و شعاعی اضافه شده‌اند. مثال:

htmlCopy code<div class="bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600 size-24 rounded-full"></div>
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75% size-24 rounded-full"></div>

سایه‌ها و حلقه‌های داخلی (Inset Shadows and Rings)

ابزارهای جدید inset-shadow-* و inset-ring-* برای ایجاد سایه‌ها و حلقه‌های داخلی معرفی شده‌اند:

htmlCopy code<button class="shadow-md inset-shadow-sm inset-shadow-white/20 ring ring-blue-600 inset-ring inset-ring-white/15 ...">
  <!-- ... -->
</button>

این ابزارها مانند ابزارهای استاندارد سایه و حلقه از مقادیر مختلف و رنگ‌ها پشتیبانی می‌کنند.

ابزارهای تغییر اندازه خودکار فیلد‌ها (Field-Sizing Utilities)

ابزارهای جدید برای ویژگی field-sizing اضافه شده‌اند که به شما امکان می‌دهند تکست‌اریاهایی با اندازه خودکار تنها با CSS ایجاد کنید:

htmlCopy code<label class="block">
  <span class="block text-sm/6 font-medium text-gray-900 dark:text-white">Add your comment</span>
  <textarea class="field-sizing-content ..."></textarea>
</label>

کلاس‌ها:

کلاسویژگی‌ها
field-sizing-contentفیلد به اندازه محتوای خود تغییر می‌کند.
field-sizing-fixedفیلد اندازه‌ای ثابت خواهد داشت.

ابزارهای طرح رنگ (Color-Scheme Utilities)

ویژگی جدید color-scheme به شما اجازه می‌دهد تا اسکرول‌بارها و سایر بخش‌ها را در حالت‌های روشن و تاریک بهینه کنید.

مثال:

htmlCopy code<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>

لیست کلاس‌ها:

کلاسویژگی‌ها
scheme-normalcolor-scheme: normal;
scheme-darkcolor-scheme: dark;
scheme-lightcolor-scheme: light;
scheme-light-darkcolor-scheme: light dark;
scheme-only-darkcolor-scheme: only dark;
scheme-only-lightcolor-scheme: only light;

ابزارهای کشیدگی فونت (Font-Stretch Utilities)

Tailwind CSS ابزارهای جدیدی برای ویژگی font-stretch ارائه داده که به شما اجازه می‌دهد عرض فونت‌های متغیر را کنترل کنید.

مثال:

کلاسویژگی‌ها
font-stretch-normalfont-stretch: normal;
font-stretch-condensedfont-stretch: condensed;
font-stretch-expandedfont-stretch: expanded;
font-stretch-extra-condensedfont-stretch: extra-condensed;
font-stretch-extra-expandedfont-stretch: extra-expanded;

واریانت‌های ترکیبی (Composable Variants)

در موتور جدید نسخه 4.0، برخی از واریانت‌ها قابلیت زنجیره شدن با سایر واریانت‌ها را دارند و می‌توان آن‌ها را به‌سادگی ترکیب کرد.

مثال:

htmlCopy code<div class="group">
  <div class="group-has-data-[active]:opacity-100">
    <!-- محتوای مرتبط -->
  </div>
</div>

این قابلیت با هر واریانتی که مناسب باشد، کار می‌کند، از جمله group-*, peer-*, و واریانت‌های جدید not-* و in-*.

واریانت @starting-style

Tailwind CSS اکنون از ویژگی جدید @starting-style در CSS پشتیبانی می‌کند که امکان تغییر ویژگی‌های عناصر هنگام اولین نمایش را فراهم می‌کند.

مثال:

htmlCopy code<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>

واریانت not-*

این واریانت جدید از شبه‌کلاس :not(...) پشتیبانی می‌کند و به شما امکان می‌دهد عناصر را وقتی که شرایط خاصی برقرار نیست استایل‌دهی کنید.

مثال:

تنها افزودن استایل‌های هاور به دکمه‌ای که فوکوس نشده است:

htmlCopy code<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
  <!-- ... -->
</button>

واریانت inert

این واریانت جدید به شما امکان می‌دهد عناصر با ویژگی inert را استایل‌دهی کنید. این ویژگی می‌تواند برای نمایش بصری بخش‌هایی که غیرقابل تعامل هستند مفید باشد.

مثال:

htmlCopy code<main inert class="inert:opacity-50 inert:blur">
  <!-- ... -->
</main>

واریانت‌های nth-*

چهار واریانت جدید برای کلاس‌های شبه‌کودک و نوع تعریف شده‌اند:
:nth-child(...), :nth-last-child(...), :nth-of-type(...), و :nth-last-of-type(...).

مثال:

htmlCopy code<div class="nth-3:underline">...</div>
<div class="nth-last-5:underline">...</div>

واریانت in-*

این واریانت عملکرد مشابه واریانت‌های group-* دارد اما بدون نیاز به تعریف کلاس group در عنصر والد.

مثال:

htmlCopy code<div tabindex="0">
  <div class="opacity-50 in-focus:opacity-100">
    <!-- محتوای داخلی -->
  </div>
</div>

پشتیبانی از :popover-open

واریانت open اکنون از شبه‌کلاس :popover-open نیز پشتیبانی می‌کند:

مثال:

htmlCopy code<div>
  <button popovertarget="my-popover">Open Popover</button>
  <div popover id="my-popover" class="opacity-0 open:opacity-100">
    <!-- ... -->
  </div>
</div>

واریانت فرزندان (Descendant Variant)

واریانت جدید ** به شما امکان می‌دهد تمامی فرزندان یک عنصر را هدف قرار دهید. این قابلیت در کنار سایر واریانت‌ها بسیار مفید است.

مثال:

htmlCopy code<div class="**:data-avatar:rounded-full">
  <div>
    <img src="..." data-avatar /> <!-- این عنصر گرد خواهد شد -->
  </div>
  <p>متن معمولی</p>
</div>

این سینتکس از الگوی گلوب‌ها (Globs) الهام گرفته شده است و امکان انتخاب دقیق‌تری را فراهم می‌کند.

پیکربندی CSS در عمق (CSS Configuration In-Depth)

شخصی‌سازی تم‌ها

برای سفارشی‌سازی تم خود در Tailwind CSS v4.0، از دستور جدید @theme مستقیماً در CSS استفاده کنید:

cssCopy code@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);

  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

  /* ... */
}

تمام متغیرهای CSS که در اینجا تعریف شده‌اند، ابزارها و واریانت‌های جدیدی را بر اساس این مقادیر ایجاد می‌کنند که می‌توانید به‌راحتی در HTML خود استفاده کنید:

htmlCopy code<div class="max-w-lg 3xl:max-w-xl">
  <h1 class="font-display text-4xl">
    داده‌ها برای <span class="text-avocado-400">غنی‌سازی</span> کسب‌وکار آنلاین شما
  </h1>
</div>

جایگزین کردن تم پیش‌فرض

به‌طور پیش‌فرض، اضافه کردن متغیرهای جدید به‌صورت افزایشی عمل می‌کند (مانند ویژگی extend در نسخه 3):

cssCopy code@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
}

برای جایگزین کردن کامل یک namespace، می‌توانید از initial استفاده کنید:

cssCopy code@import "tailwindcss";

@theme {
  --font-*: initial;
  --font-display: "Satoshi", "sans-serif";
}

با این کار، ابزارهای پیش‌فرض مانند font-sans، font-serif، و font-mono در پروژه شما وجود نخواهند داشت.

پیکربندی انیمیشن‌ها و keyframes

به‌طور پیش‌فرض، Tailwind CSS v4.0 هر دستور @keyframes که به CSS خود اضافه کنید را حفظ می‌کند، حتی اگر از ابزارهای انیمیشن مرتبط استفاده نکنید.
برای اطمینان از حذف keyframes بلااستفاده، آن‌ها را تحت دستور @theme تعریف کنید:

cssCopy code@theme {
  --animate-marquee: marquee 3s linear infinite;

  @keyframes marquee {
    to {
      transform: translateY(-50%);
    }
  }
}

مراجع فضای نام (Namespace Reference)

پیکربندی ساده‌تر در نسخه 4.0 به این معناست که تنها با فضای‌نام‌های زیر کار خواهید داشت:

فضای‌نامابزارها
--color-*ابزارهای رنگ مانند bg-white، text-black یا fill-blue-500
--font-*ابزارهای خانواده فونت مانند font-sans
--text-*ابزارهای اندازه فونت مانند text-sm
--breakpoint-*واریانت‌های نقطه شکست مانند md:* و lg:*
--ease-*ابزارهای تنظیم زمان انتقال مانند ease-out
--animate-*ابزارهای انیمیشن مانند animate-spin

برای کنترل دقیق‌تر، بیشتر ابزارها را می‌توانید تحت فضای‌نام‌های مطابق با ویژگی CSS مربوطه نیز پیکربندی کنید.

پیکربندی حالت تاریک (Dark Mode)

در نسخه 4.0، واریانت dark به‌طور پیش‌فرض از کوئری رسانه‌ای prefers-color-scheme استفاده می‌کند.

اگر می‌خواهید از استراتژی مبتنی بر انتخابگر برای حالت تاریک استفاده کنید، می‌توانید واریانت را به این شکل بازنویسی کنید:

cssCopy code@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));

تشخیص خودکار منابع

اگر تشخیص خودکار منابع در پروژه‌های بزرگ یا monorepo شامل فایل‌های غیرضروری شد، می‌توانید از تابع source(...) برای محدود کردن مسیر استفاده کنید:

cssCopy code@import "tailwindcss" source("../src");

برای افزودن منابع اضافی که به‌طور پیش‌فرض شناسایی نمی‌شوند، از @source استفاده کنید:

cssCopy code@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

غیرفعال کردن تشخیص منابع

اگر به هر دلیلی نیاز دارید تشخیص خودکار منابع را غیرفعال کنید، می‌توانید از source(none) هنگام وارد کردن Tailwind استفاده کنید:

cssCopy code@import "tailwindcss" source(none);

غیرفعال کردن استایل‌های پایه (Preflight)

اگر نمی‌خواهید از استایل‌های پایه Tailwind استفاده کنید، می‌توانید تنها قطعات موردنیاز خود را وارد کنید:

cssCopy code@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

استفاده از پیشوند (Prefix)

برای جلوگیری از تداخل کلاس‌های Tailwind با CSS موجود، می‌توانید از تابع prefix(...) هنگام وارد کردن Tailwind استفاده کنید:

cssCopy code@import "tailwindcss" prefix(tw);

مثال:

htmlCopy code<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
  <!-- ... -->
</div>

هنگام استفاده از پیشوند، متغیرهای تم را همانند حالت بدون پیشوند پیکربندی کنید. Tailwind به‌طور خودکار متغیرهای تولید شده را با پیشوند اضافه می‌کند:

cssCopy code@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
}

نتیجه در فایل CSS:

cssCopy code:root {
  --tw-font-display: "Satoshi", "sans-serif";

  --tw-breakpoint-3xl: 1920px;

  --tw-color-avocado-100: oklch(0.99 0 0);
  --tw-color-avocado-200: oklch(0.98 0.04 113.22);
}

اضافه کردن ابزارهای سفارشی (Custom Utilities)

برای اضافه کردن ابزار سفارشی در نسخه 4.0، از دستور @utility استفاده کنید:

cssCopy code@import "tailwindcss";

@utility tab-4 {
  tab-size: 4;
}

ابزارهای سفارشی به‌صورت خودکار به لایه utilities اضافه می‌شوند.

تعریف ابزارهای پیچیده‌تر:

برای ابزارهایی که بیش از یک نام کلاس دارند، از ویژگی‌های تو در تو استفاده کنید:

cssCopy code@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

اضافه کردن واریانت‌های سفارشی (Custom Variants)

برای اضافه کردن واریانت سفارشی، از دستور @variant استفاده کنید:

cssCopy code@import "tailwindcss";

@variant pointer-coarse (@media (pointer: coarse));
@variant theme-midnight (&:where([data-theme="midnight"] *));

مثال استفاده:

htmlCopy code<div class="pointer-coarse:bg-red-500 theme-midnight:bg-blue-900">
  <!-- ... -->
</div>

استفاده از پلاگین‌ها

برای بارگذاری پلاگین در نسخه 4.0، از دستور @plugin استفاده کنید:

cssCopy code@import "tailwindcss";

@plugin "@tailwindcss/typography";

این دستور از نام پکیج یا مسیر محلی پشتیبانی می‌کند.

استفاده از فایل‌های پیکربندی جاوااسکریپت (Legacy Config Files)

برای استفاده از یک فایل تنظیمات جاوااسکریپت در نسخه 4.0، از دستور @config استفاده کنید:

cssCopy code@import "tailwindcss";

@config "../../tailwind.config.js";

توجه:

برخی ویژگی‌ها مانند corePlugins, important و separator احتمالاً در نسخه پایدار 4.0 پشتیبانی نخواهند شد.

استفاده از @apply در Vue/Svelte

برای استفاده از @apply در بخش <style> کامپوننت‌های Vue یا Svelte، باید تنظیمات تم را وارد کنید تا مقادیر مرتبط در آن زمینه در دسترس باشند. این کار با استفاده از theme(reference) امکان‌پذیر است:

htmlCopy code<template>
  <h1>Hello world!</h1>
</template>

<style>
  @import "../../my-theme.css" theme(reference);

  h1 {
    @apply font-bold text-2xl text-red-500;
  }
</style>

تغییرات نسبت به نسخه 3

تغییرات وابستگی‌ها

  • در نسخه 4.0، پلاگین PostCSS در یک بسته جداگانه به نام @tailwindcss/postcss قرار دارد.
  • قابلیت وارد کردن فایل‌ها و اضافه کردن پیشوندهای مرورگر به‌صورت داخلی مدیریت می‌شود و دیگر نیازی به ابزارهایی مثل postcss-import و autoprefixer نیست.

تغییر در CLI

ابزار CLI اکنون در بسته جداگانه‌ای به نام @tailwindcss/cli قرار دارد. دستورات خود را به‌روزرسانی کنید:

bashCopy codenpx @tailwindcss/cli -i input.css -o output.css

حذف دستورهای @tailwind

در نسخه 4.0، وارد کردن Tailwind به‌صورت زیر انجام می‌شود:

cssCopy code@import "tailwindcss";

و دیگر نیازی به دستورهای @tailwind base;, @tailwind components;, و @tailwind utilities; نیست.

ابزارها و تغییرات حذف‌شده

برخی ابزارهای منسوخ شده از نسخه 3 حذف شده‌اند. جایگزین‌های مدرن به شرح زیر هستند:

ابزار قدیمیجایگزین مدرن
bg-opacity-*استفاده از اصلاح‌کننده شفافیت مانند bg-black/50
flex-grow-*, flex-shrink-*grow-*, shrink-*
overflow-ellipsistext-ellipsis

تغییرات در مقیاس پیش‌فرض‌ها

  1. سایه‌ها (Shadows):
    مقیاس‌های پیش‌فرض سایه تغییر کرده‌اند:
    • shadow-sm به shadow-xs تغییر یافته است.
    • shadow به shadow-sm تغییر یافته است.
  2. تاری (Blur):
    مقیاس پیش‌فرض تاری نیز تغییر کرده است:
    • blur-sm به blur-xs تغییر یافته است.
    • blur به blur-sm تغییر یافته است.
4/5 - (1 امتیاز)
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها