{"id":13480151,"url":"https://github.com/cossssmin/tailwindcss-border-gradients","last_synced_at":"2025-04-05T05:09:55.542Z","repository":{"id":34912130,"uuid":"164307889","full_name":"cossssmin/tailwindcss-border-gradients","owner":"cossssmin","description":"Tailwind CSS plugin to generate border image gradient utilities.","archived":false,"fork":false,"pushed_at":"2024-04-01T11:05:39.000Z","size":839,"stargazers_count":232,"open_issues_count":21,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-13T12:07:35.381Z","etag":null,"topics":["border-image","css","gradients","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cossssmin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://mailviews.com"]}},"created_at":"2019-01-06T13:05:57.000Z","updated_at":"2024-09-17T18:16:20.000Z","dependencies_parsed_at":"2024-06-18T18:23:45.111Z","dependency_job_id":"523637b6-17b0-4624-933c-00648917a25b","html_url":"https://github.com/cossssmin/tailwindcss-border-gradients","commit_stats":{"total_commits":84,"total_committers":3,"mean_commits":28.0,"dds":"0.22619047619047616","last_synced_commit":"a627895d84454b90e014492f07832b960f393eb6"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cossssmin%2Ftailwindcss-border-gradients","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cossssmin%2Ftailwindcss-border-gradients/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cossssmin%2Ftailwindcss-border-gradients/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cossssmin%2Ftailwindcss-border-gradients/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cossssmin","download_url":"https://codeload.github.com/cossssmin/tailwindcss-border-gradients/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["border-image","css","gradients","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:35.201Z","updated_at":"2025-04-05T05:09:55.513Z","avatar_url":"https://github.com/cossssmin.png","language":"JavaScript","funding_links":["https://mailviews.com"],"categories":["Plugins","JavaScript"],"sub_categories":[],"readme":"# Tailwind CSS Border Gradients\n\n[![Version][npm-version-shield]][npm]\n[![Build][github-ci-shield]][github-ci]\n[![Downloads][npm-stats-shield]][npm]\n[![License][license-shield]][license]\n\n\u003e This plugin is based on the [tailwindcss-gradients](https://github.com/benface/tailwindcss-gradients) plugin.\n\n## Installation\n\n```bash\nnpm install tailwindcss-border-gradients\n```\n\n## Simple usage\n\n```js\n{\n  theme: {\n    colors: {\n      'red': '#f00',\n      'blue': '#00f',\n    },\n    linearBorderGradients: theme =\u003e ({\n      colors: theme('colors'),\n    }),\n  },\n  plugins: [\n    require('tailwindcss-border-gradients')(),\n  ],\n}\n```\n\n## Advanced usage\n\n```js\n{\n  theme: {\n    linearBorderGradients: {\n      directions: { // defaults to these values\n        't': 'to top',\n        'tr': 'to top right',\n        'r': 'to right',\n        'br': 'to bottom right',\n        'b': 'to bottom',\n        'bl': 'to bottom left',\n        'l': 'to left',\n        'tl': 'to top left',\n      },\n      colors: { // defaults to {}\n        'red': '#f00',\n        'red-blue': ['#f00', '#00f'],\n        'red-green-blue': ['#f00', '#0f0', '#00f'],\n        'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],\n      },\n    },\n    repeatingLinearBorderGradients: theme =\u003e ({\n      directions: theme('linearBorderGradients.directions'), // defaults to the same values as linearBorderGradients’ directions\n      colors: theme('linearBorderGradients.colors'), // defaults to {}\n      lengths: { // defaults to {}\n        'sm': '25px',\n        'md': '50px',\n        'lg': '100px',\n      },\n    }),\n  },\n  variants: {\n    linearBorderGradients: ['responsive'], // defaults to ['responsive']\n    repeatingLinearBorderGradients: ['responsive'], // defaults to ['responsive']\n  },\n  plugins: [\n    require('tailwindcss-border-gradients')(),\n  ],\n}\n```\n\nThe plugin generates the following utilities:\n\n```css\n/* configurable with the \"linearBorderGradients\" theme object */\n.border-gradient-[direction-key]-[color-key] {\n  border-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]) 1;\n}\n\n/* configurable with the \"repeatingLinearBorderGradients\" theme object */\n.border-gradient-[direction-key]-[color-key]-[length-key] {\n  border-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]) 1;\n}\n```\n\n## Roadmap\n\n- [ ] Config option for `border-image-slice`\n- [ ] Config option for `border-image-width`\n\n[npm]: https://www.npmjs.com/package/tailwindcss-border-gradients\n[npm-version-shield]: https://img.shields.io/npm/v/tailwindcss-border-gradients.svg?style=flat-square\n[npm-stats-shield]: https://img.shields.io/npm/dt/tailwindcss-border-gradients.svg?style=flat-square\n[github-ci]: https://github.com/cossssmin/tailwindcss-border-gradients/\n[github-ci-shield]: https://img.shields.io/github/workflow/status/cossssmin/tailwindcss-border-gradients/Node.js%20CI?style=flat-square\n[license]: ./LICENSE\n[license-shield]: https://img.shields.io/npm/l/tailwindcss-border-gradients.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcossssmin%2Ftailwindcss-border-gradients","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcossssmin%2Ftailwindcss-border-gradients","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcossssmin%2Ftailwindcss-border-gradients/lists"}