The Turbo Native and Strada tandem enables the progressive enhancement of your components. First, the developer can create an HTML application and load it simply using Turbo Native. Next, some web page elements, like the navbar, might need different styles when loaded under a native app. I covered how to handle this in TailwindCSS in my previous post.

At last, we want to bridge some of the HTML elements with Strada's native components. Once bridged, usually, the HTML parts can be hidden. For example, once the form's submit button is handled by a native button in the top right corner, there is no need to present the HTML submit button (bridged with the native component). Examples suggest the following vanilla CSS code to achieve this:

[data-turbo-bridge-component~="form"]
[data-controller~="bridge--form"]
[type="submit"] {
  display: hidden;
}

The above depends on the fact that strada-web adds supported components to the list on the data-turbo-bridge-component attribute of the HTML document.

How to do it the Tailwind way

Important: You need at least TailwindCSS 3.2 to use this.

In config/tailwind.config.js, add the following function to the plugins section:

plugins: [
  # ...
  ({matchVariant}) => {
    matchVariant('bridge-component', (value) => {
      return [
        `[data-bridge-components~="${value}"] [data-controller="bridge--${value}"] &`,
        `[data-bridge-component~="${value}"] &[data-controller="bridge--${value}"]`
      ]
    })
  }
]

With this addition, you can conditionally style elements:

<form data-controller="bridge--form" class="py-2 bridge-component-[form]:py-4">
  ...
  <input type="submit" class="bridge-component-[form]:hidden" value="Submit" />
</form>

This way, the form will have a different style, and the button will be hidden only when the native app implements the native Form component. If the user did not download the newest version of the app, they still can have a full, although a bit degraded, experience with the HTML button.

Enjoy! I hope this helps (me remember).

Strada bridged components with TailwindCSS

How to do it the Tailwind way