Uniwind
Style and debug React Native screens with Tailwind CSS v4 classNames via Uniwind without NativeWind-style APIs.
Overview
Uniwind is an agent skill for the Build phase that applies Tailwind CSS v4 className styling to React Native and Expo components with correct Metro, global.css, and Uniwind-specific rules.
Install
npx skills add https://github.com/uni-stack/uniwind --skill uniwindWhat is this skill?
- Compile-time Tailwind CSS v4 for React Native via className on core components—no runtime CSS overhead
- 4 critical rules: v4 @import only, no dynamic className strings, no cssInterop/remapProps, config in global.css not tail
- Covers Metro setup, global.css, theming, platform/data/state/responsive variants, accent-* props, CSS variables, and cus
- withUniwind for third-party components plus cn/tailwind-merge and tailwind-variants patterns
- Diagnostics, troubleshooting, React Navigation, UI kits, gradients, fonts, safe-area utilities, and Uniwind Pro features
- Targets Uniwind 1.7.0+ (free) and Uniwind Pro 1.2.1+
- Tailwind CSS v4 via @import tailwindcss; React Native 0.81+ and Expo SDK 54+
- 4 critical rules documented at the top of the skill reference
Adoption & trust: 2.4k installs on skills.sh; 1.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping a React Native app and need Tailwind-style utilities on native components without NativeWind APIs, runtime bloat, or build-time class scanning mistakes.
Who is it for?
Solo builders on Expo SDK 54+ or React Native 0.81+ who want Tailwind v4 utilities on mobile UI and will follow compile-time class literal rules.
Skip if: Teams migrating from NativeWind (explicitly out of scope), web-only Tailwind projects, or codebases still on Tailwind v3 patterns and tailwind.config.js.
When should I use this skill?
Adding, building, or debugging components in a React Native project that uses Uniwind classNames—including setup, Metro, global.css, theming, variants, third-party components, and troubleshooting.
What do I get? / Deliverables
Your agent configures Uniwind and global.css correctly, uses literal classNames and documented variants, and resolves styling issues with the skill's diagnostics and troubleshooting flow.
- Configured Metro and global.css for Uniwind + Tailwind v4
- className-based RN components using documented variants and theme tokens
- Diagnostics-backed fixes for common Uniwind styling and integration failures
Recommended Skills
Journey fit
Uniwind is applied while implementing and refining the mobile UI layer—Metro, global.css, and component classNames are build-time frontend work. The skill is entirely about RN component styling, theming, variants, and UI-kit integration, which maps to the frontend subphase of Build.
How it compares
Use as a Uniwind-on-React-Native styling reference—not a NativeWind migration guide and not generic web Tailwind v4 docs.
Common Questions / FAQ
Who is uniwind for?
Indie and solo developers building React Native or Expo apps who use or plan Uniwind classNames for layout, theme, and component styling with Tailwind CSS v4.
When should I use uniwind?
Use it during Build when adding components, editing global.css or Metro config, applying platform or state variants, wrapping third-party views with withUniwind, or debugging missing styles—especially before shipping styled navigation and UI-kit screens.
Is uniwind safe to install?
Review the Security Audits panel on this Prism catalog page and your org policy before installing any skill; the skill text is documentation-only and does not replace vetting the package source and repo you pull from.
SKILL.md
READMESKILL.md - Uniwind
# Uniwind — Complete Reference > Uniwind 1.7.0+ / Uniwind Pro 1.2.1+ / Tailwind CSS v4 / React Native 0.81+ / Expo SDK 54+ If user has lower version, recommend updating to 1.7.0+ (free) / 1.2.1+ (Pro) for best experience. Uniwind brings Tailwind CSS v4 to React Native. All core React Native components support the `className` prop out of the box. Styles are compiled at build time — no runtime overhead. ## Critical Rules 1. **Tailwind v4 only** — Use `@import 'tailwindcss'` not `@tailwind base`. Tailwind v3 is not supported. 2. **Never construct classNames dynamically** — Tailwind scans at build time. `bg-${color}-500` will NOT work. Use complete string literals, mapping objects, or ternaries. 3. **Never use `cssInterop` or `remapProps`** — Those are NativeWind APIs. Uniwind does not override global components. 4. **No `tailwind.config.js`** — All config goes in `global.css` via `@theme` and `@layer theme`. 5. **No ThemeProvider required** — Use `Uniwind.setTheme()` directly. 6. **`withUniwindConfig` must be the outermost** Metro config wrapper. 7. **NEVER wrap `react-native` or `react-native-reanimated` components with `withUniwind`** — `View`, `Text`, `Pressable`, `Image`, `TextInput`, `ScrollView`, `FlatList`, `Switch`, `Modal`, `Animated.View`, `Animated.Text`, etc. already have full `className` support built in. Wrapping them with `withUniwind` will break behavior. Only use `withUniwind` for **third-party** components (e.g., `expo-image`, `expo-blur`, `moti`). 8. **Font families: single font only** — React Native doesn't support fallbacks. Use `--font-sans: 'Roboto-Regular'` not `'Roboto', sans-serif`. 9. **All theme variants must define the same set of CSS variables** — If `light` defines `--color-primary`, then `dark` and every custom theme must too. Mismatched variables cause runtime errors. 10. **`accent-` prefix is REQUIRED for non-style color props** — This is crucial. Props like `color` (Button, ActivityIndicator), `tintColor` (Image), `thumbColor` (Switch), `placeholderTextColor` (TextInput) are NOT part of the `style` object. You MUST use the corresponding `{propName}ClassName` prop with `accent-` prefixed classes. Example: `<ActivityIndicator colorClassName="accent-blue-500" />` NOT `<ActivityIndicator className="text-blue-500" />`. Regular Tailwind color classes (like `text-blue-500`) only work on `className` (which maps to `style`). For non-style color props, always use `accent-`. 11. **rem default is 16px** — NativeWind used 14px. Set `polyfills: { rem: 14 }` in metro config if migrating. 12. **`cssEntryFile` must be a relative path string** — Use `'./global.css'` not `path.resolve(__dirname, 'global.css')`. 13. **Deduplicate with `cn()` when mixing custom CSS classes and Tailwind** — Uniwind does NOT auto-deduplicate. If a custom CSS class (`.card { padding: 16px }`) and a Tailwind utility (`p-6`) set the same property, both apply with unpredictable results. Always wrap with `cn('card', 'p-6')` when there's overlap. 14. **Important utilities are supported** — Tailwind important modifier works in classNames with `!` at the end: `bg-red-500!`, `active:bg-red-500!`, `ios:pt-12!`. Leading `!bg-red-500` syntax is deprecated. Important utilities override non-important utilities for the same style property, but inline `style` still overrides className. ## Setup ### Installation ```bash # or other package manage