Package Exports

tailwind-gradients
tailwind-gradients/gradients.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-gradients) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!