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: 3 months 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-01T12:13:54.000Z (4 months ago)
• Last Synced: 2024-03-18T14:22:25.076Z (3 months ago)
• Topics: border-image, css, gradients, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Size: 3.74 MB
• Stars: 227
• Watchers: 2
• Forks: 3
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Lists

• awesome-stars - tailwindcss-border-gradients
• awesome-tailwindcss - Border Gradients - Adds `border-image` gradient utilities. (Plugins)

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