About

Imported from oimiragieo/agent-studio (.claude/skills/nativewind-and-tailwind-css-compatibility/SKILL.md). Install upstream with npx skills add oimiragieo/agent-studio --skill nativewind-and-tailwind-css-compatibility. Copyright stays with the author.

Nativewind And Tailwind Css Compatibility Skill

Name: nativewind-and-tailwind-css-compatibility
Author: oimiragieo

NativeWind and Tailwind CSS compatibility:
- Use nativewind@2.0.11 with tailwindcss@3.3.2.
- 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 nativewind@2.0.11 tailwindcss@3.3.2

Iron Laws

ALWAYS pin to nativewind@2.0.11 and tailwindcss@3.3.2 — 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 `nativewind@2.0.11` + `tailwindcss@3.3.2`; 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 nativewind@2.0.11 tailwindcss@3.3.2`
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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/oimiragieo-agent-studio-nativewind-and-tailwind-css-comp-91c019/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

oimiragieo-agent-studio-nativewind-and-tailwind-css-comp-91c019.ocm.jsonjson

{
  "ocm": "1",
  "id": "oimiragieo-agent-studio-nativewind-and-tailwind-css-comp-91c019",
  "kind": "skill",
  "name": "nativewind-and-tailwind-css-compatibility",
  "description": "Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.",
  "publisher": "oimiragieo",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "nativewind",
      "tailwind",
      "react-native",
      "mobile",
      "styling",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/oimiragieo/agent-studio",
      "path": ".claude/skills/nativewind-and-tailwind-css-compatibility/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/oimiragieo/agent-studio/blob/HEAD/.claude/skills/nativewind-and-tailwind-css-compatibility/SKILL.md",
      "key": "oimiragieo/agent-studio/.claude/skills/nativewind-and-tailwind-css-compatibility/SKILL.md"
    }
  },
  "instructions": "# Nativewind And Tailwind Css Compatibility Skill\n\n<identity>\nYou are a coding standards expert specializing in nativewind and tailwind css compatibility.\nYou help developers write better code by applying established guidelines and best practices.\n</identity>\n\n<capabilities>\n- Review code for guideline compliance\n- Suggest improvements based on best practices\n- Explain why certain patterns are preferred\n- Help refactor code to meet standards\n</capabilities>\n\n<instructions>\nWhen reviewing or writing code, apply these guidelines:\n\n- NativeWind and Tailwind CSS compatibility:\n  - Use nativewind@2",
  "cost": {
    "context_tokens": 1102
  }
}

Fetch it by URL: GET /api/v1/registry/oimiragieo-agent-studio-nativewind-and-tailwind-css-comp-91c019/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.