AgentSkillsCN

tailwind-nativewind

为React Native/Expo应用使用Tailwind与NativeWind进行样式设计。在为组件添加样式、编辑主题或global.css，或在应用中使用className时使用此功能。

SKILL.md
--- frontmatter
name: tailwind-nativewind
description: Tailwind and NativeWind styling for React Native/Expo. Use when styling components, editing theme or global.css, or using className in the app.

Tailwind / NativeWind

Stack: Tailwind with nativewind/preset, className on RN components. Theme via CSS variables in global.css and tailwind.config.js.

Setup

  • •Config: tailwind.config.js uses nativewind/preset, darkMode: 'class', content over src/app, src/components, src/screens.
  • •Theme: Colors and radius come from global.css :root (HSL values without hsl()). tailwind.config.js theme.extend maps background, foreground, primary, secondary, destructive, muted, accent, card, popover, border, input, ring to hsl(var(--name)).
  • •Utils: Use cn() from ~/src/lib/utils (clsx + tailwind-merge) to merge className values. Use cva for component variants.

Design tokens

  • •Prefer semantic tokens over raw colors: text-foreground, text-muted-foreground, text-primary, bg-background, bg-card, bg-primary, border-border, bg-secondary/25, bg-primary/10.
  • •Radius: rounded-md, rounded-lg, rounded-2xl; config has radius (lg, md, sm).
  • •Shadows: shadow-sm shadow-black/5 for subtle elevation.
  • •Custom fonts: font-Poppins400 … font-Poppins700 (defined in theme fontFamily).

Components

  • •Build variants with cva; base classes plus Platform.select({ web: '...' }) for web-only hover:, focus-visible:, aria-invalid:.
  • •Pass className into cn(buttonVariants({ variant, size }), className) so callers can override or extend.
  • •Put className last on the element when passing it through.

Conventions

  • •Style with className; use StyleSheet only when values are dynamic or not expressible in Tailwind.
  • •content must include any directory that contains className usage so classes are generated.