Hotwire + Tailwind: Fade In without Javascript | Primevise

[Primevise Homepage](https://primevise.com/)

[Services](https://primevise.com/services) [Work](https://primevise.com/cases) [Products](https://primevise.com/products) [About](https://primevise.com/about) [Blog](https://primevise.com/blog)

[Book an intro call](https://primevise.com/contact)

# Hotwire + Tailwind: Fade In without Javascript

by Elvinas Predkelis

May 30, 2022

### 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="font-semibold uppercase">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.

Let's talk

## For new products, existing codebases, and ideas that aren't scoped yet.

[Book an intro call](https://cal.com/elvinas/primevise-exploration) [Tell us about your project](https://primevise.com/contact)

© 2026 Primevise. All rights reserved.

- [Services](https://primevise.com/services)
- [Work](https://primevise.com/cases)
- [Products](https://primevise.com/products)
- [About](https://primevise.com/about)
- [Blog](https://primevise.com/blog)
- [Contact](https://primevise.com/contact)

- [Go to Primevise LinkedIn page](https://www.linkedin.com/company/primevise)
- [Go to Primevise X profile](https://x.com/primevisehq)
- [Go to Primevise GitHub organization](https://github.com/primevise)