Published under TailwindCSS.
Support for CSS grids has been added to Tailwind v1.2. Here's a little example:
Tailwind provides support for a lot of CSS grid properties out of the box, but a lot of them don't have default values. The default values are based around a 12-column grid.
Default values for gap are the spacing values setup in your configuration (same as margin, padding, etc).
There are no default values for the row-gap classes.
There are no default values for the column gap classes.
grid-cols-* sets the
grid-template-columns and is used on the grid wrapper to tell the grid how many columns it should support. Default values:
col-* class sets the
grid-column property, and tells the element how many columns it should span across. Default values:
col-start-* / col-end-*
col-end-* sets the
grid-column-end properties on the element. These tell the element where which column to start and end at, respectively. Default values:
grid-rows-* sets the
grid-template-rows on the element, and is used on the grid wrapper to tell the element how many rows are in the grid. There are no default values.
row-* sets the
grid-row property on the element, telling it which rows to occupy. There are no default values.
row-start-* / row-end-*
row-end-* sets the
grid-row-end properties on the element. These tell the element where which row to start and end at, respectively. There are no default values.
Be sure to read the full TailwindCSS documentation!
Subscribe to my newsletter to know when I publish more content in the future.