tailwindcss-grid-area v1.0.10
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