csstailwind-csstailwind-in-js

Fade/transition tailwind class to something else over certain amount of time?


Is there a way to set bg-red-300 and fade/transition it to bg-transparent or different bg class over 2 seconds or do I need javascript for this? I want an element to highlight and then return to normal after 2 secs. Thank you!


Solution

  • You may create your own animation with config file

    module.exports = {
      mode: 'jit',
      theme: {
        extend: {
          
          // that is animation class
          animation: {
            fade: 'fadeOut 5s ease-in-out',
          },
    
          // that is actual animation
          keyframes: theme => ({
            fadeOut: {
              '0%': { backgroundColor: theme('colors.red.300') },
              '100%': { backgroundColor: theme('colors.transparent') },
            },
          }),
        },
      },
      variants: {},
      plugins: [],
    }
    

    Use it like

    <div class="w-40 h-40 animate-fade"></div>
    

    Demo

    P.S. However you may probably need some Javascript to trigger animate-fade classlist toggling or something as animation will proceed no matter does block is in viewport or not.