tailwindcss-gradient-border

A Tailwind CSS plugin for automatically styling gradient border

Unlike other related Tailwind plugins, this plugin allows you to specify the gradient border size or gradient colors directly in the CSS with transparent background.

Installation

Install the plugin from npm:

npm install -D tailwindcss-gradient-border

yarn add -D tailwindcss-gradient-border

pnpm i -D tailwindcss-gradient-border

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-gradient-border'),
    // ...
  ],
}

Usage

Use the gradient-border-{n} utilities to specify the gradient border size or gradient colors:

<p class="gradient-border-1 gradient-border-gradient-to-tr from-green-400 to-blue-500">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Note that the gradient-border-{n} set other properties like position to relative.

Configuration

You can configure which values and variants are generated by this plugin under the backgroundImage and borderWidth key in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-1': 'linear-gradient(90deg, #F54200 0%, #F5AF00 100%)',
        'gradient-2': 'linear-gradient(180deg, #FA542C 0%, #ED9A1F 100%)',
        // 'gradient-2': '',
        // 'gradient-3': '',
      },
      borderWidth: {
        1: '1px',
        2: '2px',
        3: '3px',
        4: '4px',
        5: '5px',
      },
    }
  }
}