A17 Tailwind Plugins

Description

Added in v3.1.0

Creates a series of classes to style text underlines using modern CSS.

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

Style
Skip
Thickness
Offset
Color

A note about Tailwind 3's native fancy underline styles

In Tailwind 3, Tailwind introduced "fancy underline styles" to allow styling of text decoration underlines and you may choose to use those instead.

The main differences are these:

this plugin allows you to set underline colours based off theme defined text, border and background colours - which you may find more useful than using Tailwind's colour names or hex values
this plugin defines the offset with ems and not px - so the apparent position of the underline is fluid with the font size and not fixed. Essentially, if you wanted your underline to be level with the bottom of the descender on the letter "g" - if you set the position with pixels and change the font size at breakpoints, you'll need to set multiple pixel values. If you use ems, one value should see you good for all font sizes.
this plugin's classes are prefixed with underline- instead of decoration-, both of which seem sensible, at any rate they don't clash

Setup

tailwind.config.js

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

module.exports = {
  ...
  plugins: [Underline],
  theme: {
    colors: {
      "grey-15": "#d9d9d9",
      "grey-54": "#757575",
      "grey-90": "#1a1a1a",
      black: "#000",
      'blue-03': "#004F91"
    },
    underlineColor: {
      primary: "#757575",
      secondary: "#004F91"
    },
    borderColor: ApplyColorVariables(colors, {
        primary: "#000",
        secondary: "#d9d9d9"
      }
    ),
    textColor: ApplyColorVariables(colors, {
        primary: "#1a1a1a",
        secondary: "#757575",
        accent: "#004F91"
      }
    ),
    backgroundColor: ApplyColorVariables(colors, {
        accent: "#004F91",
      }
    )
  }
  ...
};

Requires theme.textColor, theme.borderColor and/or theme.backgroundColor configured.

Note: theme.colors and theme.underlineColor are only parsed by this plugin after version 3.5.1.

Output

A set up helper to make sure underline styles are applied:

app.css

[class*=underline-] {
  text-decoration-line: underline;
}

A series of classes to give the underline a style:

app.css

.underline-solid {
  text-decoration-style: solid;
}

.underline-dotted {
  text-decoration-style: dotted;
}

.underline-double {
  text-decoration-style: double;
}

.underline-dashed {
  text-decoration-style: dashed;
}

.underline-wavy {
  text-decoration-style: wavy;
}

A series of classes to define the underline skip behavior:

app.css

.underline-skip-none {
  text-decoration-skip-ink: none;
}

.underline-skip-auto {
  text-decoration-skip-ink: auto;
}

.underline-skip-all {
  text-decoration-skip-ink: all;
}

Two classes to use text-decoration-thickness keywords:

app.css

.underline-thickness-auto {
  text-decoration-thickness: auto;
}

.underline-thickness-from-font {
  text-decoration-thickness: from-font;
}

A series of thickness classes, in a px scale from 1 to pixels:

app.css

.underline-thickness-1 {
  text-decoration-thickness: 1px;
}

.underline-thickness-2 {
  text-decoration-thickness: 2px;
}

...

.underline-thickness-20 {
  text-decoration-thickness: 20px;
}

A series of offset classes, in a arbitrary scale of 0 to 20, where 1 - 0.05em, 2 = 0.1em and so on:

app.css

.underline-offset-0 {
  text-underline-offset: 0;
}

.underline-offset-1 {
  text-underline-offset: 0.05em;
}

.underline-offset-2 {
  text-underline-offset: 0.1em;
}

...

.underline-offset-20 {
  text-underline-offset: 1em;
}

A series of negative offset classes in the same arbitrary scale of 0 to 20:

app.css

.-underline-offset-1 {
  text-underline-offset: -0.05em;
}

.-underline-offset-2 {
  text-underline-offset: -0.1em;
}

...

.-underline-offset-20 {
  text-underline-offset: -1em;
}

And finally, a series of colour classes based on your tailwind config color set for textColor, backgroundColor and borderColor, for example:

app.css

.underline-text-primary {
  text-decoration-color: #1a1a1a;
}

.underline-text-secondary {
  text-decoration-color: #757575;
}

.underline-border-primary {
  text-decoration-color: #757575;
}

.underline-border-secondary {
  text-decoration-color: #f00;
}

Demo

Responsive, interactive demo

hover me, resize page

document.html

<span class="underline-solid underline-offset-4 underline-thickness-4 underline-border-tertiary underline-skip-none lg:underline-thickness-8 focus:underline-border-secondary hover:underline-border-primary"><span>

Underline style (`text-decoration-style`)

underline-solid underline-double underline-dotted underline-dashed underline-wavy

document.html

<span class="underline-solid">underline-solid</span>

<span class="underline-double">underline-double</span>

<span class="underline-dotted">underline-dotted</span>

<span class="underline-dashed">underline-dashed</span>

<span class="underline-wavy">underline-wavy</span>

Underline skip (`text-decoration-skip-ink`)

underline-skip-none underline-skip-auto underline-skip-all

document.html

<span class="underline-solid underline-skip-none">underline-skip-none</span>

<span class="underline-solid underline-skip-auto">underline-skip-auto</span>

<span class="underline-solid underline-skip-all">underline-skip-all</span>

Underline thickness (`text-decoration-thickness`)

Thickness keywords

underline-thickness-auto underline-thickness-from-font

document.html

<span class="underline-solid underline-thickness-auto">underline-thickness-auto</span>

<span class="underline-solid underline-thickness-from-font">underline-thickness-from-font</span>

Thickness scale (in `px`)

underline-thickness-1 underline-thickness-2 underline-thickness-3 underline-thickness-4 underline-thickness-5 underline-thickness-6 underline-thickness-7 underline-thickness-8 underline-thickness-9 underline-thickness-10 underline-thickness-11 underline-thickness-12 underline-thickness-13 underline-thickness-14 underline-thickness-15 underline-thickness-16 underline-thickness-17 underline-thickness-18 underline-thickness-19 underline-thickness-20

document.html

<span class="underline-solid underline-thickness-1">underline-thickness-1</span>

<span class="underline-solid underline-thickness-2">underline-thickness-2</span>

<span class="underline-solid underline-thickness-3">underline-thickness-3</span>

<span class="underline-solid underline-thickness-4">underline-thickness-4</span>

<span class="underline-solid underline-thickness-5">underline-thickness-5</span>

<span class="underline-solid underline-thickness-6">underline-thickness-6</span>

<span class="underline-solid underline-thickness-7">underline-thickness-7</span>

<span class="underline-solid underline-thickness-8">underline-thickness-8</span>

<span class="underline-solid underline-thickness-9">underline-thickness-9</span>

<span class="underline-solid underline-thickness-10">underline-thickness-10</span>

<span class="underline-solid underline-thickness-11">underline-thickness-11</span>

<span class="underline-solid underline-thickness-12">underline-thickness-12</span>

<span class="underline-solid underline-thickness-13">underline-thickness-13</span>

<span class="underline-solid underline-thickness-14">underline-thickness-14</span>

<span class="underline-solid underline-thickness-15">underline-thickness-15</span>

<span class="underline-solid underline-thickness-16">underline-thickness-16</span>

<span class="underline-solid underline-thickness-17">underline-thickness-17</span>

<span class="underline-solid underline-thickness-18">underline-thickness-18</span>

<span class="underline-solid underline-thickness-19">underline-thickness-19</span>

<span class="underline-solid underline-thickness-20">underline-thickness-20</span>

Underline offset (`text-underline-offset`)

underline-offset-0 underline-offset-1 underline-offset-2 underline-offset-3 underline-offset-4 underline-offset-5 underline-offset-6 underline-offset-7 underline-offset-8 underline-offset-9 underline-offset-10 underline-offset-11 underline-offset-12 underline-offset-13 underline-offset-14 underline-offset-15 underline-offset-16 underline-offset-17 underline-offset-18 underline-offset-19 underline-offset-20

document.html

<span class="underline-solid underline-offset-0">underline-offset-0</span>

<span class="underline-solid underline-offset-1">underline-offset-1</span>

<span class="underline-solid underline-offset-2">underline-offset-2</span>

<span class="underline-solid underline-offset-3">underline-offset-3</span>

<span class="underline-solid underline-offset-4">underline-offset-4</span>

<span class="underline-solid underline-offset-5">underline-offset-5</span>

<span class="underline-solid underline-offset-6">underline-offset-6</span>

<span class="underline-solid underline-offset-7">underline-offset-7</span>

<span class="underline-solid underline-offset-8">underline-offset-8</span>

<span class="underline-solid underline-offset-9">underline-offset-9</span>

<span class="underline-solid underline-offset-10">underline-offset-10</span>

<span class="underline-solid underline-offset-11">underline-offset-11</span>

<span class="underline-solid underline-offset-12">underline-offset-12</span>

<span class="underline-solid underline-offset-13">underline-offset-13</span>

<span class="underline-solid underline-offset-14">underline-offset-14</span>

<span class="underline-solid underline-offset-15">underline-offset-15</span>

<span class="underline-solid underline-offset-16">underline-offset-16</span>

<span class="underline-solid underline-offset-17">underline-offset-17</span>

<span class="underline-solid underline-offset-18">underline-offset-18</span>

<span class="underline-solid underline-offset-19">underline-offset-19</span>

<span class="underline-solid underline-offset-20">underline-offset-20</span>

Negative offsets

-underline-offset-20 -underline-offset-19 -underline-offset-18 -underline-offset-17 -underline-offset-16 -underline-offset-15 -underline-offset-14 -underline-offset-13 -underline-offset-12 -underline-offset-11 -underline-offset-10 -underline-offset-9 -underline-offset-8 -underline-offset-7 -underline-offset-6 -underline-offset-5 -underline-offset-4 -underline-offset-3 -underline-offset-2 -underline-offset-1

document.html

<span class="underline-solid -underline-offset-20">-underline-offset-20</span>

<span class="underline-solid -underline-offset-19">-underline-offset-19</span>

<span class="underline-solid -underline-offset-18">-underline-offset-18</span>

<span class="underline-solid -underline-offset-17">-underline-offset-17</span>

<span class="underline-solid -underline-offset-16">-underline-offset-16</span>

<span class="underline-solid -underline-offset-15">-underline-offset-15</span>

<span class="underline-solid -underline-offset-14">-underline-offset-14</span>

<span class="underline-solid -underline-offset-13">-underline-offset-13</span>

<span class="underline-solid -underline-offset-12">-underline-offset-12</span>

<span class="underline-solid -underline-offset-11">-underline-offset-11</span>

<span class="underline-solid -underline-offset-10">-underline-offset-10</span>

<span class="underline-solid -underline-offset-9">-underline-offset-9</span>

<span class="underline-solid -underline-offset-8">-underline-offset-8</span>

<span class="underline-solid -underline-offset-7">-underline-offset-7</span>

<span class="underline-solid -underline-offset-6">-underline-offset-6</span>

<span class="underline-solid -underline-offset-5">-underline-offset-5</span>

<span class="underline-solid -underline-offset-4">-underline-offset-4</span>

<span class="underline-solid -underline-offset-3">-underline-offset-3</span>

<span class="underline-solid -underline-offset-2">-underline-offset-2</span>

<span class="underline-solid -underline-offset-1">-underline-offset-1</span>

Underline color (`text-decoration-color`)

Underline colour takes its values from your Tailwind config colors. It creates classes from theme.colors and theme.underlineColor and also name spaced classes from theme.textColor, theme.borderColor and/or theme.backgroundColor.

From theme.underlineColor, using the config in this document:

underline-primary underline-secondary

document.html

<span class="underline-solid underline-thickness-2 underline-primary">underline-primary</span>

<span class="underline-solid underline-thickness-2 underline-secondary">underline-secondary</span>

From theme.colors, using the config in this document:

underline-grey-15 underline-grey-54 underline-grey-90 underline-black underline-blue-03

document.html

<span class="underline-solid underline-thickness-2 underline-grey-15">underline-grey-15</span>

<span class="underline-solid underline-thickness-2 underline-grey-54">underline-grey-54</span>

<span class="underline-solid underline-thickness-2 underline-grey-90">underline-grey-90</span>

<span class="underline-solid underline-thickness-2 underline-black">underline-black</span>

<span class="underline-solid underline-thickness-2 underline-blue-03">underline-blue-03</span>

And finally, from theme.textColor, theme.borderColor and/or theme.backgroundColor, using the config in this document:

underline-text-primary underline-text-secondary underline-text-accent underline-border-primary underline-border-secondary underline-bg-accent

document.html

<span class="underline-solid underline-thickness-2 underline-text-primary">underline-text-primary</span>

<span class="underline-solid underline-thickness-2 underline-text-secondary">underline-text-secondary</span>

<span class="underline-solid underline-thickness-2 underline-text-accent">underline-text-accent</span>

<span class="underline-solid underline-thickness-2 underline-border-primary">underline-border-primary</span>

<span class="underline-solid underline-thickness-2 underline-border-secondary">underline-border-secondary</span>

<span class="underline-solid underline-thickness-2 underline-bg-accent">underline-bg-accent</span>

Description

A note about Tailwind 3's native fancy underline styles

Setup

Output

Demo

Responsive, interactive demo

Underline style (text-decoration-style)

Underline skip (text-decoration-skip-ink)

Underline thickness (text-decoration-thickness)

Thickness keywords

Thickness scale (in px)

Underline offset (text-underline-offset)

Negative offsets

Underline color (text-decoration-color)

Underline style (`text-decoration-style`)

Underline skip (`text-decoration-skip-ink`)

Underline thickness (`text-decoration-thickness`)

Thickness scale (in `px`)

Underline offset (`text-underline-offset`)

Underline color (`text-decoration-color`)