Tailwind Gradients
Extremely minimal Tailwind CSS plugin for adding gradients to your project with the same syntax as the background-color
utilities.
Installation and Setup
- cd into your project directory and run the following command:
npm i tailwind-gradients
- Add the plugin to your
tailwind.config.js
file as a simple preset:
module.exports = {
// ...
presets: [
require('tailwind-gradients'),
// ...
],
}
Usage
The plugin adds the following utilities to your project which are inspectable with tailwind extension for VSCode.
.bg-conic {
background-image: conic-gradient(var(--tw-gradient-stops));
}
/* Directions are: t, b, l, r, tl, tr, bl, br for Top, Bottom, ... */
.bg-conic-at-{direction} {
background-image: conic-gradient({direction}, var(--tw-gradient-stops));
}
.bg-radial {
background-image: radial-gradient(var(--tw-gradient-stops));
}
/* Directions are: t, b, l, r, tl, tr, bl, br for Top, Bottom, ... */
.bg-radial-at-{direction} {
background-image: radial-gradient({direction}, var(--tw-gradient-stops));
}
Hence here's examples on the following classes available for use:
<div class="bg-conic from-red-500 to-blue-500"></div>
<div class="bg-conic-at-tl from-red-500 to-blue-500"></div>
<div class="bg-radial from-red-500 to-blue-500"></div>
<div class="bg-radial-at-tl from-red-500 to-blue-500"></div>
Hypercolor
Here's a forked version of Hypercolor which allows you to generate gradients with the same syntax as the background-color
utilities and using this plugin's syntax!