Styling

NativeLaunch uses Tailwind CSS with NativeWind to apply consistent, scalable styling across all components. It also includes a theming system defined in theme.ts.

Tailwind configuration

We use Tailwind utility classes in React Native thanks to NativeWind. To get started, make sure your tailwind.config.js is configured like this:

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: 'hsl(var(--primary))',
        muted: 'hsl(var(--muted))',
        card: 'hsl(var(--card))',
        border: 'hsl(var(--border))',
        accent: 'hsl(var(--accent))',
        destructive: 'hsl(var(--destructive))',
      },
      borderRadius: {
        DEFAULT: 'var(--radius)',
      },
    },
  },
  plugins: [],
}

You can use any of these colors in your components:

<Text className="text-foreground bg-background">
  Hello styled world!
</Text>

Theme system

Design tokens are defined in theme.ts and include variables for both light and dark modes. These values power Tailwind-compatible utilities via CSS custom properties.

theme.ts

export const themeVariables = {
  light: {
    '--background': '...',
    '--foreground': '...',
    // ...
  },
  dark: {
    '--background': '...',
    '--foreground': '...',
    // ...
  },
}

The current theme is applied automatically based on the device color scheme using the useColorScheme hook. This is handled internally in useColorScheme.tsx.

UI components

We use React Native Reusables for UI building blocks. All of them support className and work well with Tailwind via NativeWind.

import {Button} from 'react-native-reusables'

<Button className="bg-primary text-primary-foreground">
  Save changes
</Button>

Other examples:

<Card className="bg-card text-card-foreground p-4 rounded-lg shadow">
  <Text className="text-lg font-semibold">Welcome</Text>
  <Text className="text-muted-foreground">You are now styled with Tailwind</Text>
</Card>

Extending styles

You can:

Modify theme.ts to update or add custom design tokens
Use tailwind.config.js to reference those tokens in your utility classes
Create your own design tokens for branding, spacing, typography, etc.
Keep everything consistent across light/dark themes

This setup gives you full control over styling while staying scalable and maintainable.

Tailwind configuration

Theme system

UI components

Extending styles

On this page