Pulse Plugin for Tailwind CSS

Inspired By

A kickass Post by Florin Pop and Materialize CSS.

Installation

npm install tailwindcss-pulse

Usage

// tailwind.config.js
{
  theme: {
    pulse: theme => ({
        colors: theme('colors'),
    }),
  },
  plugins: [
    require('tailwindcss-pulse')(),
  ],
}

The default configuration generates the following pulse effect for each color in your theme:

...

.pulse-purple-300 {
    box-shadow: 0 0 0 0 rgba(214, 188, 250, 1);
    transform: scale(1);
    animation: pulse-purple-300 2s infinite
}

@keyframes pulse-purple-300 {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(214, 188, 250, 0.7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(214, 188, 250, 0)
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(214, 188, 250, 0)
    }
}

.shadow-pulse-purple-300 {
    filter: drop-shadow(0 0 0 rgba(214, 188, 250, .4));
    animation: shadow-pulse-purple-300 2s infinite
}

@keyframes shadow-pulse-purple-300 {
    0% {
        filter: drop-shadow(0 0 0 rgba(214, 188, 250, 0.6))
    }

    50% {
        filter: drop-shadow(0 0 .75rem rgba(214, 188, 250, 0.8))
    }
}

...