Hotwire + Tailwind: Fade In without Javascript

Idea and Setup

Sometimes just loading content to a turbo frame feels rather jerky. Adding a simple fade-in can work miracles and make the app feel smoother and faster.

The usual approach to this is adding a Javascript animation. Fortunately, it is possible to add the same exact effect with just CSS. 🥳

Adding CSS animations to Tailwind

The setup for Tailwind is pretty straight-forward. The whole idea is to add a CSS animation that turns the element’s opacity from 0% to 100%.

// tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      animation: {
        "fade-in": "fadeIn 0.15s ease-in-out",
      },
      keyframes: () => ({
        fadeIn: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
      }),
    },
  },
};

Now this animation will be available by adding an animate-fade-in class to an element. 💆

Using the fade-in on a Turbo Frame

Applying the fade it is literally adding a animate-fade-in class to the turbo frame (or the content inside it).

<turbo-frame id="loadable" class="animate-fade-in">
  <h3 class="uppercase font-semibold">Fading in</h3>
</turbo-frame>

Voilà!

Fade-in Example

Wrapping up

Obviously, such fade-in could be used outside the context of Hotwire or Tailwind. However, this seemed as a great use case that invites better UX and has minimal overhead.