Package Exports

tailwindcss-border-gradients

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 (tailwindcss-border-gradients) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Border Gradients Plugin for Tailwind CSS

This plugin is based on the tailwindcss-gradients plugin.

Installation

npm install tailwindcss-border-gradients

Simple usage

{
  theme: {
    colors: {
      'red': '#f00',
      'blue': '#00f',
    },
    linearBorderGradients: theme => ({
      colors: theme('colors'),
    }),
  },
  plugins: [
    require('tailwindcss-border-gradients')(),
  ],
}

Advanced usage

{
  theme: {
    linearBorderGradients: {
      directions: { // 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',
      },
      colors: { // defaults to {}
        'red': '#f00',
        'red-blue': ['#f00', '#00f'],
        'red-green-blue': ['#f00', '#0f0', '#00f'],
        'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
      },
    },
    repeatingLinearBorderGradients: theme => ({
      directions: theme('linearBorderGradients.directions'), // defaults to the same values as linearBorderGradients’ directions
      colors: theme('linearBorderGradients.colors'), // defaults to {}
      lengths: { // defaults to {}
        'sm': '25px',
        'md': '50px',
        'lg': '100px',
      },
    }),
  },
  variants: {
    linearBorderGradients: ['responsive'], // defaults to ['responsive']
    repeatingLinearBorderGradients: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-border-gradients')(),
  ],
}

The plugin generates the following utilities:

/* configurable with the "linearBorderGradients" theme object */
.border-gradient-[direction-key]-[color-key] {
  border-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]) 1;
}

/* configurable with the "repeatingLinearBorderGradients" theme object */
.border-gradient-[direction-key]-[color-key]-[length-key] {
  border-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]) 1;
}

Roadmap

Config option for border-image-slice
Config option for border-image-width