سیستم شبکه از Tailwind CSS، برای اطلاعات بیشتر به مستندات رسمی مراجعه کنید
از ابزارهای grid-cols-{n} برای ایجاد شبکههایی با n ستون با اندازه مساوی استفاده کنید.
از ابزارهای col-span-{n} برای گسترش یک عنصر به اندازه n ستون استفاده کنید.
از ابزارهای col-start-{n} و col-end-{n} برای تعیین مکان شروع یا پایان یک عنصر در خط nth شبکه استفاده کنید. این ابزارها همچنین میتوانند با col-span-{n} ترکیب شوند تا تعداد خاصی از ستونها را پوشش دهند.
توجه داشته باشید که خطوط شبکه CSS از 1 شروع میشوند نه از 0، بنابراین یک عنصر تمام عرض در شبکه 6 ستونی از خط 1 شروع و در خط 7 تمام میشود.
از ابزارهای grid-rows-{n} برای ایجاد شبکههایی با n ردیف با اندازه مساوی استفاده کنید.
از ابزارهای row-start-{n} و row-end-{n} برای تعیین مکان شروع یا پایان یک عنصر در خط nth ردیف شبکه استفاده کنید. این ابزارها همچنین میتوانند با row-span-{n} ترکیب شوند تا تعداد خاصی از ردیفها را پوشش دهند.
توجه داشته باشید که خطوط شبکه CSS از 1 شروع میشوند نه از 0، بنابراین یک عنصر تمام ارتفاع در شبکه 3 ردیفی از خط 1 شروع و در خط 4 تمام میشود.
از ابزارهای row-span-{n} برای گسترش یک عنصر به اندازه n ردیف استفاده کنید.
از ابزارهای grid-flow-{keyword} برای کنترل نحوه عملکرد الگوریتم قرارگیری خودکار برای چیدمان شبکه استفاده کنید.
از ابزارهای auto-cols-{size} برای کنترل اندازه ستونهای به طور خودکار ایجاد شده در شبکه استفاده کنید.
از ابزارهای auto-rows-{size} برای کنترل اندازه ردیفهای به طور خودکار ایجاد شده در شبکه استفاده کنید.
تایلویند به شما اجازه میدهد که کلاسهای ابزاری را در حالات مختلف به طور مشروط اعمال کنید، به عنوان مثال از hover:{class} برای اعمال فقط {class} هنگام hover استفاده کنید.
شما همچنین میتوانید از واریانتهای مدیا برای هدفگذاری نقاط شکست واکنشگرا، حالت تاریک، prefers-reduced-motion و غیره استفاده کنید. به عنوان مثال، از md:{class} برای اعمال {class} تنها در اندازه صفحههای متوسط و بزرگتر استفاده کنید.