jamessessford / tailwindcss-ripple Goto Github PK
View Code? Open in Web Editor NEWRipple effect (materialize) for Tailwindcss
License: MIT License
Ripple effect (materialize) for Tailwindcss
License: MIT License
My custom colors are not being included with the Ripple. Am I missing something?
Also will it work with var colors?
module.exports = {
theme: {
extend: {
colors: {
'brand1': 'var(--brand1)',
'brand2': 'var(--brand2)',
'dodgerblue': 'dodgerblue',
},
},
container: {
center: true,
padding: '1rem',
},
ripple: theme => ({
colors: theme('colors')
}),
},
variants: {
borderWidth: ['responsive', 'hover', 'focus'],
textColor: ['hover', 'active', 'group-hover', 'group-active'],
boxShadow: ['hover', 'focus', 'active', 'group-hover', 'group-active'],
},
plugins: [
require('@tailwindcss/ui'),
require('tailwindcss-ripple')(),
]
}
Hey, nice plugin.
Thanks for doing the Tailwind integration.
Is it possible to add customisable parameters?
For example, I find the darken(0.2) a bit too dark.
Thanks.
Hi, this is an amazing library thanks.
just have some problem to find how do I disable duration time when i hover the button.
same as in martial UI when I hover a button the color chang instantly with no delay to the hover color
and when i click i get the nice ripple effect
i tried to change modifierTransition to none or zero but this disabled the ripple as well.
Hello, Thank you for this plugin. I couldn't get this working in my project. I would appreciate a working example to compare. Thank you.
In case you didnt know, this plugin works quite well in tailwindcss v3. Didnt fully test all features but most basic works really good, actually, no bugs at all encountered. Afaik probably the best ripple animation plugin.
It tries to darken black, which is already very dark, so it isn't visible
Would be great if there is negative darken values or lighten values?
Is there a way to slower/smoothen the speed of the effect? I find it a bit too fast
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.