UI with Tailwind (NativeWind) & Design Systems

Core concepts

1. NativeWind: NativeWind lets you write className="flex-1 bg-white p-4" on React Native components. Expo documents a Tailwind guide, and NativeWind has its own install steps that track Tailwind versions. — NativeWind docs
2. Utility-first thinking: Layout, spacing, colour and typography come from small composable classes. Agents are good at this style because the vocabulary is small and well documented. — Tailwind docs
3. Design tokens: Define colours, spacing and radii once in tailwind.config.js (for example primary, surface, muted) and use the names everywhere so a re-theme is one file. — Tailwind theme docs
4. Reusable components: Build Button, Card, Input, Screen and Text once with variants, then ask agents to compose screens from them instead of re-styling every view. — Expo docs
5. Platform-aware design: Follow Apple's Human Interface Guidelines and Material 3 for tap-target size, navigation patterns and typography, and use ios: and android: variants where they differ. — Apple HIG
6. Style prompts from our database: Use image and video style prompts for app icons, splash art, onboarding illustrations and store screenshots, so your visual identity stays consistent. — AI style prompts database

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

• NativeWind tutorials — YouTube search: NativeWind Expo tutorial
• UI for mobile with Tailwind — notJust.dev channel

Explanation

Why classes beat style objects for agents

A style object is arbitrary JavaScript, so an agent can invent any shape. Class names come from a fixed vocabulary, which makes output predictable and diffs easy to read.

Tokens first, screens second

Decide your palette, type scale and spacing before generating screens. Give the agent the tokens in the rules file and forbid raw hex codes in screens.

Design from references

Collect two or three screenshots of apps you like from the Top Mobile Apps database, describe what you like about each, and give the agent those descriptions plus your tokens.

What Is It?

NativeWind is a library that brings Tailwind CSS class names to React Native so styling uses the same utility vocabulary as the web.

Why Should I Care?

Consistent tokens and components keep AI-generated screens looking like one app instead of ten.

Real World Analogy

Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.

Visual Mental Model

tailwind.config tokens -> components/ui (Button, Card, Input) -> screens compose components

Beginner Explanation

Install NativeWind, define five colour tokens, build a Button and a Card, then tell your agent to use only those components and tokens for every new screen.

Smallest Possible Example

import { Pressable, Text, View } from 'react-native';

export function Card({ title }: { title: string }) {
  return (
    <View className="rounded-2xl bg-white p-4 shadow-sm">
      <Text className="text-lg font-semibold text-slate-900">{title}</Text>
      <Pressable className="mt-3 rounded-xl bg-indigo-600 px-4 py-3 active:opacity-80">
        <Text className="text-center font-medium text-white">Continue</Text>
      </Pressable>
    </View>
  );
}

Common Mistakes

❌ Letting every screen use its own colours.

Colours drift and re-theming becomes a hunt. Use token names only.

❌ Tiny tap targets.

Aim for at least 44 points on iOS and 48 dp on Android.

❌ Mixing StyleSheet, inline styles and classes.

Pick one approach and write it in the rules file.

Real Project Example

Many Expo templates and open-source starters now ship with NativeWind and a small set of shared components; agents reproduce that pattern reliably.

Build This Mini Project

Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.

Interview Question

Why define design tokens before generating screens with an AI agent?

Tokens constrain the agent to a fixed vocabulary, so generated screens stay consistent and a theme change is a single-file edit.

Key Takeaways

• NativeWind gives Tailwind classes on React Native.
• Tokens and components come before screens.
• Forbid raw hex values and inline styles in your rules.
• Respect platform guidelines and tap-target sizes.

Stack for this step

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Create design tokens

Propose a colour palette (primary, surface, text, muted, danger), a type scale and spacing scale for a [style: calm / bold / playful] [app type] app. Output tailwind.config.js theme.extend values with names, and a one-paragraph usage guide.

Build the component kit

Using NativeWind and our tokens, create components/ui/Button.tsx (variants: primary, secondary, ghost; sizes sm/md), Card.tsx, Input.tsx and Screen.tsx (safe area + padding). Add a showcase screen. No raw hex codes or inline styles.

Screen from a reference

Build the [screen name] screen from this description: [paste]. Use only components in components/ui and token class names. Include loading, empty and error states.

Claude Code skill for this step

Save this as .claude/skills/nativewind-ui-kit/SKILL.md in your project so Claude Code loads it automatically when the task matches. The same text works as a Cursor rule or an AGENTS.md section.

---
name: nativewind-ui-kit
description: Use when creating or editing UI so screens stay consistent with the design tokens.
---
1. Read tailwind.config.js tokens and components/ui before writing any screen.
2. Compose screens only from components/ui; add a new component first if one is missing.
3. Never use raw hex values, inline style objects or StyleSheet.create.
4. Check tap targets, safe areas and dark mode before finishing.

Rules, databases & blogs to use

• AI style prompts database: image and video style prompts for icons, splash and store art
• Tailwind rule: Tailwind conventions rule
• Tailwind rules by technology: 21 Tailwind rules
• AI React Tailwind code generator: generating UI from prompts
• Figma to React code: design handoff to code
• Design engineer websites: design inspiration sources
• Top mobile apps: reference apps by category

Resources

• NativeWind
• Expo Tailwind guide
• Tailwind CSS docs
• Apple HIG
• Material Design 3

The 60-second story

A fashion label keeps one colour card and one fabric swatch book. Every garment, no matter which tailor sews it, comes from the same cards, so the collection looks like one brand.

Your tokens are the colour card and your components/ui folder is the swatch book. The agent is a fast tailor: give it the cards and it sews every screen in the same style. Without them each screen arrives in a different colour.

Mental model: tokens and components first, screens last.