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' colors: plugins:
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' directions: // defaults to the same values as linearBorderGradients’ directions colors: // defaults to {} lengths: // defaults to {} 'sm': '25px' 'md': '50px' 'lg': '100px' variants: linearBorderGradients: 'responsive' // defaults to ['responsive'] repeatingLinearBorderGradients: 'responsive' // defaults to ['responsive'] plugins:
The plugin generates the following utilities:
/* configurable with the "linearBorderGradients" theme object */ /* configurable with the "repeatingLinearBorderGradients" theme object */
Roadmap
- Config option for
border-image-slice
- Config option for
border-image-width