Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Notes

Grid options

While Tailwind u ses or for defining most sizes,are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size. See how aspects of the Tailwind grid system work across multiple devices with a handy table.

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .w- .sm:w- .md:w- .lg:w- .xl:w-
# of columns 12
Gutter width 24px (12px on each side of a column)
Nestable Yes
Column ordering Yes

Grid Column

Using a single set of grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any

.w-full
xl:w-11/12
xl:w-1/12
xl:w-5/6
xl:w-1/6
xl:w-3/4
xl:w-1/4
xl:w-2/3
xl:w-1/3
xl:w-7/12
xl:w-5/12
xl:w-1/2
xl:w-1/2
xl:w-5/12
xl:w-7/12
xl:w-1/3
xl:w-2/3
xl:w-1/4
xl:w-3/4
xl:w-1/6
xl:w-5/6
xl:w-1/12
xl:w-11/12