Keyline

Description

This plugin creates a border that sits in the gutter between elements and assumes spacing is that of var(--inner-gutter).

It creates utility classes based on the borderColor settings in your Tailwind config (falls back to colors).

• keyline-l-primary draws a keyline to the left of the element in the primary colour
• keyline-r-primary draws a keyline to the right of the element in the primary colour
• md:keyline-l-secondary draws a keyline to the left of the element in the secondary border colour at medium and up (see config below)
• lg:keyline-l-tertiary draws a keyline to the left of the element in the tertiary border colour at large and up (see config below)
• keyline-0 hides both left and right keylines on the element, if previously set
• md:keyline-0 hides both left and right keylines on the element, if previously set, at medium and up
• md:keyline-l-0 hides just the left keyline at medium and up
• md:keyline-r-0 hides just the right keyline and medium and up

Setup

const { Setup, Keyline } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Setup, Keyline],
  theme: {
    innerGutters: {
      xs: "10px",
      sm: "15px",
      md: "20px",
      lg: "30px",
      xl: "40px",
      xxl: "40px"
    },
    borderColor: {
      "primary": "#757575",
      "secondary": "#f00",
      "tertiary": "#d9d9d9"
    }
  }
  ...
};

Requires Setup plugin with theme.innerGutters and theme.borderColor configured.

Demo

Based on the reference config mentioned in this guide, and with a simple two column CSS grid layout, we would get the following in our CSS:

<div class="grid grid-cols-2 gap-gutter mt-20">
  <div class="h-40 bg-column"></div>
  <div class="h-40 bg-column keyline-l-primary"></div>
</div>

A more complex example, which differing numbers of columns per breakpoint, and keylines being shown, hidden and changing colour:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-gutter gap-y-20">
  <div></div>
  <div class="keyline-l-primary lg:keyline-l-secondary"></div>
  <div class="md:keyline-l-primary lg:keyline-l-secondary"></div>
  <div class="keyline-l-primary md:keyline-l-0 lg:keyline-l-secondary"></div>
  <div class="md:keyline-l-primary lg:keyline-l-0"></div>
  <div class="keyline-l-primary lg:keyline-l-secondary"></div>
</div>

As you can see, its possible to add and maintain keylines in the gutters between elements within a responsive grid but its a bit of a mess of adding/removing classes. So, this plugin is probably better used for simpler layouts (left/right columns) and for grid layouts you may want to use the GridLine plugin instead.