tailwindcss-chunky-underlines

A TailwindCSS plugin to that generates chunky, overlapped underlines

Install

$ npm install tailwindcss-chunky-underlines

Usage

The gradients option is used to create a linear gradient background image. Example: background-image: linear-gradient(to right, rgba(255,0,0,0.75), rgba(255,0,0,0.75) 50%, rgba(255,0,0,0.25) 50%, rgba(255,0,0,0.25) 100%);

// In your TailwindCSS config
{
  plugins: [
    require('tailwindcss-chunky-underlines')({
      gradients: {
        'red': ['rgba(255,0,0,1) 0%', 'rgba(255,0,0,1) 50%', 'rgba(255,0,0,0.25) 50%', 'rgba(255,0,0,0.25) 100%'],
      },
    }),
  ],
}

This plugin will generate the following classes

.chunky-underline {
  background-image: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.25) 100%);
  background-repeat: no-repeat;
  background-size: 200% 25%;
  background-position:100% 95%;
  transition: all 0.25s ease-in;
  &:hover {
    background-size: 200% 25%;
    background-position: 0 95%;
  }
}

.chunky-underline-[name]{
  background-image: linear-gradient(to right, [value]);
  background-repeat: no-repeat;
}

License

The MIT License (Expat). See the license file for details.