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

1. cd into your project directory and run the following command:

``bash
npm i tailwind-gradients
`
2. Add the plugin to your tailwind.config.js file as a simple preset:

`js
module.exports = {
// ...
presets: [
require('tailwind-gradients'),
// ...
],
}
`

Usage

The plugin adds the following utilities to your project which are inspectable with tailwind extension for VSCode.

`css
.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:

`html


`

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!

!Hypercolor