A Tailwind CSS plugin that simplifies the creation of utility classes for defining grid areas in layouts. It streamlines the process of specifying grid areas by generating corresponding utility classes that seamlessly integrate with Tailwind styles.

• Install
• Working with Arbitrary Values
• Using Custom Template Areas
• Using Responsive Design

Install

Install tailwindcss-grid-template-short using npm package manager:

npm i -D tailwindcss-grid-template-short

Import and add the plugin in your Tailwind Config:

import type { Config } from "tailwindcss";
import grid from "tailwindcss-grid-template-short";

const config: Config = {
  plugins: [grid()],
};

export default config;

This plugin allows you to use a shorthand syntax for creating grid layouts. For example, instead of writing grid-{cols,rows}-[1fr,auto], you can write grid-{cols,rows}-1a. For values that are not in the default configuration, you should use grid-{cols,rows}-custom-[1a1].

To expand the initial set, you need to pass an array of shorthand values to the addToStart key.

import type { Config } from "tailwindcss";
import grid from "tailwindcss-grid-template-short";

const config: Config = {
  plugins: [grid({
    addToStart: ['aa4', '1a4']
  })],
};

export default config;