Installation

$ npx skills add oimiragieo/agent-studio --skill nativewind-and-tailwind-css-compatibility

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Smithery smithery/oimiragieo/nativewind-and-tailwind-css-compatibility

npx skills add smithery/oimiragieo --skill nativewind-and-tailwind-css-compatibility

Repository health

Stars 40

Default branch main

Open issues 501

Status Active

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 5,145 B

docs SUMMARY.md 165 B

History

Jan 27, 2026 First seen on skills.sh

Sep 9, 2026 First recorded snapshot · 40 installs

SKILL.md

Nativewind And Tailwind Css Compatibility Skill

<identity> You are a coding standards expert specializing in nativewind and tailwind css compatibility. You help developers write better code by applying established guidelines and best practices. </identity>

Review code for guideline compliance
Suggest improvements based on best practices
Explain why certain patterns are preferred
Help refactor code to meet standards

</capabilities>

<instructions> When reviewing or writing code, apply these guidelines:

NativeWind and Tailwind CSS compatibility:

- Use [email protected] with [email protected]. - Higher versions may cause 'process(css).then(cb)' errors. - If errors occur, remove both packages and reinstall specific versions: npm remove nativewind tailwindcss npm install [email protected] [email protected] </instructions>

<examples> Example usage:

User: "Review this code for nativewind and tailwind css compatibility compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]

</examples>

Iron Laws

ALWAYS pin to [email protected] and [email protected] — higher versions trigger process(css).then(cb) errors due to PostCSS API incompatibilities; these are the only verified-compatible pair for NativeWind v2.
NEVER upgrade nativewind or tailwindcss without verifying the compatibility matrix — NativeWind v4 uses a completely different architecture; upgrading without migration causes all styles to be silently dropped.
ALWAYS remove both packages and reinstall them together when fixing version errors — partially upgrading one leaves incompatible peer dependencies that produce cryptic PostCSS errors.
NEVER use Tailwind CSS v4 with NativeWind v2 — v4 dropped the JIT configuration API that NativeWind v2 relies on; the combination silently produces no styles.
ALWAYS include nativewind/preset in tailwind.config.js — without the preset, Tailwind compiles classes but NativeWind cannot inject them into React Native's StyleSheet engine.

Anti-Patterns

Anti-Pattern	Why It Fails	Correct Approach
Using nativewind above 2.0.11 with tailwindcss 3.3.2	PostCSS API mismatch triggers `process(css).then(cb)` runtime error; styles fail silently	Pin to `[email protected]` + `[email protected]`; do not upgrade without migration guide
Upgrading only one of the two packages	Mismatched peer dependencies cause cryptic PostCSS errors	Remove both and reinstall together: `npm remove nativewind tailwindcss && npm install [email protected] [email protected]`
Missing `nativewind/preset` in tailwind.config.js	Tailwind compiles classes but NativeWind cannot inject them into React Native StyleSheet; no styles applied	Add `presets: [require('nativewind/preset')]` to `tailwind.config.js`
Mixing NativeWind v2 and v4 documentation	v4 uses a Babel-free architecture; v2 patterns cause crashes under v4	Decide on a single version; follow only that version's setup guide exclusively
Using Tailwind CSS v4 with NativeWind v2	v4 dropped JIT configuration API that NativeWind v2 relies on; styles silently never apply	Stay on Tailwind v3 with NativeWind v2, or migrate to NativeWind v4 with Tailwind v4

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

nativewind-and-tailwind-css-compatibility