Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cossssmin/tailwindcss-border-gradients
Tailwind CSS plugin to generate border image gradient utilities.
https://github.com/cossssmin/tailwindcss-border-gradients
border-image css gradients tailwindcss tailwindcss-plugin
Last synced: 12 days ago
JSON representation
Tailwind CSS plugin to generate border image gradient utilities.
- Host: GitHub
- URL: https://github.com/cossssmin/tailwindcss-border-gradients
- Owner: cossssmin
- Created: 2019-01-06T13:05:57.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-01T11:05:39.000Z (8 months ago)
- Last Synced: 2024-10-13T12:07:35.381Z (about 1 month ago)
- Topics: border-image, css, gradients, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Size: 819 KB
- Stars: 232
- Watchers: 2
- Forks: 3
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Tailwind CSS Border Gradients
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![Downloads][npm-stats-shield]][npm]
[![License][license-shield]][license]
> This plugin is based on the [tailwindcss-gradients](https://github.com/benface/tailwindcss-gradients) plugin.
## Installation
```bash
npm install tailwindcss-border-gradients
```
## Simple usage
```js
{
theme: {
colors: {
'red': '#f00',
'blue': '#00f',
},
linearBorderGradients: theme => ({
colors: theme('colors'),
}),
},
plugins: [
require('tailwindcss-border-gradients')(),
],
}
```
## Advanced usage
```js
{
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:
```css
/* 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`
[npm]: https://www.npmjs.com/package/tailwindcss-border-gradients
[npm-version-shield]: https://img.shields.io/npm/v/tailwindcss-border-gradients.svg?style=flat-square
[npm-stats-shield]: https://img.shields.io/npm/dt/tailwindcss-border-gradients.svg?style=flat-square
[github-ci]: https://github.com/cossssmin/tailwindcss-border-gradients/
[github-ci-shield]: https://img.shields.io/github/workflow/status/cossssmin/tailwindcss-border-gradients/Node.js%20CI?style=flat-square
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/tailwindcss-border-gradients.svg?style=flat-square