Hotwire Tailwind: Fade In without Javascript

This article will outline how to fade in a loaded turbo frame without additional Javascript.

Disclaimer - The setup includes Tailwind configuration which is technically 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.jsmodule.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!

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.

If you have any questions or suggestions, feel free to reach out to me on Twitter or visit my website!