keyframes

🎞️ Keyframes

Define CSS keyframes

Installation

npm i tailwindcss-plugins -D

Usage

theme: {
    keyframes: {
        bounce: {
            '0%, 100%': { 'transform': 'translateY(0)' },
            '50%': { 'transform': 'translateY(-5px)' },
        },
    },
},
plugins: [
    require('tailwindcss-plugins/keyframes'),
],

See the animations plugin to define animations using those keyframes.

Available keyframes

spin

theme: {
    animations: {
        spin: 'spin 4s linear infinite',
    },
},
plugins: [
    require('tailwindcss-plugins/animations'),
    require('tailwindcss-plugins/keyframes/spin'),
],

shake

theme: {
    animations: {
        shake: 'shake .5s',
    },
},
plugins: [
    require('tailwindcss-plugins/animations'),
    require('tailwindcss-plugins/keyframes/shake'),
],