Tailwind preset to add conic and radial gradients to tailwindcss
npm install tailwind-gradientsExtremely minimal Tailwind CSS plugin for adding gradients to your project with the same syntax as the background-color utilities.
1. cd into your project directory and run the following command:
``bash`
npm i tailwind-gradientstailwind.config.js
2. Add the plugin to your file as a simple preset:
`js`
module.exports = {
// ...
presets: [
require('tailwind-gradients'),
// ...
],
}
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`