ما به تازگی Tailwind CSS نسخه 1.9 را منتشر کرده‌ایم که پشتیبانی از ایستگاه‌های پیش‌تنظیم، ابزارهای مفید شبکه CSS جدید، شعاع مرزی گسترش‌یافته، مقیاس‌های چرخش و پیچ‌خوردگی، بهبودهای دسترسی مفید و موارد دیگر را اضافه می‌کند!
بیایید به نکات برجسته بپردازیم…
برای خلاصه کامل تغییرات، به یادداشت های انتشار در GitHub مراجعه کنید.
Tailwind CSS v1.9 یک نسخه جدید اضافه می کند presets کلید به tailwind.config.js فایلی که پیکربندی یک “پیکربندی پایه” سفارشی را برای پروژه های شما ممکن می سازد.
module.exports = { presets: [require("@my-company/tailwind-base")], theme: { extend: { // Project specific overrides... }, },};هر چیزی که شما ارائه می کنید presets جایگزین می کند پیکربندی پیش‌فرض Tailwind پایه، بنابراین می‌توانید نقطه شروع کاملاً سفارشی خود را تعریف کنید. اگر بخشی از تیمی هستید که روی چندین پروژه مختلف Tailwind کار می‌کند که همه باید رنگ‌های برند، سفارشی‌سازی فونت یا مقیاس فاصله را به اشتراک بگذارند، واقعاً مفید است.
حتی می توانید چندین ایستگاه از پیش تنظیم شده را که از بالا به پایین با هم گروه بندی شده اند فهرست کنید:
module.exports = { presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")], theme: { extend: { // Project specific overrides... }, },};منطق ادغام پیکربندی خاص پروژه شما با پیکربندی پایه سفارشی شما دقیقاً مشابه نحوه کارکرد چیزها با پیکربندی پیش فرض است، بنابراین تمام ویژگی هایی که شما دوست دارید extend هنوز دقیقاً همانطور که انتظار دارید کار می کند.
موارد جدید اضافه کردیم gridAutoColumns و gridAutoRows پلاگین های اصلی که ابزارهای جدید برای grid-auto-columns و grid-auto-rows ویژگی های CSS بر این اساس.
این ابزارها به شما امکان می دهند اندازه ستون ها و ردیف های شبکه ای که به طور ضمنی ایجاد شده اند را کنترل کنید. هنگامی که تعدادی ستون/ردیف را برای شبکه خود تعیین نمی کنید، از آنها برای تنظیم اندازه ستون/ردیف پیش فرض استفاده کنید.
div class="grid auto-cols-max grid-flow-col"> div>1div> div>2div> div>3div>div>در اینجا لیستی از ابزارهای جدید استفاده شده است که بلافاصله شامل می شوند:
| کلاس | CSS |
|---|---|
auto-cols-auto |
grid-auto-columns: auto; |
auto-cols-min |
grid-auto-columns: min-content; |
auto-cols-max |
grid-auto-columns: max-content; |
auto-cols-fr |
grid-auto-columns: minmax(0, 1fr); |
auto-rows-auto |
grid-auto-rows: auto; |
auto-rows-min |
grid-auto-rows: min-content; |
auto-rows-max |
grid-auto-rows: max-content; |
auto-rows-fr |
grid-auto-rows: minmax(0, 1fr); |
شامل می کنیم responsive گزینه‌هایی برای این ابزارهای پیش‌فرض و می‌توان آنها را همانطور که در زیر انتظار دارید پیکربندی کرد gridAutoColumns و gridAutoRows بخش های شما tailwind.config.js فایل
به روز رسانی کرده ایم outline-none کلاس برای ارائه a شفاف طرح کلی پیش فرض به جای رندر کردن نه کانتور این واقعاً برای افرادی که از حالت کنتراست بالا در ویندوز استفاده می کنند مفید است، جایی که سبک های فوکوس سفارشی بر اساس سایه های جعبه کاملاً نامرئی هستند.
اکنون می توانید سبک های فوکوس سفارشی را با استفاده از سایه های جعبه ای ایجاد کنید با خیال راحت، بدون اینکه استفاده از سایت های خود را برای افراد کم بینا دشوار کنید.
button class="focus:shadow-outline focus:outline-none ..."> button>ما همچنین دو سبک طرح کلی جدید اضافه کرده ایم: outline-white و outline-black.
این ابزارهای کمکی یک طرح کلی 2 پیکسلی را در رنگ مربوطه خود با یک افست 2 پیکسلی ارائه می دهند. آنها به‌عنوان نشانگرهای فوکوس عمومی و بدون مزاحمت عالی عمل می‌کنند که به کاربران صفحه‌کلید آسان می‌دهد تا ببینند کدام عنصر روی صفحه بدون دخالت بیش از حد در طراحی شما انتخاب شده است.
ما هر دو را گنجانده ایم white و black تغییرات، بنابراین همیشه می توانید مطمئن باشید که گزینه ای در دسترس دارید که کنتراست کافی با رنگ پس زمینه ای که استفاده می کنید دارد.
div class="bg-gray-900"> button class="focus:outline-white ..."> button>div>div class="bg-white"> button class="focus:outline-black ..."> button>div>البته، شما همچنین آزاد هستید تا با استفاده از رنگ‌های پس‌زمینه، سایه‌های کادر، حاشیه‌ها، هر سبک فوکوس سفارشی که می‌خواهید ایجاد کنید. اگر نمی خواهید خیلی شیک شوید، اینها عالی هستند.
ما انجام دادیم outline ویژگی نیز قابل تنظیم است، بنابراین اکنون می توانید خطوط کلی سفارشی را در خود تعریف کنید tailwind.config.js فایل:
module.exports = { theme: { extend: { outline: { blue: "2px solid #0000ff", }, }, },};همچنین می توانید ارائه دهید outline-offset مقدار برای هر ابزار طرح سفارشی با استفاده از یک تاپل از فرم [outline, outlineOffset]:
module.exports = { theme: { extend: { outline: { blue: ["2px solid #0000ff", "1px"], }, }, },};ما سه ابزار پیش‌فرض حاشیه شعاع مرزی اضافه کرده‌ایم:
| کلاس | ارزش |
|---|---|
rounded-xl |
0.75rem (12 پیکسل) |
rounded-2xl |
1rem (16 پیکسل) |
rounded-3xl |
1.5rem (24 پیکسل) |
… و مجموعه ای گسترده از مقادیر کوچکتر برای هر دو rotate و skew آب و برق:
| کلاس | ارزش |
|---|---|
rotate-1 |
1deg |
rotate-2 |
2deg |
rotate-3 |
3deg |
rotate-6 |
6deg |
rotate-12 |
12deg |
skew-1 |
1deg |
skew-2 |
2deg |
نسخه های منفی نیز برای همه آنها گنجانده شده است. فوق العاده مفید برای جلوه های چرخش و اعوجاج ظریف تر!
Tailwind CSS نسخه 1.9 یک نسخه جزئی دائمی است، بنابراین برای ارتقا تنها کاری که باید انجام دهید این است که:
# npmnpm install tailwindcss@^1.9# yarnyarn add tailwindcss@^1.9ما دو تابع آزمایشی قبلی را رایج کردیم (defaultLineHeights و standardFontWeights) به future، بنابراین ما همچنین توصیه می کنیم که اکنون به این تغییرات متعهد شوید تا در پاییز امسال ارتقاء به Tailwind CSS v2.0 را ساده کنید.
می خواهید در مورد این پست صحبت کنید؟ در این مورد در GitHub → بحث کنید
