tailwindcss-grid-template-areas

A Tailwind CSS v4 plugin that provides utilities for CSS Grid template areas.

Features

• 🏗️ Grid Template Areas: Generate utilities for grid-template-areas
• 📍 Grid Area Placement: Place elements in named grid areas with grid-in-* utilities
• 📏 Named Grid Lines: Utilities for positioning with named grid lines
• 🎨 Arbitrary Values: Support for arbitrary grid template areas
• ⚡ Tailwind CSS v4 Compatible: Built for the latest Tailwind CSS v4 performance
• 📦 TypeScript Support: Full type definitions included

Installation

npm install tailwindcss-grid-template-areas

Usage

Add the plugin to your Tailwind CSS configuration:

@import 'tailwindcss';
@plugin 'tailwindcss-grid-template-areas';

@theme {
  --grid-template-areas-layout: 'header header' 'sidebar main' 'footer footer';
  --grid-template-areas-simple: 'left right';
}

Generated Utilities

Grid Template Areas

• grid-areas-layout → grid-template-areas: "header header" "sidebar main" "footer footer"
• grid-areas-simple → grid-template-areas: "left right"

Grid Area Placement

• grid-in-header → grid-area: header
• grid-in-sidebar → grid-area: sidebar
• grid-in-main → grid-area: main

Named Grid Lines

• row-start-header → grid-row-start: header-start
• row-end-header → grid-row-end: header-end
• col-start-sidebar → grid-column-start: sidebar-start
• col-end-sidebar → grid-column-end: sidebar-end

Arbitrary Values

• grid-areas-[header_main] → grid-template-areas: "header main"
• grid-in-[custom-area] → grid-area: custom-area

Example

<div class="grid grid-areas-layout">
  <header class="grid-in-header">Header</header>
  <aside class="grid-in-sidebar">Sidebar</aside>
  <main class="grid-in-main">Main Content</main>
  <footer class="grid-in-footer">Footer</footer>
</div>

Browser Support

This plugin is designed for modern browsers that support Tailwind CSS v4:

• Safari 16.4+
• Chrome 111+
• Firefox 128+

License

MIT