npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tailwindcss-grid-areas

v0.1.1

Published

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 integ

Downloads

2,271

Readme

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

Install tailwindcss-grid-areas using npm package manager:

npm i -D tailwindcss-grid-areas

Import and add the plugin in your Tailwind Config:

import type { Config } from "tailwindcss";
import { gridAreas } from "tailwindcss-grid-areas";

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

export default config;

Working with arbitrary values

By default, you can use arbitrary values for grid-template-areas and grid-areas. Employ the utility class grid-areas-[] to configure grid-template-areas and use 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;

Employ commas to distinguish distinct areas and utilize underscores to subdivide those areas into multiple sections.

<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";

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 "tailwindcss-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, 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 "tailwindcss-grid-areas";

const config: Config = {
  plugins: [
    gridAreas({
      header: {
        // [breakpoint]: areas
        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>

It 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.*/

Note: 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.