Materialize ripple effect for Tailwind
npm install tailwindcss-rippleAn excellent Codepen by Ben Szabo.
``bash`
npm install tailwindcss-ripple
`js`
// tailwind.config.js
{
theme: {
ripple: theme => ({
colors: theme('colors')
}),
},
plugins: [
require('tailwindcss-ripple')()
],
}
The default configuration generates the following ripple effect for each color in your theme :
`css
...
.ripple-bg-gray-300 {
background-color: #e2e8f0;
background-position: center;
transition: background 0.8s;
}
.ripple-bg-gray-300:hover {
background: #a5b7d0 radial-gradient(circle, transparent 1%, #a5b7d0 1%) center/15000%;
}
.ripple-bg-gray-300:active {
background-color: #e2e8f0;
background-size: 100%;
transition: background 0s;
}
...
`
Which you can then use in your HTML like this:
`html`
By default, the color generated for the ripple effect is a 20% darken of the supplied color. This can be customised by passing in a parameter in your tailwind config file.
`js`
// tailwind.config.js
{
theme: {
ripple: theme => ({
colors: theme('colors'),
darken: 0.1
}),
},
plugins: [
require('tailwindcss-ripple')()
],
}
You can also change the transition properties on the created class and it's active state
`js`
// tailwind.config.js
{
theme: {
ripple: theme => ({
colors: theme('colors'),
modifierTransition: 'background 0.2s',
activeTransition: 'background 0.1s'
}),
},
plugins: [
require('tailwindcss-ripple')()
],
}
Would generate the following CSS
`css
...
.ripple-bg-gray-300 {
background-color: #e2e8f0;
background-position: center;
transition: background 0.2s;
}
.ripple-bg-gray-300:hover {
background: #a5b7d0 radial-gradient(circle, transparent 1%, #a5b7d0 1%) center/15000%;
}
.ripple-bg-gray-300:active {
background-color: #e2e8f0;
background-size: 100%;
transition: background 0.1s;
}
...
``
