tailwindcss-webgradients
v1.0.2
Published
Tailwind CSS plugin that adds the gradients from https://webgradients.com as background gradients
Downloads
10
Maintainers
Readme
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}
.