حاشیه
مقیاسِ حاشیهٔ Tailwind (۰، پیشفرض ۱px، ۲) از اول کوچک و منظم بود؛ آنچه واقعاً نبود، رنگهای حاشیه و کاربردِ هر ضخامت در یک جا مستند شود. یک پلهٔ تازه هم لازم شد: نیمپیکسل، برای جایی که خودِ ۱px هم سنگین است.
رنگِ حاشیه
اینها همان توکنهای معناییِ لایهٔ رنگاند (--border، --input، --ring)؛ رنگِ وضعیتها هم از همان چهار توکنِ destructive/success/warning/info میآید که در تم و توکنها مستندند.
border-borderحاشیهٔ پیشفرضِ کارت، پنل، جدولborder-inputحاشیهٔ استراحتِ اینپوت، سلکت، تکستاریاborder-ringحلقهٔ فوکوس؛ خودِ حاشیه نیست ولی همخانوادهاش استborder-destructiveخطای اعتبارسنجی، حذفِ برگشتناپذیرچهار ضخامتِ معنادار
border-(length:--border-width-fine)0.5pxعنصرهای ریز و متراکم؛ Chip، Tag — همان ۱px هم روی اینها سنگین استborder1pxپیشفرض؛ جداکنندهٔ کارت، اینپوت، جدول — هر جا فقط باید مرز را نشان بدهدborder-22pxتأکید؛ واریانتِ bordered دکمه، حالتِ انتخابشده، آیتمِ فوکوسگرفتهٔ تقویمborder-00pxحذفِ کامل؛ واریانتِ flat که رنگ را با پسزمینه میگوید نه حاشیهگردیِ گوشهها همراهِ حاشیه از توکنهای رادیوس میآید، جدا از این صفحه.
ترفندِ border-transparent
وقتی حالتِ hover یا focus باید حاشیه اضافه کند، آن حاشیه را در حالتِ استراحت هم بگذارید، فقط شفاف. اگر حاشیه در حالتِ استراحت اصلاً وجود نداشته باشد، افزودنش با hover اندازهٔ باکس را ۱ تا ۲ پیکسل جابهجا میکند و عناصرِ اطراف میپرند.
نادرست: بدون حاشیهٔ شفاف
هاور کنید؛ محتوای کنارش هُل میخورد.
درست: حاشیهٔ شفاف از اول
فضای حاشیه از اول رزرو است؛ فقط رنگش عوض میشود.