# Nativewind V4
> NativeWind v4 patterns for Liftera (React Native + React Native Web). Trigger: When styling React Native components with className, configuring Tailwind/NativeWind, or debugging style differences between web and mobile.
- Skill: `majiayu000/nativewind-v4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/nativewind-v4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/nativewind-v4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/nativewind-v4
---
## Styling Decision Tree
```
Tailwind class exists? → className="..."
Dynamic value? → style={{ width: `${x}%` }}
Conditional styles? → cn("base", condition && "variant")
Static only? → className="..." (no cn() needed)
Library can't use class?→ style prop with var() constants
```
## Critical Rules
### Never Use var() in className
```typescript
// ❌ NEVER: var() in className
// ✅ ALWAYS: Use Tailwind semantic classes
```
### Never Use Hex Colors
```typescript
// ❌ NEVER: Hex colors in className
// ✅ ALWAYS: Use Tailwind color classes
```
## The cn() Utility
```typescript
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
### When to Use cn()
```typescript
// ✅ Conditional classes
// ✅ Merging with potential conflicts
// className might override
// ✅ Multiple conditions
```
### When NOT to Use cn()
```typescript
// ❌ Static classes - unnecessary wrapper
// ✅ Just use className directly
```
## Style Constants for Charts/Libraries
When libraries don't accept className (like Recharts):
```typescript
// ✅ Constants with var() - ONLY for library props
const CHART_COLORS = {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
text: "var(--color-text)",
gridLine: "var(--color-border)",
};
// Usage with Recharts (can't use className)
```
## Dynamic Values
```typescript
// ✅ style prop for truly dynamic values
```
## Common Patterns
### Flexbox
```typescript
```
### Grid
```typescript
```
### Spacing
```typescript
// Padding
// All sides
// Horizontal, vertical
// Top, bottom
// Margin
// Center horizontally
```
### Typography
```typescript
```
### Borders & Shadows
```typescript
```
### States
```typescript
```
### Responsive
```typescript
```
### Dark Mode
```typescript
```
## Arbitrary Values (Escape Hatch)
```typescript
// ✅ OK for one-off values not in design system
// ❌ Don't use for colors - use theme instead
// NO
```
## Cross-Platform Styling (REQUIRED)
- **ALWAYS** use `className` for styling where supported.
- **ALWAYS** ensure styles render correctly in:
- Expo (native)
- React Native Web (Next.js)
## Avoid Platform Assumptions (REQUIRED)
- **NEVER** assume CSS-only features exist in native.
- **ALWAYS** prefer utility classes and shared tokens over platform hacks.
## When to Use style Prop
- Use `style={{ ... }}` only for truly dynamic values that are not representable as utility classes.
## Debugging Checklist
- Confirm the component runs in both apps.
- Confirm the Tailwind config is shared/compatible.
- If a style differs web vs native, isolate whether it is a layout difference (flexbox) or a platform limitation.