5. Tailwind and platforms

Stylesheets work, and for a small app they are plenty. Tailwind is the other way to style one. @ng-native/tailwind takes the CSS Tailwind generates and passes it through the same native CSS compiler as a component's styles, so the two treat a declaration a device cannot draw the same way: it is dropped with a build warning, and a utility with no native equivalent does nothing on the device. The preset also adds what a phone needs and a browser does not: ios: and android: variants, and safe-area utilities such as pt-safe.

The course sets Tailwind up for you. In an Expo app, a stylesheet imports Tailwind's theme and utilities and @ng-native/tailwind/native.css, but not Tailwind's preflight, which is a browser reset; withTailwind in the Metro config builds it; and the generated stylesheet goes to mount() as globalStyles. Tailwind covers the setup.

Step 1 of 4

Swap the screen's stylesheet for classes

Delete styles from app.ts, and put the same design on the elements as classes:

<view class="flex-1 gap-2 bg-zinc-100 px-5 pt-safe">
  <text class="pt-4 text-3xl font-bold text-zinc-900">Today</text>
  <text class="text-zinc-500">{{ remaining() }} left to do</text>
  ...
</view>

pt-safe applies the top safe-area inset, and pt-4 on the title adds the 16 points the stylesheet's calculation did. pt-safe-4 would do both on the screen in one class. Either reads the safe-area custom properties from the first lesson, so on a device they need a <safe-area-provider> too.