Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/benface/tailwindcss-gradients

Tailwind CSS plugin to generate gradient background utilities
https://github.com/benface/tailwindcss-gradients

tailwindcss tailwindcss-plugin

Last synced: 15 days ago
JSON representation

Tailwind CSS plugin to generate gradient background utilities

Awesome Lists containing this project

README 

        
# [BLACK LIVES MATTER](https://blacklivesmatters.carrd.co)



### Be aware. Be angry. Do better. Demand change. Show your support any way you can. Click on the link above to find protests, petitions, and other ways to help. DO NOT LET IT GO SILENT.



# Gradients Plugin for Tailwind CSS



## Requirements



This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (`npm install [email protected]`).



## Installation



```bash

npm install tailwindcss-gradients

```



## Usage



### Simple



```js

{

  theme: {

    colors: {

      'red': '#f00',

      'blue': '#00f',

    },

    linearGradientColors: theme => theme('colors'),

    radialGradientColors: theme => theme('colors'),

    conicGradientColors: theme => theme('colors'),

  },

  plugins: [

    require('tailwindcss-gradients'),

  ],

}

```



### Advanced



```js

// tailwind.config.js

module.exports = {

  theme: {

    linearGradientDirections: { // defaults to these values

      't': 'to top',

      'tr': 'to top right',

      'r': 'to right',

      'br': 'to bottom right',

      'b': 'to bottom',

      'bl': 'to bottom left',

      'l': 'to left',

      'tl': 'to top left',

    },

    linearGradientColors: { // defaults to {}

      'red': '#f00',

      'red-blue': ['#f00', '#00f'],

      'red-green-blue': ['#f00', '#0f0', '#00f'],

      'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],

    },

    radialGradientShapes: { // defaults to this value

      'default': 'ellipse',

    },

    radialGradientSizes: { // defaults to this value

      'default': 'closest-side',

    },

    radialGradientPositions: { // defaults to these values

      'default': 'center',

      't': 'top',

      'tr': 'top right',

      'r': 'right',

      'br': 'bottom right',

      'b': 'bottom',

      'bl': 'bottom left',

      'l': 'left',

      'tl': 'top left',

    },

    radialGradientColors: { // defaults to {}

      'red': '#f00',

      'red-blue': ['#f00', '#00f'],

      'red-green-blue': ['#f00', '#0f0', '#00f'],

      'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],

    },

    conicGradientStartingAngles: { // defaults to this value

      'default': '0',

    },

    conicGradientPositions: { // defaults to these values

      'default': 'center',

      't': 'top',

      'tr': 'top right',

      'r': 'right',

      'br': 'bottom right',

      'b': 'bottom',

      'bl': 'bottom left',

      'l': 'left',

      'tl': 'top left',

    },

    conicGradientColors: { // defaults to {}

      'red': '#f00',

      'red-blue': ['#f00', '#00f'],

      'red-green-blue': ['#f00', '#0f0', '#00f'],

      'checkerboard': ['white 90deg', 'black 90deg 180deg', 'white 180deg 270deg', 'black 270deg'],

    },

    repeatingLinearGradientDirections: theme => theme('linearGradientDirections'), // defaults to this value

    repeatingLinearGradientColors: theme => theme('linearGradientColors'), // defaults to {}

    repeatingLinearGradientLengths: { // defaults to {}

      'sm': '25px',

      'md': '50px',

      'lg': '100px',

    },

    repeatingRadialGradientShapes: theme => theme('radialGradientShapes'), // defaults to this value

    repeatingRadialGradientSizes: { // defaults to this value

      'default': 'farthest-corner',

    },

    repeatingRadialGradientPositions: theme => theme('radialGradientPositions'), // defaults to this value

    repeatingRadialGradientColors: theme => theme('radialGradientColors'), // defaults to {}

    repeatingRadialGradientLengths: { // defaults to {}

      'sm': '25px',

      'md': '50px',

      'lg': '100px',

    },

    repeatingConicGradientStartingAngles: theme => theme('conicGradientStartingAngles'), // defaults to this value

    repeatingConicGradientPositions: theme => theme('conicGradientPositions'), // defaults to this value

    repeatingConicGradientColors: { // defaults to {}

      'red': '#f00',

      'red-blue': ['#f00', '#00f'],

      'red-green-blue': ['#f00', '#0f0', '#00f'],

      'starburst': ['white 0 5deg', 'blue 5deg'],

    },

    repeatingConicGradientLengths: { // defaults to {}

      'sm': '10deg',

      'md': '20deg',

      'lg': '40deg',

    },

  },

  variants: { // all the following default to ['responsive']

    backgroundImage: ['responsive'], // this is for the "bg-none" utility

    linearGradients: ['responsive'],

    radialGradients: ['responsive'],

    conicGradients: ['responsive'],

    repeatingLinearGradients: ['responsive'],

    repeatingRadialGradients: ['responsive'],

    repeatingConicGradients: ['responsive'],

  },

  plugins: [

    require('tailwindcss-gradients'),

  ],

};

```



This plugin generates the following utilities:



```css

.bg-none {

  background-image: none;

}



/* configurable with the "linearGradientDirections" and "linearGradientColors" theme objects */

.bg-gradient-[direction-key]-[color-key] {

  background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);

}



/* configurable with the "radialGradientShapes", "radialGradientSizes", "radialGradientPositions", and "radialGradientColors" theme objects */

/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */

.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key] {

  background-image: radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...]);

}



/* configurable with the "conicGradientStartingAngles", "conicGradientPositions", and "conicGradientColors" theme objects */

/* note that the "default" [starting-angle-key] and [position-key] are omitted from the class */

.bg-conic-[starting-angle-key]-[position-key]-[color-key] {

  background-image: conic-gradient(from [starting-angle-value] at [position-value], [color-value-1], [color-value-2], [...]);

}



/* configurable with the "repeatingLinearGradientDirections", "repeatingLinearGradientColors", and "repeatingLinearGradientLengths" theme objects */

.bg-gradient-[direction-key]-[color-key]-[length-key] {

  background-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]);

}



/* configurable with the "repeatingRadialGradientShapes", "repeatingRadialGradientSizes", "repeatingRadialGradientPositions", "repeatingRadialGradientColors", and "repeatingRadialGradientLengths" theme objects */

/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */

.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key]-[length-key] {

  background-image: repeating-radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);

}



/* configurable with the "repeatingConicGradientStartingAngles", "repeatingConicGradientPositions", "repeatingConicGradientColors", and "repeatingConicGradientLengths" theme objects */

/* note that the "default" [starting-angle-key] and [position-key] are omitted from the class */

.bg-conic-[starting-angle-key]-[position-key]-[color-key]-[length-key] {

  background-image: repeating-conic-gradient(from [starting-angle-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);

}

```