Webgradients Plugin for Tailwind CSS

This Tailwind CSS plugin is a collection of WebGradient's gradients. It adds background utilities with the gradients.

Installation

npm install tailwindcss-webgradients

Usage

In your tailwind.config.js file:

plugins: [
    require('tailwindcss-gradients'),
],

The default specified variant is responsive. You can specify the variants like this:

variants: {
    webGradient: ['responsive', 'hover']
},

Adding the background gradients in your code:

<div class="bg-webgradient-heavy-rain">
</div>
<div class="bg-webgradient-new-life">
</div>
<div class="bg-webgradient-loon-crest">
</div>

Visit WebGradients to pick a gradient, then append its name (dash-cased) on bg-webgradient-{gradient-name-dashed}.