Tailwindcss animate blur

Question

How to do custom animate by blur in tailwind

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      keyframes: {
        blur: {
          '0%': {filter: blur(2px)} ,
          '100%': {filter: blur(3px)},
        },
      },
      animation: {
        'blur': 'blur 2s linear ',
      },
    },
  },
  plugins: [],
}

That not work for me .

I want to make animation to my pop-up window with blur

Answer 1

You must wrap your blur(0px) parameter with parenthesis ("blur(0px)"). You can take a look at the examples provided on the documentation page.

In tailwind, the keyframe's key needs to get a string as its value:

HTML:

<div class="bg-red-500 animate-blur"> ~ Blurry text ~ <div>

Config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        blur: {
          '0%': { filter: "blur(0px)" },
          '100%': { filter: "blur(5px)" },
        }
      },
      animation: {
        blur: 'blur 2s linear infinite',
      }
    },
  },
  plugins: [],
}

Tailwind-play