Wondering what’s next for npm?Check out our public roadmap! »

    @downwindcss/text-decoration
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2-alpha.11 • Public • Published

    @downwindcss/text-decoration

    A Tailwind CSS Plugin for text-decoration utility.

    This plugin is composable (Composing the Uncompsable with CSS Variables) thus can add multiple decoration-line utitlies (to add under/overline and line-through together. Refer to the "Usage" sectrion below)

    Installation

    npm install @downwindcss/text-decoration
    # for Yarn users
    yarn add @downwindcss/text-decoration

    Configuration

    Add the plugin in tailwind.config.js in Plugins section.

    // tailwind.config.js
    module.exports = {
      plugins: [require('@downwindcss/text-decoration')],
    };

    Utilities

    Usage

    To enable text-decoration utilities, you need to add .text-decoration class.

    By itself it doesn't apply any style similar to how built-in Transform utility doesn't apply any transformations.

    <h2 class="text-decoration">Header</h2>

    decoration-line

    Utilities for applying lines.
    MDN: decoration-line

    Use Tailwind CSS's no-underline to remove text decoration.

    ATTRIBUTION: Screenshots on decoration-line by Mozilla Contributrors is licensed under CC-BY-SA 2.5

    underline.

    <p>
      I'd far rather be
      <span class="text-decoration decoration-line-underline">
        happy than right
      </span>
      any day.
    </p>

    rendered

    overline.

    <p>
      I'd far rather be
      <span class="text-decoration decoration-line-overline">
        happy than right
      </span>
      any day.
    </p>

    rendered

    line-through.

    <p>
      I'd far rather be
      <span class="text-decoration decoration-line-through">
        happy than right
      </span>
      any day.
    </p>

    rendered

    NOTE: It's not decoration-line-line-through even though CSS applied is decoration-line: line-through;

    underline + overline + line-through

    <p>
      I'd far rather be
      <span
        class="text-decoration 
          decoration-overline 
          decoration-underline 
          decoration-line-through"
      >
        happy than right
      </span>
      any day.
    </p>

    rendered

    text-decoration-color

    All Tailwind CSS colors AND your extended colors are available.

    You can extend decoration colors and by extending textDecorationPlugin.colors.

    Extend colors in tailwind.config.js

    const colors = require('tailwindcss/colors')
    
    module.exports = {
      theme: {
        extend: {
          textDecorationPlugin: {
            colors: {
              primary: 'tomato',
              secondary: 'gold',
            },
          },    },
      },
      variants: {},
      plugins: [textDecorationPlugin],
    }

    And use them in your HTML markup.

    <h1 class="text-decoration 
        decoration-underline decoration-overline decoration-line-through 
        decoration-wavy
        decoration-primary
        decoration-2">
        Header
    </h1>

    If you extend colors, extended colors will be available for the plugin.

    const colors = require('tailwindcss/colors')
    
    module.exports = {
      theme: {
        extend: {
          colors: {
            'light-blue': colors.lightBlue,
          },
          textDecorationPlugin: {
            colors: {
              primary: 'tomato',
            },
          },
        },
      },
      variants: {},
      plugins: [textDecorationPlugin],
    }

    And use them in your HTML markup.

    <h1 class="text-decoration 
        decoration-underline decoration-overline decoration-line-through 
        decoration-wavy
        decoration-light-blue-300
        decoration-2">
        Header
    </h1>

    text-decoration-style

    You can use following text-decoration-styles.

    CSS Applied Style
    decoration-solid text-decoration: solid
    decoration-double text-decoration: double
    decoration-dotted text-decoration: dotted
    decoration-dashed text-decoration: dashed
    decoration-wavy text-decoration: wavy

    text-decoration-thickness

    When you type decoration-{thickness: number}, text-decoration-thickness will be applied.

    As an example, decoration-2 will apply 2px thickness

    <h1 class="text-decoration 
        decoration-underline decoration-overline decoration-line-through 
        decoration-wavy
        decoration-primary
        decoration-2">
        Header
    </h1>

    Available values are,

    CSS Applied Style
    decoration-1 text-decoration-thickness: 1px;
    decoration-2 text-decoration-thickness: 2px;
    decoration-4 text-decoration-thickness: 4px;
    decoration-8 text-decoration-thickness: 8px;

    You can extend the thickness by updating configuration, textDecorationPlugin.thicknesses property.

    module.exports = {
      theme: {
        extend: {
          textDecorationPlugin: {
            thicknesses: {
              '0.2rem': '0.2rem',
            },
          },
        },
      },
      variants: {},
      plugins: [textDecorationPlugin],
    }

    And use it as decoration-0.2rem.

    Clearing Deocration

    Use decoration-none.

    Duplicate Utilities

    Following text-decoration can be done with native Tailwind CSS utilities but also added in this plugin to enable composability.

    1. underline: text-decoration: underline;
    2. line-through: text-decoration: line-through;
    3. no-underline: text-decoration: none;

    Resource

    Context

    Based on idea post in Tailwind CSS dicussion, https://github.com/tailwindlabs/tailwindcss/discussions/3749

    This plugin provides missing Tailwind CSS text-decoration* properties as a plugin.

    Build

    This project uses PNPM

    Keywords

    none

    Install

    npm i @downwindcss/text-decoration

    DownloadsWeekly Downloads

    565

    Version

    0.0.2-alpha.11

    License

    MIT

    Unpacked Size

    207 kB

    Total Files

    31

    Last publish

    Collaborators

    • avatar