SavvyWombat

Grid Areas for Tailwind CSS

A plugin to provide Tailwind CSS utilities for named grid areas.

# npm
npm install --save-dev @savvywombat/tailwindcss-grid-areas

# yarn
yarn add --dev @savvywombat/tailwindcss-grid-areas
GitHub npm

Usage

Require the plugin in your tailwindcss.config.js file, and define your template areas, along with any row/column specifications:

// tailwindcss.config.js
module.exports = {
  theme: {
    gridTemplateAreas: {
      'layout': [
        'header header header',
        'nav    main   main',
        'nav    footer footer',
      ],
    },
    gridTemplateColumns: {
      'layout': '24rem 1fr 2rem',
    },
    gridTemplateRows: {
      'layout': '6rem
                 3rem
                 1fr
                 auto',
    },
  },
  plugins: [
    require('@savvywombat/tailwindcss-grid-areas')
  ]
}

This will generate the following utilities (in addition to the default):

grid-areas-layout

grid-in-footer
grid-in-header
grid-in-main
grid-in-nav

col-start-footer
col-start-header
col-start-main
col-start-nav
col-end-footer
col-end-header
col-end-main
col-start-nav

row-start-footer
row-start-header
row-start-main
row-start-nav
row-end-footer
row-end-header
row-end-main
row-end-nav
<body class="grid grid-areas-layout grid-cols-layout grid-rows-layout h-full">
    <header class="grid-in-header"></header>
    <nav class="grid-in-nav"></nav>
    <main class="grid-in-main"></main>
    <footer class="grid-in-footer"></footer>
</body>

Variants

// tailwindcss.config.js
module.exports = {
  theme: {
    gridTemplateAreas: {
      'wide': [
        'header header header',
        'nav    main   main',
        'nav    footer footer',
      ],
      'slim': [
        'header',
        'nav',
        'main',
        'footer',
      ],
    },
  },
  plugins: [
    require('@savvywombat/tailwindcss-grid-areas')
  ],
  variants: {
    gridTemplateAreas: ['responsive']
  }
}
<div class="grid grid-areas-slim md:grid-areas-wide"></div>

This will generate variants only for the grid-areas-* utilities and not grid-in-* or col/row-start/end. This allows you to easily rearrange the contents of a grid by reshaping it.

You should ensure that the different grids used for responsive layout have the same named areas, or content may be rendered outside of the grid.