# Hotwire Native for Rails Developers: Tailwind 4 (page 44)

**URL:** <https://forum.devtalk.com/t/hotwire-native-for-rails-developers-tailwind-4-page-44/193106>\
**Category:** PragProg Customers\
**Tags:** book-hotwire-native-for-rails-developers\
**Created:** [30 March 2025 01:23 UTC](https://forum.devtalk.com/t/hotwire-native-for-rails-developers-tailwind-4-page-44/193106 "2025-03-30T01:23:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dglaser](https://forum.devtalk.com/user_avatar/forum.devtalk.com/dglaser/32/7261_2.png) [@dglaser](https://forum.devtalk.com/u/dglaser)\
**Post date:** [30 March 2025 01:23 UTC](https://forum.devtalk.com/t/hotwire-native-for-rails-developers-tailwind-4-page-44/193106/1 "2025-03-30T01:23:31Z")

</div>

Showing how to add the hotwire-native-app variant in .tailwind.config.js is great for readers using Tailwind 3. However, new Rails 8 applications use Tailwind 4 and do not have this file.

They will need to use the following in the tailwind/application.css file:

```auto
@custom-variant hotwire-native {
    html[data-hotwire-native] & {
        @slot
    }
}

@custom-variant not-hotwire-native {
    html:not([data-hotwire-native]) & {
        @slot
    }
}

```

---

<div class="post-metadata">

**Author:** ![dglaser](https://forum.devtalk.com/user_avatar/forum.devtalk.com/dglaser/32/7261_2.png) [@dglaser](https://forum.devtalk.com/u/dglaser)\
**Post date:** [30 March 2025 15:22 UTC](https://forum.devtalk.com/t/hotwire-native-for-rails-developers-tailwind-4-page-44/193106/2 "2025-03-30T15:22:48Z")

</div>

Using `@variant` instead of `@custom-variant` works as well.

---

<div class="post-metadata">

**Author:** ![joemasilotti](https://forum.devtalk.com/user_avatar/forum.devtalk.com/joemasilotti/32/6803_2.png) [@joemasilotti](https://forum.devtalk.com/u/joemasilotti)\
**Post date:** [30 March 2025 20:30 UTC](https://forum.devtalk.com/t/hotwire-native-for-rails-developers-tailwind-4-page-44/193106/3 "2025-03-30T20:30:51Z")

</div>

Thank you @dglaser! I’ll add this to the book.

---

<div class="post-metadata">

**Author:** ![dglaser](https://forum.devtalk.com/user_avatar/forum.devtalk.com/dglaser/32/7261_2.png) [@dglaser](https://forum.devtalk.com/u/dglaser)\
**Post date:** [31 March 2025 03:34 UTC](https://forum.devtalk.com/t/hotwire-native-for-rails-developers-tailwind-4-page-44/193106/4 "2025-03-31T03:34:50Z")

</div>

it would be `application.tailwind.css`