TailwindCSS plugin for Grid Areas

Add support for Grid areas within TailwindCSS

Usage

This plugin adds two new utilities for TailwindCSS to work with grid areas - grid-areas-[<areas>] and grid-area-[<area>] (or grid-area/<named-area>)

<div class="grid grid-cols-5 grid-rows-3 bg-yellow-100">

    <div class="p-10 bg-blue-300 grid-area-auto"></div>

    <div class="p-10 bg-red-300 grid-area-[2/2/span_2/span_3]"></div>

</div>

Result:

Generated CSS:

.grid-area-auto {
  grid-area: auto;
}

.grid-area-\[2\/2\/span_2\/span_3\] {
  grid-area: 2/2/span 2/span 3;
}

Named Areas

<div class="grid grid-areas-['sidebar_center_left'_'sidebar_footer_footer']">

    <div class="p-10 bg-blue-300 grid-area/left"></div>

    <div class="p-10 bg-yellow-300 grid-area/center"></div>

    <div class="p-10 bg-red-300 grid-area/sidebar"></div>

    <div class="p-10 bg-green-300 grid-area/footer"></div>

</div>

Result:

Generated CSS:

.grid-area\/left {
  grid-area: left;
}

.grid-area\/center {
  grid-area: center;
}

.grid-area\/sidebar {
  grid-area: sidebar;
}

.grid-area\/footer {
  grid-area: footer;
}

.grid-areas-\[\'sidebar_center_left\'_\'sidebar_footer_footer\'\] {
  grid-template-areas: 'sidebar center left' 'sidebar footer footer';
}

Installation

npm i tailwindcss-grid-area

Require plugin within plugins section of tailwind.config.js

// tailwind.config.js

module.exports = {
    // ...
    
    plugins: [
        require('tailwindcss-grid-area'),
    ],
}

Configuration

Plugin provides some default utilities for grid-area - same syntax as for global values for grid-area CSS property

| Utility | Generated CSS | | --- | --- | | grid-area, grid-area-auto | grid-area: auto | | grid-area-inherit | grid-area: inherit | | grid-area-initial | grid-area: initial | | grid-area-revert | grid-area: revert | | grid-area-layer | grid-area: revert-layer | | grid-area-unset | grid-area: unset |

Arbitrary Values

There are no default properties for grid-areas (as it is purely user-configured setting). However if you wish to use custom defined utility register it under gridAreas key

// tailwind.config.js

module.exports = {
    // ...
    
    theme: {
        extend: {
            gridAreas: {
                app: "'header header' 'sidebar main' 'sidebar footer'",
            },
        },
    },
}

<div class="grid grid-areas-app"></div>

More about grid-template-areas you may find on MDN

Same valid for grid-area utility but key name is gridArea

// tailwind.config.js

module.exports = {
    // ...
    
    theme: {
        extend: {
            gridArea: {
                custom: '1 / 1 / span 2 / 3',
            },
        },
    },
}

<div class="grid-area-custom"></div>

When working with arbitrary values remember that Tailwind does NOT recognize spaces - use underscore _ instead

<div class="grid-area-[1_/_1_/_span_2_/_3]"></div>

<!-- Or -->
<div class="grid-area-[1/1/span_2/3]"></div>

Using Labels

When working with named grid areas you may use Tailwind labels instead of arbitrary variants

<div class="grid-area/header"></div>

<!-- Same as -->
<div class="grid-area-[header]"></div>

License

Open-source under MIT license