---
title: "Hotwire Native CSS and TailwindCSS variants (conditionals)"
author: "Yaroslav Shmarov"
date: "2024-10-11"
canonical_url: "https://blog.superails.com/hotwire-native-conditional-tailwindcss"
markdown_url: "https://blog.superails.com/hotwire-native-conditional-tailwindcss.md"
description: "When building Hotwire Native apps, often you will want to have different CSS for native and desktop apps."
tags: ["hotwire-native"]
license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL."
---
# Hotwire Native CSS and TailwindCSS variants (conditionals)
When building [Hotwire Native](https://native.hotwired.dev/) apps, often you will want to have different CSS for native and desktop apps.
We can achieve it by addin custom variants like `non-turbo-native:` & `turbo-native:`.
```html
Visible only on Native
Visible only on Desktop
```
### CSS
```css
/* application.css */
body.turbo-native .turbo-native:hidden {
display: none;
}
```
```html
">
Hello, world!
```
Source: [masilotti.com](https://masilotti.com/hide-web-rendered-content-on-turbo-native-apps/)
### Tailwind
To enable this, update your tailwind config file:
```diff
# config/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
+ plugin(function({ addVariant }) {
+ addVariant("turbo-native", "html[data-turbo-native] &"),
+ addVariant("non-turbo-native", "html:not([data-turbo-native]) &")
+ })
],
}
```
And **conditionally** add `data-turbo-native` to your `` tag:
```ruby
# app/helpers/application_helper.rb
module ApplicationHelper
def platform_identifier
'data-turbo-native' if turbo_native_app?
end
end
```
```diff
# app/views/application.html.erb
-
+>
```
That's it! Now you can apply the CSS variant:
```html
Visible only on Native
Visible only on Desktop
Turbo Native
Non Turbo Native
```
### Enable for a block
```js
// config/tailwind.config.js
addVariant('mobile', '&[data-turbo-native="true"]'),
addVariant('non-mobile', '&[data-turbo-native="false"]'),
```
```html
This is mobile
This is non-mobile
```
[Subscribe to SupeRails.com](https://superails.com/pricing) for more Hotwire Native content!
That's it for now!