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:

npm i tailwind-gradients

2. 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!