Isolated from https://github.com/tailwindcss/plugin-examples
In plugins/css-grid/index.js
you'll find an example of a plugin that adds new utilities for using CSS Grid Layout.
It exposes three configuration options:
grids
, for specifying all of the grid sizes you'd like to generategaps
, for specifying the gap sizes you'd like to generatevariants
, for specifying which variants to generate
module.exports = {
// ...
plugins: [
// ...
require('./plugins/css-grid')({
grids: [2, 3, 5, 6, 8, 10, 12],
gaps: {
0: '0',
4: '1rem',
8: '2rem',
},
variants: ['responsive'],
}),
],
}
With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and responsive
variants for each new utility.
The plugin generates the following sets of classes:
.grid
, for settingdisplay: grid
on an element.grid-columns-{size}
, for specifying the number of columns in the grid.grid-gap-{size}
, for specifying the size of the gap between columns/rows.col-span-{columns}
, for specifying how wide a cell should be.col-start-{line}
and.col-end-{line}
, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps).row-span-{columns}
, for specifying how tall a cell should be.row-start-{line}
and.row-end-{line}
, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps)
It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid.