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
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:
A more complex example, which differing numbers of columns per breakpoint, and keylines being shown, hidden and changing colour:
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.