Wondering what’s next for npm?Check out our public roadmap! »

    tailwindcss-ripple

    0.6.0 • Public • Published

    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')()
      ],
    }

    Build Status Coverage Status

    Install

    npm i tailwindcss-ripple

    DownloadsWeekly Downloads

    237

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    21.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar