cossssmin / Tailwindcss Border Gradients
Tailwind CSS plugin to generate border image gradient utilities.
Stars: ✭ 94
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Border Gradients
tailwindcss-landing-gradients
A landing page made with tailwindcss and the new Gradient feature.
Stars: ✭ 41 (-56.38%)
Mutual labels: gradients, tailwindcss
Docker Django Example
A production ready example Django app that's using Docker and Docker Compose.
Stars: ✭ 86 (-8.51%)
Mutual labels: tailwindcss
Stts
A starter template for Svelte, Tailwind, Typescript, and Snowpack
Stars: ✭ 78 (-17.02%)
Mutual labels: tailwindcss
Tailwind Examples
A collection of web pages built in Tailwind CSS v0.7.4
Stars: ✭ 84 (-10.64%)
Mutual labels: tailwindcss
Tailwindcss Pseudo Elements
TailwindCSS Plugin that adds variants of pseudo elements.
Stars: ✭ 81 (-13.83%)
Mutual labels: tailwindcss
Vue Cli Plugin Tailwind
Utility-first, modern CSS for your Vue app using TailwindCSS.
Stars: ✭ 85 (-9.57%)
Mutual labels: tailwindcss
Ariana
Provide Multiple Gradients in ImageViews and Texts. Integrate with ViewPager to change colors dynamically.
Stars: ✭ 74 (-21.28%)
Mutual labels: gradients
Tailpress
A minimal boilerplate theme for WordPress using TailwindCSS and Laravel Mix.
Stars: ✭ 87 (-7.45%)
Mutual labels: tailwindcss
Vue Shopping Cart
Simple shopping cart with Vue.js and Deno.js
Stars: ✭ 87 (-7.45%)
Mutual labels: tailwindcss
Tailwindcss Tables
Bootstrap styled tables for Tailwind CSS
Stars: ✭ 84 (-10.64%)
Mutual labels: tailwindcss
Starter Kit Cool Writings
Statamic Starter Kit: Cool Writings
Stars: ✭ 84 (-10.64%)
Mutual labels: tailwindcss
Sonwan Ui
SonWan UI is a modular UI component library based on figma design to build your next React Web Application.
Stars: ✭ 75 (-20.21%)
Mutual labels: tailwindcss
React Native Styled.macro
⚛️ A Utility-First Styling Library for React Native
Stars: ✭ 89 (-5.32%)
Mutual labels: tailwindcss
Pingcrm Svelte
🦊 Ping CRM Svelte - A demo app to illustrate how Inertia.js works with Laravel and Svelte (hosted on a heroku free dyno).
Stars: ✭ 74 (-21.28%)
Mutual labels: tailwindcss
Vehicle counting hog svm
Vehicle detection, tracking and counting by SVM is trained with HOG features using OpenCV on c++.
Stars: ✭ 82 (-12.77%)
Mutual labels: gradients
Adoptoposs
Finding co-maintainers for your open source software project.
Stars: ✭ 93 (-1.06%)
Mutual labels: tailwindcss
Ghostwind
Tailwind CSS Starter Template - Ghostwind (Ghost Casper theme in Tailwind CSS)
Stars: ✭ 89 (-5.32%)
Mutual labels: tailwindcss
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].