@barbieswimcrew/tailwindcss-grid-x

Tailwind CSS "grid-x" Plugin

A Tailwind CSS plugin that adds an extraordinary grid-x-perience by adding easy-to-use full/breakout/content/narrow grid column template areas.

Install

Requires tailwindcss v1.0 or higher.

Install the plugin via npm:

npm install @barbieswimcrew/tailwindcss-grid-x

Then add the plugin to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@barbieswimcrew/tailwindcss-grid-x'),
    // ...
  ],
}

---

Basic usage

Now you can use the .grid-x component class and the provided .col- grid column utilitiy classes to rock your HTML.

<div class="grid-x *:font-bold *:p-2">
    <div class="col-full bg-amber-200">.col-full</div>
    <div class="col-full-left bg-amber-300">.col-full-left</div>
    <div class="col-full-right bg-amber-400">.col-full-right</div>
    <div class="col-breakout bg-lime-200">.col-breakout</div>
    <div class="col-breakout-left bg-lime-300">.col-breakout-left</div>
    <div class="col-breakout-right bg-lime-400">.col-breakout-right</div>
    <div class="col-content bg-emerald-200">.col-content</div>
    <div class="col-content-left bg-emerald-300">.col-content-left</div>
    <div class="col-content-right bg-emerald-400">.col-content-right</div>
    <div class="col-narrow bg-sky-200">.col-narrow</div>
    <div class="col-narrow-left bg-sky-300">.col-narrow-left</div>
    <div class="col-narrow-right bg-sky-400">.col-narrow-right</div>
    <!-- ... -->
</div>

Choosing the grid column

This plugin provides several utility classes for grid template columns.

Here are the regular classes that are being generated:

Class	Grid template area
col-content (default)	Content area
col-full	Full-width area
col-breakout	Breakout from content area
col-narrow	Narrow area

[!NOTE] If not explicitly set, direct child elements of .grid-x are automatically treated like .col-content.

In addition there are classes for specific use cases:

Class	Grid template area
col-content-left	The left side of the content area
col-content-right	The right side of the content area
col-breakout-left	The left side of the breakout area
col-breakout-right	The right side of the breakout area
col-full-left	The left side of the full area
col-full-right	The right side of the full area
col-narrow-left	The left side of the narrow area
col-narrow-right	The right side of the narrow area

Of course, it can also be fancy! Just play around a bit yourself and try things like... col-[narrow-start_/_content-end] ;-)

---

Customization

Configure max-widths and inline paddings

It is of course possible to adjust the maximum width of the grid column template areas as well as the paddings towards the side of the browser. Simply override the corresponding css vars in the styles/app.css of your project:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root{
      --narrow-max-w: 1200px;
      --content-max-w: 1500px;
      --breakout-max-w: 1700px;
      --narrow-px: 1rem;
      --content-px: 1rem;
      --breakout-px: 0rem;
    /* ... */
  }
}

Changing the default class name

If you need to use a class name other than grid-x for any reason, you can do so using the className option when registering the plugin:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@barbieswimcrew/tailwindcss-grid-x')({
      className: 'foo',
    }),
  ]
  ...
}

---

Copying / License

This repository is distributed under the MIT License (MIT). You can find the whole license text in the LICENSE file.