Tailwind CSS - SavvyWombat

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: {
    extend: {
      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:

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>

CSS Globals and Keywords

Using the plugin will also provide utilities that allow you to use the CSS global and keyword values:

grid-areas-none
grid-areas-inherit
grid-areas-initial
grid-areas-revert
grid-areas-revert-layer
grid-areas-unset

grid-in-auto
grid-in-inherit
grid-in-initial
grid-in-revert
grid-in-revert-layer
grid-in-unset

Variants

// tailwindcss.config.js
module.exports = {
  theme: {
    extend: {
      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.

Arbitrary Values

The plugin supports the use of arbitrary values via dynamic class names.

<div class="grid grid-areas-[left_right] grid-cols-2">
  <div class="grid-in-[left]"></div>
  <div class="grid-in-[right]"></div>
</div>

To specify a grid area with multiple rows, separate them with a comma:

<div class="grid grid-areas-[left_right,bottom-left_right] grid-cols-2 grid-rows-2">

You can use the dot character to indicate and empty area in your grid:

<div class="grid grid-areas-[left_right,._right] grid-cols-2 grid-rows-2">