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

Community PragProg Customers
1

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:

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

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

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

3

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

4

it would be application.tailwind.css