Create blinking background with TailwindCSS

theme: {
    extend: {
        keyframes: {
            blinkingBg: {
                '0%, 100%': { backgroundColor: '#ef4444' },
                '50%': { backgroundColor: '#fee2e2' },
            }
        },
        animation: {
            blinkingBg: 'blinkingBg 2s ease-in-out infinite',
        }
    },
},

As animations can be very different in each project TailwindCSS does contain only some very general effects. Blinking the background is not defined by default.

Fortunately, you can easily create a new utility class to create a blinking background on your site. To do this you need to extend the Tailwind configuration file the tailwind.config.js .

First, you need to create the relevant keyframes with the appropriate background colors by extending the theme object:

theme: {
    extend: {
        keyframes: {
            blinkingBg: {
                '0%, 100%': { backgroundColor: '#ef4444' },
                '50%': { backgroundColor: '#fee2e2' },
            }
        },
    },
},

As the next step you also need to add an animation property to the theme object:

animation: {
    blinkingBg: 'blinkingBg 2s ease-in-out infinite',
}

The final config file looks like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{js,jsx,ts,tsx}',
    ],
    theme: {
        extend: {
            keyframes: {
                blinkingBg: {
                    '0%, 100%': { backgroundColor: '#ef4444' },
                    '50%': { backgroundColor: '#fee2e2' },
                }
            },
            animation: {
                blinkingBg: 'blinkingBg 2s ease-in-out infinite',
            }
        },
    },
    plugins: [],
};

In your template code you can use it as animate-blinkingBg :

<div class="animate-blinkingBg">This is blinking</div>