https://github.com/jamessessford/tailwindcss-pulse
Materialize pulse effect for Tailwind
https://github.com/jamessessford/tailwindcss-pulse
Last synced: 2 months ago
JSON representation
Materialize pulse effect for Tailwind
- Host: GitHub
- URL: https://github.com/jamessessford/tailwindcss-pulse
- Owner: jamessessford
- License: mit
- Created: 2020-04-08T07:20:47.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-13T08:32:15.000Z (about 1 year ago)
- Last Synced: 2025-03-11T18:53:26.199Z (3 months ago)
- Language: JavaScript
- Size: 1.24 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pulse Plugin for Tailwind CSS
## Inspired By
A kickass [Post](https://www.florin-pop.com/blog/2019/03/css-pulse-effect/) by [Florin Pop](https://www.florin-pop.com/) and [Materialize CSS](https://materializecss.com).
## Installation
```bash
npm install tailwindcss-pulse
```
## Usage
```js
// 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:
```css
...
.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))
}
}
...
```
[](https://travis-ci.org/jamessessford/tailwindcss-pulse)
[](https://coveralls.io/github/jamessessford/tailwindcss-pulse?branch=master)