Ripple Plugin for Tailwind CSS

Inspired By

An excellent Codepen by Ben Szabo.

Installation

npm install tailwindcss-ripple

Usage

// 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 :

...

.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:

<button class="ripple-bg-gray-300">
    Hover me for a lighter background, click me for a ripple effect
</button>

The Ripple Effect

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.

// 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

// 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

...

.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;
}

...