How to create native fade in animation with utility classes on render/mount/page load

[bennettdams]

When using TailwindCSS e. g. with React, is it possible to create a fade in animation when a component mounts with the given utility classes?

Simple example to demonstrate:

const SomeComponent = (hasError: boolean) => {
    return (
        <div className="some-component">
            {hasError ? (
                <div className="all good">All good</div>
            ) : (
                <div className="error">Some error</div> // <<< this div should fade in when it is rendered
            )}
        </div>
    );
};

You can easily build your own in Tailwind's input file, but is there a way to do it with the native utilities?

.fade-in {
  animation: animation-fade-in 0.3s;
}

@keyframes animation-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

I'm aware of the transition-opacity, but you'll always need another pseudo-class variant like hover to make it work.

[philippbosch]

You won't be able to build this with native utility classes alone I think. But did you see the new animation feature in 1.6?

You could put something like this in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fade-in 1s ease',
      },
      keyframes: {
        'fade-in': {
          from: { opacity: 0 },
          to: { opacity: 1 },
        },
      },
    },
  },
};

Then you can change your code to:

<div className="error animate-fade-in">Some error</div>

[bennettdams]

I was waiting for the animations to be released to finally ask this question 😅

Thanks, I like your proposal better than the manual way and it is also supported by Tailwind's IntelliSense, which is a huge plus.