Styling & Theming

Tailwind as the Default

The native app uses Uniwind, so you style screens with Tailwind-style className attributes. The configuration lives in apps/native/tailwind.config.js and already exposes semantic tokens (e.g., bg-primary-500, text-primary-foreground).

The web app follows a standard Next.js + Tailwind setup with a typical globals.css. While both follow the same design language, the web side remains standard to avoid complexity where Tailwind classes are usually sufficient.

Shared Color Tokens

All the base colors are defined in apps/native/src/components/ui/colors.js. This file is the "source of truth" for your brand. It feeds into the Tailwind config and the useThemeConfig hook to ensure consistency whether you are using utility classes or custom styles.

useThemeConfig

While Tailwind handles 90% of your styling, useThemeConfig (found in apps/native/src/lib/use-theme-config.tsx) is essential for the other 10%. It returns { colors, spacing, radii, typography } as raw values.

Why use it?

• Non-Tailwind Components: Some third-party libraries or legacy native components don't support className.
• Complex UI States: For things like long-press interactions, dynamic animations, or conditional logic where standard Tailwind classes become unorganized.
• Native APIs: Setting colors for the StatusBar or ActivityIndicator.

const theme = useThemeConfig();
// Access hex values directly for custom styling logic
const strokeColor = theme.colors.primary;

Use className for your layouts and reach for the theme hook only when you need surgical control or JS-driven styling.