How React Native Styling Works

To understand Uniwind, we need to start with how React Native applies styles.

Every style follows the same path: it starts in your JavaScript code, passes through Fabric, goes into the C++ core, and finally reaches the native UI layer—UIKit on iOS and Views on Android. There's no way around this. Even the built-in StyleSheet travels through the same flow, which is why it remains the baseline for raw speed.

The challenge is that traditional Tailwind-style libraries add extra work -

• parsing className strings
• mapping utilities to style props
• resolving variants dynamically
• handling theme logic in JavaScript

All of this happens at runtime, which is why older className libraries are slower compared to StyleSheet-based approaches.

So the real question became: How do we bring Tailwind's developer experience to React Native without adding heavy runtime overhead?

Uniwind is the answer to that question.

What is Uniwind?

Uniwind is a Tailwind-first styling system for React Native built on three core ideas:

1. Build-time Tailwind parsing

Uniwind uses Tailwind's new CSS engine, where design tokens and utilities live in a global.css file. Tailwind scanning and utility generation happen during the Metro build, not while your app is running. Uniwind precomputes static style objects before the bundle even loads on the device, eliminating most of the runtime work that slowed down previous solutions.

Edit (Nov 20, 2025): Jacek Pudysz, the author of Uniwind, pointed out that there is still a small amount of runtime computation . So while the heavy lifting shifts to build time, expect a minimal runtime layer to stay in place.

2. A custom CSS parser for React Native

Alongside Tailwind utilities, you can write regular CSS for reusable patterns or semantic classes. Uniwind merges Tailwind utilities and your custom CSS at build time so everything behaves consistently in React Native.

3. Deep Metro integration

By wrapping your Metro config, Uniwind instructs Metro to:

• load and parse your CSS
• run Tailwind's engine
• generate TypeScript types
• embed optimized style objects directly into the bundle

const { getDefaultConfig } = require('expo/metro-config')
const { withUniwindConfig } = require('uniwind/metro')

const config = getDefaultConfig(__dirname)

const uniwindConfig = withUniwindConfig(config, {
  [INFO] relative path to your global.css file
  cssEntryFile: './src/global.css',
  dtsFile: './src/uniwind-types.d.ts',
  extraThemes: [
    'og',
    'blue',
    'navy',
    'red',
    'orange',
    'purple',
    'rosy',
    'grey',
    'candy',
  ],
})

module.exports = uniwindConfig

Features That Make Uniwind Special

What sets Uniwind apart is how naturally it brings the full Tailwind workflow into React Native while staying focused on performance.

Platform-specific styling

You can target iOS and Android directly inside your className strings using Tailwind-style platform selectors like ios: and android: — without writing Platform.select or conditional logic.

<View className="ios:bg-red-500 android:bg-blue-500" />

CSS variable-based theming

The theming system is powered entirely by CSS variables through Tailwind's new @theme directive. You define your design tokens once—colors, backgrounds, borders, surface layers—and then use semantic classes like bg-background, text-foreground, bg-card, or text-muted throughout your app. There's no JavaScript theme provider and no context. Themes like light, dark, or custom ones such as ocean or peach all work by simply switching CSS variables.

@import 'tailwindcss';
@import 'uniwind';

@layer theme {
  :root {
    @variant light {
      --color-background: #e7edde;
      --color-foreground: #111827;
      --color-lime: #e8ede1;
      --color-primary: #234823;
      --color-lemon: #ffce47;
      --color-neon: #e0ffc2;
      --color-neonlite: #c4dea9;
      --color-neonlite-200: #739265;
      --color-overlay-strong: #ffffff33;
      --color-overlay-light: #ffffff1a;
      --color-card: #fde6da;
      --color-card-strong: #f3cfc2;
      --color-chip: #ffce47;
      --color-chip-text: #234823;
      --color-cta: #234823;
      --color-cta-text: #e7edde;
      --color-card-border: #23482314;
    }

    @variant dark {
      --color-background: #0f1a11;
      --color-foreground: #f7f9f4;
      --color-lime: #1c2a1d;
      --color-primary: #9fe870;
      --color-lemon: #ffd25f;
      --color-neon: #264023;
      --color-neonlite: #1b3219;
      --color-neonlite-200: #66bb62;
      --color-overlay-strong: #00000088;
      --color-overlay-light: #00000044;
      --color-card: #182418;
      --color-card-strong: #101a11;
      --color-chip: #ffd25f;
      --color-chip-text: #0f1a11;
      --color-cta: #9fe870;
      --color-cta-text: #0f1a11;
      --color-card-border: #ffffff1f;
    }

    @variant og {
      --color-background: #f9f6ee;
      --color-foreground: #1f1b16;
      --color-lime: #f5efe0;
      --color-primary: #4c2f18;
      --color-lemon: #ffb347;
      --color-neon: #ffe8cc;
      --color-neonlite: #fdd8c1;
      --color-neonlite-200: #c68a65;
      --color-overlay-strong: #00000029;
      --color-overlay-light: #00000014;
      --color-card: #fff7ef;
      --color-card-strong: #fbd2ae;
      --color-chip: #ffb347;
      --color-chip-text: #4c2f18;
      --color-cta: #4c2f18;
      --color-cta-text: #fff7ef;
      --color-card-border: #4c2f1814;
    }

    @variant blue {
      --color-background: #e6f0ff;
      --color-foreground: #0b1a2b;
      --color-lime: #d6e8ff;
      --color-primary: #1e3a8a;
      --color-lemon: #60a5fa;
      --color-neon: #dbeafe;
      --color-neonlite: #bfdbfe;
      --color-neonlite-200: #3b82f6;
      --color-overlay-strong: #0b1a2b26;
      --color-overlay-light: #0b1a2b14;
      --color-card: #eef4ff;
      --color-card-strong: #c7d7ff;
      --color-chip: #60a5fa;
      --color-chip-text: #0b1a2b;
      --color-cta: #1e3a8a;
      --color-cta-text: #e6f0ff;
      --color-card-border: #1e3a8a1a;
    }

    @variant red {
      --color-background: #fff1f0;
      --color-foreground: #3b0606;
      --color-lime: #ffe1de;
      --color-primary: #a10d2b;
      --color-lemon: #ff8f70;
      --color-neon: #ffd7cf;
      --color-neonlite: #ffb3a7;
      --color-neonlite-200: #e04f54;
      --color-overlay-strong: #00000029;
      --color-overlay-light: #00000012;
      --color-card: #ffe6e1;
      --color-card-strong: #ffbfb2;
      --color-chip: #ff8f70;
      --color-chip-text: #5a0a15;
      --color-cta: #a10d2b;
      --color-cta-text: #fff6f4;
      --color-card-border: #a10d2b1a;
    }

    @variant orange {
      --color-background: #fff5eb;
      --color-foreground: #271201;
      --color-lime: #ffe8d2;
      --color-primary: #d45500;
      --color-lemon: #ffb347;
      --color-neon: #ffd8b5;
      --color-neonlite: #ffc494;
      --color-neonlite-200: #ff8a00;
      --color-overlay-strong: #00000029;
      --color-overlay-light: #00000012;
      --color-card: #fff0e0;
      --color-card-strong: #ffcf9f;
      --color-chip: #ffb347;
      --color-chip-text: #482100;
      --color-cta: #d45500;
      --color-cta-text: #fff5eb;
      --color-card-border: #d455001a;
    }

    @variant purple {
      --color-background: #f8f3ff;
      --color-foreground: #1f1033;
      --color-lime: #ede1ff;
      --color-primary: #6b21a8;
      --color-lemon: #c084fc;
      --color-neon: #ead7ff;
      --color-neonlite: #d8b4fe;
      --color-neonlite-200: #a855f7;
      --color-overlay-strong: #1f103326;
      --color-overlay-light: #1f103312;
      --color-card: #f0e4ff;
      --color-card-strong: #d8b4fe;
      --color-chip: #c084fc;
      --color-chip-text: #32104f;
      --color-cta: #6b21a8;
      --color-cta-text: #f8f3ff;
      --color-card-border: #6b21a81a;
    }

    @variant rosy {
      --color-background: #fff5f7;
      --color-foreground: #311018;
      --color-lime: #ffe9ef;
      --color-primary: #be185d;
      --color-lemon: #f472b6;
      --color-neon: #ffd6e9;
      --color-neonlite: #fbcfe8;
      --color-neonlite-200: #db2777;
      --color-overlay-strong: #31101826;
      --color-overlay-light: #31101812;
      --color-card: #ffeef3;
      --color-card-strong: #fbc0d8;
      --color-chip: #f472b6;
      --color-chip-text: #4f0f2b;
      --color-cta: #be185d;
      --color-cta-text: #fff5f7;
      --color-card-border: #be185d1a;
    }

    @variant candy {
      --color-background: #fff0fb;
      --color-foreground: #301433;
      --color-lime: #ffe0f4;
      --color-primary: #d946ef;
      --color-lemon: #facc15;
      --color-neon: #ffd6f6;
      --color-neonlite: #f5a9e9;
      --color-neonlite-200: #f472d0;
      --color-overlay-strong: #30143329;
      --color-overlay-light: #30143312;
      --color-card: #ffe8f8;
      --color-card-strong: #ffb7eb;
      --color-chip: #facc15;
      --color-chip-text: #5d1a58;
      --color-cta: #d946ef;
      --color-cta-text: #fff0fb;
      --color-card-border: #d946ef1a;
    }
  }
}

Native component colors

Uniwind also handles platform accents and native component colors. Tailwind color utilities map to native properties like cursor color, selection color, and more. You write a Tailwind color class, and Uniwind routes it to the correct native prop automatically.

Full TypeScript support

On the developer experience side, Uniwind generates a complete uniwind-types.d.ts file during the build, giving you autocomplete for all utilities, platform variants, theme tokens, and your custom CSS classes.

Uniwind brings Tailwind’s className workflow to React Native with near–StyleSheet performance by moving all heavy work—utility parsing, CSS processing, theming, and type generation—to build time through deep Metro integration. It supports platform-specific styling, CSS-variable theming, native color mapping, and full TypeScript types, offering a fast, modern, Tailwind-first styling system for React Native.