Cordova

Use touchcn in an Apache Cordova app — status bar setup and the WebView feature-support matrix that sets the minimum supported OS versions.

touchcn is web-first, so it installs into an Apache Cordova app the same way as any other web project — follow Getting started for the engine packages, Tailwind wiring, provider, and CLI. The important part of this guide is the WebView support matrix: touchcn’s styling relies on a handful of modern CSS features, and Cordova apps can run on older WebViews than a typical browser audience, so the floor matters.

Setup

The only Cordova-specific pieces are the viewport meta tag and the status bar plugin.

Add viewport-fit=cover to the viewport meta in index.html so the WebView extends into the safe areas and touchcn’s env(safe-area-inset-*) chrome (navbar, tabbar, sheets) can reserve space for the notch and home indicator:

<meta
  name="viewport"
  content="viewport-fit=cover, width=device-width, initial-scale=1.0"
/>

For the status bar, use the official cordova-plugin-statusbar:

cordova plugin add cordova-plugin-statusbar

It exposes StatusBar.overlaysWebView(true) (draw content under the status bar, so touchcn’s top safe-area padding takes over), StatusBar.styleDefault() / StatusBar.styleLightContent() (dark vs light status-bar text), and StatusBar.backgroundColorByHexString('#...'). The matching startup preferences in config.xml are StatusBarOverlaysWebView, StatusBarStyle, and StatusBarBackgroundColor. Call styleLightContent() when touchcn’s color scheme is dark and styleDefault() when it is light to keep the status-bar text legible.

On iOS, Cordova runs on WKWebView (the default engine in current cordova-ios), so the WebView’s capabilities track the version of Safari shipped with the device’s iOS — which is the basis for the matrix below.

WebView support matrix

touchcn’s compiled CSS uses four modern features: the :has() selector, dynamic viewport units (dvh), color-mix(), and backdrop-filter (iOS glass only, always emitted with the -webkit- prefix). A WebView must support all four for the components to render correctly.

The binding constraint on both platforms is color-mix(), which raises the floor to:

• Android System WebView / Chrome 111+ (released March 2023)
• iOS 16.2+ — WKWebView’s engine is tied to the OS, so iOS 16.2 is the first release with all four features (released December 2022)

A note on Capacitor

Cordova’s own maintainers point to Capacitor as the modern successor, and Capacitor can reuse many existing Cordova plugins, so an incremental migration is often feasible — see the Capacitor guide if you go that route.