skills.rest
kirklin
kirklinCOMMUNITY
Explore all skills by this author →
Website𝕏@lkirkunGitHub

migrate-nativewind-to-uniwind

Migrate React Native projects from NativeWind to Uniwind with Tailwind v4 and CSS theming.

7|1|Updated Aug 21, 2024
Search Tags:#migration#tailwind#react-native#migrate#uniwind#nativewind#metro-config
One-click install
npx skills add https://github.com/kirklin/boot-react-native --skill migrate-nativewind-to-uniwind-kirklin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-nativewind-to-uniwind
Source: https://github.com/kirklin/boot-react-native/tree/main/.agents/skills/migrate-nativewind-to-uniwind
Command: npx skills add https://github.com/kirklin/boot-react-native --skill migrate-nativewind-to-uniwind-kirklin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrate a React Native project from NativeWind to Uniwind, unifying styling and theming under a modern Tailwind 4+ workflow.

Core Features & Use Cases

  • Migration guidance: step-by-step plan to remove NativeWind, install Uniwind, and update project configurations.
  • Theming and CSS migration: converts NativeWind theming (vars) to Uniwind CSS variables and updates global styles.
  • Compatibility fixes: updates babel and metro configs, removes tailwind config files, and aligns CSS entry points for reliable hot reload.

Quick Start

Follow this migration plan to replace NativeWind with Uniwind across your React Native project.

Frequently Asked Questions about migrate-nativewind-to-uniwind

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

FAQPage Schema
How do I migrate a React Native project from NativeWind to Uniwind?▼

To migrate NativeWind to Uniwind, remove NativeWind, install Uniwind, update babel.config.js and metro.config.js, delete tailwind.config.js, and update global.css for CSS-based theming.

What is the best way to upgrade Tailwind to v4 in a React Native project?▼

Upgrading Tailwind to v4 in React Native involves migrating to Uniwind, removing NativeWind-specific configurations like tailwind.config.js, and transitioning to CSS variables for theming.

How do I port NativeWind theming vars to CSS variables?▼

Port NativeWind theming vars to CSS variables by converting them into Uniwind CSS variables and updating your global.css file to establish the new CSS-based theming workflow.

Do I need to remove cssInterop and remapProps when migrating to Uniwind?▼

Yes, migrating to Uniwind enforces the removal of cssInterop and remapProps usage, requiring you to update your component styling approach to align with the new workflow.

Why does my NativeWind migration require a 14px rem polyfill?▼

A 14px rem polyfill is required during NativeWind migration to ensure consistent unit scaling in Uniwind, matching React Native's default base font size for reliable styling.

Related Skills

Explore More Software Engineering Skills→
jpudyszjpudysz

migrate-nativewind-to-uniwind

Migrate NativeWind React Native projects to Uniwind-compatible configurations.

Community
Advanced
uni-stackuni-stack
1.7k

migrate-nativewind-to-uniwind

Migrate NativeWind React Native projects to Uniwind with Tailwind 4.

Official
Advanced
mjamoremjamore

expo-tailwind-setup

Configure Tailwind CSS v4 styling in Expo projects with NativeWind and Metro.

Community
Intermediate
MarJose123MarJose123

migrate-nativewind-to-uniwind

Automate NativeWind to Uniwind migration in React Native projects.

Community
Advanced