کوئری کانتینر در Tailwind CSS v4 برای کامپوننت‌های قابل‌حمل
یک دهه طراحی ریسپانسیو عمدتاً یعنی media query روی viewport. برای هدر و
گرید صفحه خوب کار می‌کند. برای کامپوننت قابل‌استفاده مجدد شکست می‌خورد: همان
کارت در ستون پهن اصلی و سایدبار باریک نباید هر دو منتظر lg: روی پنجره
بمانند.
کوئری کانتینر CSS این را درست می‌کند. یک عنصر بر اساس اندازه والد خود
استایل می‌گیرد. Tailwind CSS v4 این را به هسته آورده—دیگر به پلاگین
@tailwindcss/container-queries نیاز نیست.
مدل ذهنی دولایه
| لایه | ابزار | سؤالی که جواب می‌دهد |
|---|---|---|
| پوسته صفحه | sm: md: lg: |
پوسته چیدمان با دستگاه چگونه عوض شود؟ |
| درون کامپوننت | @sm: @md: @lg: |
این ویجت با عرض جایگاه چگونه عوض شود؟ |
جمع‌شدن ناوبری، نمایش سایدبار و گرید چندستونه صفحه روی variantهای viewport
می‌مانند. درون کارت، ویجت نظر و کاشی قیمت به variantهای کانتینر می‌روند تا
قابل‌حمل بمانند.
الگوی حداقلی
<article class="@container">
<div class="flex flex-col gap-4 @md:flex-row @md:items-center">
<img class="w-full @md:w-40" src="..." alt="" />
<div>
<h3 class="text-lg @md:text-xl">عنوان</h3>
<p class="text-sm @lg:text-base">خلاصه…</p>
</div>
</div>
</article>
والد را با @container علامت بزنید، بعد روی فرزندان md: را با @md: عوض
کنید. یادتان باشد: مقیاس بریک‌پوینت کانتینر با viewport فرق دارد (@md
معمولاً باریک‌تر از md است). اگر توکن‌های طراحی‌تان لازم داشت، با @theme
تنظیم کنید.
چیدمان تو در تو: کانتینر را نام‌گذاری کنید
وقتی کانتینرها تو در تو می‌شوند، جد مشخص را هدف بگیرید:
<div class="@container/main">
<aside class="@container/sidebar">
<div class="@md/sidebar:block @md/main:hidden">…</div>
</aside>
</div>
تله‌هایی که بعدازظهرها را می‌سوزانند
- والد بدون اندازه. فرزند flex بدون عرض واقعی ممکن است برای کوئری
کانتینر ۰ گزارش دهد. مطمئن شوید کانتینر inline size می‌سازد. - مخفی کردن خود کانتینر.
display: noneروی@containerعرض اندازه‌گیری
را صفر می‌کند—به‌جایش یک wrapper بیرونی را مخفی کنید. - مخلوط بی‌دقت لایه‌ها. روی یک property،
@md:را باmd:«fallback»
نکنید مگر عمداً هم قانون صفحه و هم جایگاه را می‌خواهید.
چرا برای سایت‌های جنگو + Tailwind مهم است
partialهای سرورساید (و جابه‌جایی HTMX) همان کامپوننت را در ناحیه‌های مختلف
می‌نشانند. با کوئری کانتینر، وقتی جایگاه عوض می‌شود مرورگر استایل را دوباره
حل می‌کند—بدون propهای size="compact" و بدون watcherهای Alpine برای عرض.
ساختار صفحه را با بریک‌پوینت کلاسیک بفرستید. به کامپوننت‌ها یاد دهید به
کانتینرشان احترام بگذارند. این تفکیک، معماری ریسپانسیو پایدار است که
Tailwind v4 بالاخره راحت کرده است.
