svale / tailwindcss-grid

CSS Grid Tailwind Plugin

Isolated from https://github.com/tailwindcss/plugin-examples

View demo · View source

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 generate
• gaps, for specifying the gap sizes you'd like to generate
• variants, 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 setting display: 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.