StrokeFull

Description

This plugin creates a series of classes to draw a 100vw stroke pseudo layer.

Jump to the demos to see each in action, or jump to a specific underline class group:

• Position
• Color
• Style
• Thickness

Setup

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

module.exports = {
  ...
  plugins: [StrokeFull],
  theme: {
    borderColor: {
      primary: "#000",
      secondary: "#d9d9d9",
      tertiary: "#757575",
    }
  }
  ...
};

Demos

The basic usage is to add stroke-full-bottom to draw a stroke at the bottom of your container, or stroke-full-top - along with a colour for your stroke, stroke-full-primary:

<div class="stroke-full-bottom stroke-full-primary">...</div>

Stroke colours are derived from your theme.borderColor settings. So, using the secondary border colour and drawing a top stroke:

<div class="stroke-full-top stroke-full-secondary">...</div>

Usage with background-fill:

<div class="background-fill-header stroke-full-bottom stroke-full-tertiary">...</div>

You can also change the border style - any valid CSS border style can be used. So, using stroke-full-dotted:

<div class="stroke-full-bottom stroke-full-primary stroke-full-dotted">...</div>

And stroke-full-dashed:

<div class="stroke-full-bottom stroke-full-primary stroke-full-dashed">...</div>

By default, the stroke width is 0.0625em (1px). But, you can use any spacing value from your theme.spacing config. For a 0.125em (2px) stroke

<div class="stroke-full-bottom stroke-full-primary stroke-full-2">...</div>

And a 0.25em (4px) stroke:

<div class="stroke-full-bottom stroke-full-primary stroke-full-4">...</div>

Combining type with thickness, a 0.625em (10px) dashed stroke: