skills.rest
babually
babuallyCOMMUNITY
Explore all skills by this author →
GitHub

uniwind

Configure Tailwind CSS v4 styling for React Native and Expo applications.

1|Updated Jun 27, 2026
Search Tags:#theming#tailwind css#react native#ui styling#expo#className#metro config
One-click install
npx skills add https://github.com/babually/bongo-template --skill uniwind-babually
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uniwind
Source: https://github.com/babually/bongo-template/tree/main/.agents/skills/uniwind
Command: npx skills add https://github.com/babually/bongo-template --skill uniwind-babually

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Uniwind solves the friction of styling React Native apps with a consistent Tailwind CSS v4 workflow, so teams can build cross-platform UI faster without manual style juggling or a separate theme system.

Core Features & Use Cases

  • Native className styling: Use Tailwind utilities directly on core React Native components like View, Text, Pressable, TextInput, ScrollView, and more.
  • Correct color-prop handling: Apply non-style colors such as tintColor, placeholderTextColor, thumbColor, and ActivityIndicator color using dedicated accent-prefixed class props.
  • Production-ready theming and setup: Configure Metro, global.css, custom themes, responsive/state variants, and third-party component wrapping with withUniwind for reusable UI systems.
  • Use case: A React Native team can standardize buttons, forms, lists, and theme switching across Expo and bare RN apps while avoiding broken dynamic class names and styling edge cases.

Quick Start

Use the uniwind skill to diagnose or implement Tailwind v4 styling in my React Native or Expo app and tell me exactly how to configure classes, themes, and component props correctly.

Frequently Asked Questions about uniwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind CSS v4 styling for a React Native app?▼

Configuring Tailwind CSS v4 for React Native involves setting up Metro configuration, global.css, and custom themes to enable native className styling on core components like View and Text. This ensures consistent cross-platform UI without manual style juggling.

How do I apply non-style colors like tintColor or placeholderTextColor using Tailwind in React Native?▼

Non-style colors such as tintColor, placeholderTextColor, and ActivityIndicator color are handled using dedicated accent-prefixed class props. This allows Tailwind utilities to correctly target React Native specific color properties beyond standard style attributes.

Does Tailwind CSS v4 work with Expo and bare React Native projects?▼

Yes, the workflow supports both Expo and bare React Native applications. It handles Metro configuration and component setup to ensure Tailwind CSS v4 styling integrates seamlessly across different React Native environments.

What is the best way to wrap third-party UI components with Tailwind in React Native?▼

Third-party UI components are wrapped using withUniwind to create reusable UI systems. This approach ensures external components correctly inherit custom themes, responsive variants, and className styling within your React Native application.

Why do my dynamic Tailwind class names break in React Native?▼

Dynamic class names break when Tailwind CSS v4 setup lacks correct handling of built-in React Native styling rules and Metro configuration. Proper theming setup prevents these styling edge cases and ensures classes render correctly.

Related Skills

Explore More Software Engineering Skills→
cristianbc2004cristianbc2004

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo apps with NativeWind v5 and react-native-css.

Community
Intermediate
CamiloAndresGTRUniandesCamiloAndresGTRUniandes
19

tailwind-4

Enforce safe Tailwind class composition and theme usage in React/TypeScript.

Community
Basic
ai-enhanced-engineerai-enhanced-engineer
3

react-native-modern-patterns

Guide modern React Native development with TypeScript, Expo SDK, and React Navigation.

Official
Advanced
luthebaoluthebao
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate