uniwind
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or styling components in a React Native project that uses Tailwind with className. Triggers on: className on RN components, Tailwind classes in RN, global.css with @import 'uniwind', withUniwindConfig, withUniwind, metro.config.js with Uniwind, useResolveClassNames, useCSSVariable, getCSSVariable, useUniwind, dark:/light: theming, platform selectors (ios:/android:/native:/web:/tv:), data-[prop=value], responsive break
Security Assessment
Detected risks:
About uniwind
Uniwind is a specialized AI skill that brings the power of Tailwind CSS v4 into React Native projects, providing developers with a seamless styling experience directly through the `className` prop. It addresses the limitations of styling in React Native by enabling developers to use familiar Tailwind utilities without runtime overhead. By compiling styles at build time, Uniwind ensures high performance while maintaining the expressiveness and utility-first approach of Tailwind. It eliminates the need for additional wrappers or ThemeProviders for core components, simplifying integration and reducing boilerplate in mobile projects.
FAQ
Which versions of React Native and Tailwind CSS does Uniwind support?
Uniwind supports React Native 0.81+ and Tailwind CSS v4. For the best experience, it is recommended to use Uniwind version 1.6.0 or higher.
Can I construct classNames dynamically when using Uniwind?
No. ClassNames must be complete string literals, mapping objects, or ternaries. Dynamic constructions like `bg-${color}-500` are not supported because Tailwind scans styles at build time.
Do I need to wrap core React Native components with `withUniwind`?
No. Core components like View, Text, Pressable, Image, ScrollView, FlatList, and Animated components already have built-in className support. Wrapping them with `withUniwind` may break functionality. Use `withUniwind` only for third-party components.
How should I handle non-style color props like `color` or `tintColor`?
For non-style color props, you must use the corresponding `{propName}ClassName` prop with the `accent-` prefix. For example, use `<ActivityIndicator colorClassName="accent-blue-500" />` instead of applying standard className colors.
Is a ThemeProvider required to use Uniwind themes?
No. You can directly set themes using `Uniwind.setTheme()`. All theme variants must define the same set of CSS variables to avoid runtime errors.
Install uniwind
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
uni-stack/uniwind