tailwind-grid-areas v1.0.2

A Tailwind CSS plugin designed to streamline the creation of utility classes for defining grid areas in your layouts. This plugin simplifies the process of specifying grid areas, automatically generating corresponding utility classes that seamlessly integrate with your Tailwind styles.

• Usage
• Working with arbitrary values
• Using custom template areas
• Using Responsive Design

Usage

Install @jalex/tailwind-grid-areas with npm package manager:

npm i -D @jalex/tailwind-grid-areas

Import and add the plugin in your Tailwind Config:

import type { Config } from "tailwindcss";
import gridAreas from "@jalex/tailwind-grid-areas";

const config: Config = {
  plugins: [gridAreas()],
};
export default config;

Working with arbitrary values

By default you can work using arbitrary values for grid-template-areas and grid-areas:

!NOTE Employ the utility class grid-areas-[] to configure grid-template-areas and utilize area-[] for styling the grid-area property.

<header className="grid-areas-[ham_logo_actions]">
  <button> className="area-[ham]"</button>
</header>

/* The class grid-areas-[ham_logo_actions] will generate */
grid-template-areas: "ham logo actions";
/* The class area-[ham] will generate */
grid-area: ham;

To create a separation between each area, underscores (_) are used. To define different sections, commas (,) are used:

<header className="grid-areas-[ham_logo_actions,search_search_search]"></header>

/* The class grid-areas-[ham_logo_actions,search_search_search] will generate */
grid-template-areas: "ham logo actions" "search search search";

!TIP If you have multiple consecutive areas with the same name, as in the case of the "search" area in grid-areas-[ham_logo_actions,search_search_search], you can simplify it using the notation search*3. For example, grid-areas-ham_logo_actions,search*3.

Using custom template areas

Within the configuration object, use the gridAreas plugin to specify custom template areas for different sections of your layout. For instance, let's consider a header section with specific areas:

import type { Config } from "tailwindcss";
import gridAreas from "@jalex/tailwind-grid-areas";

const config: Config = {
  plugins: [gridAreas({
    header: [
      "ham logo actions",
      "search search search"
    ]
  )],
};
export default config;

Now you can directly use the custom template areas as follows:

<header className="grid-areas-header">
  <button className="area-ham"></button>
  <a className="area-logo"></a>
  <input className="area-search" />
  <div className="area-actions"></div>
</header>

/* The class grid-areas-header will generate */
.grid-areas-header {
  grid-template-areas: "ham logo actions" "search search search";
}

/* And it automatically generates the utility classes for each area of the template.*/
.area-actions {
  grid-area: actions;
}
.area-ham {
  grid-area: ham;
}
.area-logo {
  grid-area: logo;
}
.area-search {
  grid-area: search;
}

Using Responsive Design

To define a custom template area with responsive behavior, simply specify the template name as a key, and its corresponding value should be an object containing breakpoints as keys. The values for these breakpoints are arrays that represent the areas and sections of the template:

import type { Config } from "tailwindcss";
import gridAreas from "@jalex/tailwind-grid-areas";

const config: Config = {
  plugins: [gridAreas({
    header: {
      base: ["ham search"], // Used to define the base template
      md: ["ham logo actions", "search search search"],
      lg: ["logo nav search actions"]
    }
  )],
};
export default config;

When using this template:

<header className="grid-areas-header"></header>

will generate the following utility classes:

.grid-areas-header {
  grid-template-areas: "ham search"; /* Base style */
}
@media (min-width: 768px) {
  .grid-areas-header {
    grid-template-areas: "ham logo actions" "search search search";
  }
}
@media (min-width: 1024px) {
  .grid-areas-header {
    grid-template-areas: "logo nav search actions";
  }
}

/* And the utility classes for each area of the template.*/

!CAUTION The breakpoints used in the custom template area configuration must be defined in the Tailwind configuration. If you haven't modified the default screens, it will use those by default.