Uniwind 最佳实践指南：React Native 最快的 Tailwind CSS 绑定性能优化与配置

uniwind by pproenca/dot-skills

88 周安装量

86 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/pproenca/dot-skills --skill uniwind

CSS React 性能优化

🇨🇳中文介绍

Uniwind 最佳实践

适用于 Uniwind（React Native 最快的 Tailwind CSS 绑定）的全面性能优化和最佳实践指南。包含 8 个类别下的 45 多条规则，按影响优先级排序，以指导自动化重构和代码生成。

何时应用

在以下情况下参考本指南：

在新 React Native 项目中设置 Uniwind
配置 Metro 插件和 CSS 入口点
使用 CSS 变量构建主题系统
集成支持 className 的第三方组件
为移动设备和平板创建响应式布局
优化样式性能
从 NativeWind 迁移到 Uniwind

按优先级划分的规则类别

优先级	类别	影响	前缀
1	构建时配置	关键	`build-`
2	主题架构	关键	`theme-`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

1. 构建时配置 (关键)

build-metro-config - 使用必需选项配置 Metro 插件
build-css-entry - 将 CSS 入口文件置于应用根目录
build-typescript-types - 配置 TypeScript 定义文件位置
build-restart-metro - 配置更改后重启 Metro
build-debug-mode - 在开发期间启用调试模式
build-rem-polyfill - 为设计系统一致性配置 rem 基准值

2. 主题架构 (关键)

theme-css-variables - 使用 @theme 指令定义主题变量
theme-variant-blocks - 使用 @variant 块进行主题定义
theme-consistent-variables - 在所有主题中定义相同的变量
theme-custom-registration - 在 Metro 配置中注册自定义主题
theme-oklch-colors - 使用 OKLCH 色彩空间实现感知均匀性
theme-light-dark-function - 使用 light-dark() 函数实现自适应颜色
theme-no-provider - 从应用中移除 ThemeProvider 包装器

3. 组件集成 (高)

comp-with-uniwind - 对第三方组件使用 withUniwind
comp-module-level - 在模块级别定义包装组件
comp-prop-mapping - 为非样式属性使用自定义属性映射
comp-accent-colors - 使用 accent-* 类进行颜色属性提取
comp-reanimated - Reanimated 组件无需 withUniwind 即可工作
comp-custom-css - 对复杂的可重用样式使用自定义 CSS 类

4. 响应式设计 (高)

resp-mobile-first - 采用移动优先设计，逐步增强
resp-limit-breakpoints - 将断点限制在 3-5 个以提高可维护性
resp-visibility-toggle - 使用 hidden/flex 实现响应式可见性
resp-custom-breakpoints - 使用语义化名称定义自定义断点
resp-responsive-spacing - 响应式地调整间距和排版

5. 性能优化 (中-高)

perf-static-classnames - 使用完整的静态类名以实现构建时解析
perf-use-resolve-sparingly - 谨慎使用 useResolveClassNames
perf-memoize-variants - 对变体样式对象进行记忆化
perf-tailwind-merge - 使用 tailwind-merge 进行类去重
perf-avoid-inline-styles - 优先使用 className 而非内联 style 属性
perf-combine-styles - 正确组合 className 和 style 属性

6. 平台模式 (中)

plat-ios-android-selectors - 对 iOS/Android 差异使用平台选择器
plat-safe-area-context - 使用 react-native-safe-area-context 处理安全区域
plat-yoga-layout - 了解 Yoga 布局引擎的差异
plat-web-selector - 对跨平台应用使用 web: 选择器
plat-font-families - 配置字体族时不使用回退字体

7. 状态与交互 (中)

state-pressable-states - 将 Pressable 与 active:/focus:/disabled: 状态结合使用
state-data-selectors - 使用数据选择器进行组件状态样式设置
state-no-hover - 在原生端避免使用 hover:，改用 active:
state-group-variants - 对父子样式使用组变体 (WIP)
state-dark-mode - 对深色模式样式使用 dark: 变体

8. 迁移与兼容性 (低-中)

compat-nativewind-migration - 遵循 NativeWind 迁移清单
compat-tailwind-4-syntax - 使用 Tailwind 4 CSS 优先配置
compat-rem-default - 考虑不同的 rem 默认值
compat-cssinterop-replacement - 将 cssInterop 替换为 withUniwind
compat-safe-area-changes - 将 *-safe 类替换为安全区域上下文

阅读各个参考文件以获取详细说明和代码示例：

章节定义 - 类别结构和影响级别
规则模板 - 添加新规则的模板

文件	描述
AGENTS.md	包含所有规则的完整编译指南
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息

🇺🇸English

Uniwind Best Practices

Comprehensive performance optimization and best practices guide for Uniwind - the fastest Tailwind CSS bindings for React Native. Contains 45+ rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

Setting up Uniwind in a new React Native project
Configuring Metro plugin and CSS entry points
Building theme systems with CSS variables
Integrating third-party components with className support
Creating responsive layouts for mobile and tablet
Optimizing styling performance
Migrating from NativeWind to Uniwind

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Build-Time Configuration	CRITICAL	`build-`
2	Theme Architecture	CRITICAL	`theme-`
3	Component Integration	HIGH	`comp-`
4	Responsive Design	HIGH	`resp-`
5	Performance Optimization	MEDIUM-HIGH	`perf-`
6	Platform Patterns	MEDIUM	`plat-`
7	State & Interaction	MEDIUM	`state-`
8	Migration & Compatibility	LOW-MEDIUM	`compat-`

Quick Reference

1. Build-Time Configuration (CRITICAL)

build-metro-config - Configure Metro Plugin with Required Options
build-css-entry - Place CSS Entry File in App Root Directory
build-typescript-types - Configure TypeScript Definition File Location
build-restart-metro - Restart Metro After Configuration Changes
build-debug-mode - Enable Debug Mode During Development
build-rem-polyfill - Configure rem Base Value for Design System Consistency

2. Theme Architecture (CRITICAL)

theme-css-variables - Define Theme Variables with @theme Directive
theme-variant-blocks - Use @variant Blocks for Theme Definitions
theme-consistent-variables - Define Identical Variables Across All Themes
theme-custom-registration - Register Custom Themes in Metro Config
theme-oklch-colors - Use OKLCH Color Space for Perceptual Uniformity
- Use light-dark() Function for Adaptive Colors

3. Component Integration (HIGH)

comp-with-uniwind - Use withUniwind for Third-Party Components
comp-module-level - Define Wrapped Components at Module Level
comp-prop-mapping - Use Custom Prop Mappings for Non-Style Props
comp-accent-colors - Use accent-* Classes for Color Prop Extraction
comp-reanimated - Reanimated Components Work Without withUniwind
comp-custom-css - Use Custom CSS Classes for Complex Reusable Styles

4. Responsive Design (HIGH)

resp-mobile-first - Design Mobile-First with Progressive Enhancement
resp-limit-breakpoints - Limit Breakpoints to 3-5 for Maintainability
resp-visibility-toggle - Use hidden/flex for Responsive Visibility
resp-custom-breakpoints - Define Custom Breakpoints with Semantic Names
resp-responsive-spacing - Scale Spacing and Typography Responsively

5. Performance Optimization (MEDIUM-HIGH)

perf-static-classnames - Use Complete Static Class Names for Build-Time Resolution
perf-use-resolve-sparingly - Use useResolveClassNames Sparingly
perf-memoize-variants - Memoize Variant Style Objects
perf-tailwind-merge - Use tailwind-merge for Class Deduplication
perf-avoid-inline-styles - Prefer className Over Inline style Prop
- Combine className and style Prop Correctly

6. Platform Patterns (MEDIUM)

plat-ios-android-selectors - Use Platform Selectors for iOS/Android Differences
plat-safe-area-context - Use react-native-safe-area-context for Safe Areas
plat-yoga-layout - Understand Yoga Layout Engine Differences
plat-web-selector - Use web: Selector for Cross-Platform Apps
plat-font-families - Configure Font Families Without Fallbacks

7. State & Interaction (MEDIUM)

state-pressable-states - Use Pressable with active:/focus:/disabled: States
state-data-selectors - Use Data Selectors for Component State Styling
state-no-hover - Avoid hover: on Native - Use active: Instead
state-group-variants - Use Group Variants for Parent-Child Styling (WIP)
state-dark-mode - Use dark: Variant for Dark Mode Styles

8. Migration & Compatibility (LOW-MEDIUM)

compat-nativewind-migration - Follow NativeWind Migration Checklist
compat-tailwind-4-syntax - Use Tailwind 4 CSS-First Configuration
compat-rem-default - Account for Different rem Default Values
compat-cssinterop-replacement - Replace cssInterop with withUniwind
compat-safe-area-changes - Replace *-safe Classes with Safe Area Context

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

Weekly Installs

Repository

pproenca/dot-skills

GitHub Stars

First Seen

Feb 14, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex84

opencode83

gemini-cli83

github-copilot82

kimi-cli80

amp79

GSAP 框架集成指南：Vue、Svelte 等框架中 GSAP 动画最佳实践

2,900 周安装

theme-light-dark-function

theme-no-provider - Remove ThemeProvider Wrapper from App

perf-combine-styles