benface / Tailwindcss Gradients
Licence: isc
Tailwind CSS plugin to generate gradient background utilities
Stars: ✭ 194
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Gradients
Admin Template
Tailwind CSS Starter Template - Admin Dashboard Template
Stars: ✭ 160 (-17.53%)
Mutual labels: tailwindcss
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (-21.65%)
Mutual labels: tailwindcss
Pingcrm React
⚛️ Ping CRM React - A demo app to illustrate how Inertia.js works with Laravel and React (hosted on a heroku free dyno).
Stars: ✭ 158 (-18.56%)
Mutual labels: tailwindcss
Tailwindcss Figma Plugin
Figma Plugin for TailwindCSS
Stars: ✭ 165 (-14.95%)
Mutual labels: tailwindcss
Tailwindcss Filters
Tailwind CSS plugin to generate filter and backdrop filter utilities
Stars: ✭ 150 (-22.68%)
Mutual labels: tailwindcss
Hugo Theme Tailwindcss Starter
Starter files for a Hugo theme with Tailwindcss
Stars: ✭ 187 (-3.61%)
Mutual labels: tailwindcss
Tailwind Cards
A growing collection of text/image cards you can use/copy-paste in your tailwind css projects
Stars: ✭ 154 (-20.62%)
Mutual labels: tailwindcss
Vue Tailwind Picker
🎉 Datepicker component for vue.js build with Tailwind CSS & dayjs date library
Stars: ✭ 170 (-12.37%)
Mutual labels: tailwindcss
Vue Cli Plugin Tailwind
vue-cli plugin for Tailwind CSS
Stars: ✭ 154 (-20.62%)
Mutual labels: tailwindcss
Devfolio
A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS
Stars: ✭ 154 (-20.62%)
Mutual labels: tailwindcss
Tailwindcss Spinner
Spinner utility for Tailwind CSS
Stars: ✭ 163 (-15.98%)
Mutual labels: tailwindcss
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (-20.1%)
Mutual labels: tailwindcss
Gridsome Starter Bleda
Gridsome blog starter, built with Tailwind CSS
Stars: ✭ 179 (-7.73%)
Mutual labels: tailwindcss
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1085.05%)
Mutual labels: tailwindcss
My Dash
🔢 A developer friendly dashboard for monitoring your self-hosted services with a clean and modern UI.
Stars: ✭ 193 (-0.52%)
Mutual labels: tailwindcss
Notus React
Notus React: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 173 (-10.82%)
Mutual labels: tailwindcss
Sketch Tailwind
A plugin that tries to bridge the gap between designs and code. Sketch Tailwind lets you export aspects of a design made in Sketch to a javascript theme file that you can import into your TailwindCSS config
Stars: ✭ 166 (-14.43%)
Mutual labels: tailwindcss
BLACK LIVES MATTER
Be aware. Be angry. Do better. Demand change. Show your support any way you can. Click on the link above to find protests, petitions, and other ways to help. DO NOT LET IT GO SILENT.
Gradients Plugin for Tailwind CSS
Requirements
This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (npm install [email protected]
).
Installation
npm install tailwindcss-gradients
Usage
Simple
{
theme: {
colors: {
'red': '#f00',
'blue': '#00f',
},
linearGradientColors: theme => theme('colors'),
radialGradientColors: theme => theme('colors'),
conicGradientColors: theme => theme('colors'),
},
plugins: [
require('tailwindcss-gradients'),
],
}
Advanced
// tailwind.config.js
module.exports = {
theme: {
linearGradientDirections: { // 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',
},
linearGradientColors: { // defaults to {}
'red': '#f00',
'red-blue': ['#f00', '#00f'],
'red-green-blue': ['#f00', '#0f0', '#00f'],
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
},
radialGradientShapes: { // defaults to this value
'default': 'ellipse',
},
radialGradientSizes: { // defaults to this value
'default': 'closest-side',
},
radialGradientPositions: { // defaults to these values
'default': 'center',
't': 'top',
'tr': 'top right',
'r': 'right',
'br': 'bottom right',
'b': 'bottom',
'bl': 'bottom left',
'l': 'left',
'tl': 'top left',
},
radialGradientColors: { // defaults to {}
'red': '#f00',
'red-blue': ['#f00', '#00f'],
'red-green-blue': ['#f00', '#0f0', '#00f'],
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
},
conicGradientStartingAngles: { // defaults to this value
'default': '0',
},
conicGradientPositions: { // defaults to these values
'default': 'center',
't': 'top',
'tr': 'top right',
'r': 'right',
'br': 'bottom right',
'b': 'bottom',
'bl': 'bottom left',
'l': 'left',
'tl': 'top left',
},
conicGradientColors: { // defaults to {}
'red': '#f00',
'red-blue': ['#f00', '#00f'],
'red-green-blue': ['#f00', '#0f0', '#00f'],
'checkerboard': ['white 90deg', 'black 90deg 180deg', 'white 180deg 270deg', 'black 270deg'],
},
repeatingLinearGradientDirections: theme => theme('linearGradientDirections'), // defaults to this value
repeatingLinearGradientColors: theme => theme('linearGradientColors'), // defaults to {}
repeatingLinearGradientLengths: { // defaults to {}
'sm': '25px',
'md': '50px',
'lg': '100px',
},
repeatingRadialGradientShapes: theme => theme('radialGradientShapes'), // defaults to this value
repeatingRadialGradientSizes: { // defaults to this value
'default': 'farthest-corner',
},
repeatingRadialGradientPositions: theme => theme('radialGradientPositions'), // defaults to this value
repeatingRadialGradientColors: theme => theme('radialGradientColors'), // defaults to {}
repeatingRadialGradientLengths: { // defaults to {}
'sm': '25px',
'md': '50px',
'lg': '100px',
},
repeatingConicGradientStartingAngles: theme => theme('conicGradientStartingAngles'), // defaults to this value
repeatingConicGradientPositions: theme => theme('conicGradientPositions'), // defaults to this value
repeatingConicGradientColors: { // defaults to {}
'red': '#f00',
'red-blue': ['#f00', '#00f'],
'red-green-blue': ['#f00', '#0f0', '#00f'],
'starburst': ['white 0 5deg', 'blue 5deg'],
},
repeatingConicGradientLengths: { // defaults to {}
'sm': '10deg',
'md': '20deg',
'lg': '40deg',
},
},
variants: { // all the following default to ['responsive']
backgroundImage: ['responsive'], // this is for the "bg-none" utility
linearGradients: ['responsive'],
radialGradients: ['responsive'],
conicGradients: ['responsive'],
repeatingLinearGradients: ['responsive'],
repeatingRadialGradients: ['responsive'],
repeatingConicGradients: ['responsive'],
},
plugins: [
require('tailwindcss-gradients'),
],
};
This plugin generates the following utilities:
.bg-none {
background-image: none;
}
/* configurable with the "linearGradientDirections" and "linearGradientColors" theme objects */
.bg-gradient-[direction-key]-[color-key] {
background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
}
/* configurable with the "radialGradientShapes", "radialGradientSizes", "radialGradientPositions", and "radialGradientColors" theme objects */
/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key] {
background-image: radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...]);
}
/* configurable with the "conicGradientStartingAngles", "conicGradientPositions", and "conicGradientColors" theme objects */
/* note that the "default" [starting-angle-key] and [position-key] are omitted from the class */
.bg-conic-[starting-angle-key]-[position-key]-[color-key] {
background-image: conic-gradient(from [starting-angle-value] at [position-value], [color-value-1], [color-value-2], [...]);
}
/* configurable with the "repeatingLinearGradientDirections", "repeatingLinearGradientColors", and "repeatingLinearGradientLengths" theme objects */
.bg-gradient-[direction-key]-[color-key]-[length-key] {
background-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]);
}
/* configurable with the "repeatingRadialGradientShapes", "repeatingRadialGradientSizes", "repeatingRadialGradientPositions", "repeatingRadialGradientColors", and "repeatingRadialGradientLengths" theme objects */
/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key]-[length-key] {
background-image: repeating-radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);
}
/* configurable with the "repeatingConicGradientStartingAngles", "repeatingConicGradientPositions", "repeatingConicGradientColors", and "repeatingConicGradientLengths" theme objects */
/* note that the "default" [starting-angle-key] and [position-key] are omitted from the class */
.bg-conic-[starting-angle-key]-[position-key]-[color-key]-[length-key] {
background-image: repeating-conic-gradient(from [starting-angle-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);
}
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].