playbooks

home / skills / oimiragieo / agent-studio / nativewind-and-tailwind-css-compatibility

nativewind-and-tailwind-css-compatibility skill

/.claude/skills/_archive/dead/nativewind-and-tailwind-css-compatibility

This skill analyzes NativeWind and Tailwind CSS compatibility and guides precise versioning to prevent installation errors.

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

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
1.8 KB
---
name: nativewind-and-tailwind-css-compatibility
description: Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: package.json
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# 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>

<capabilities>
- 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>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
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.

Overview

This skill provides clear version compatibility guidance for NativeWind and Tailwind CSS to prevent common installation and runtime errors. It focuses on the tested combination [email protected] with [email protected] and gives actionable remediation steps if incompatibilities occur. The goal is to reduce time spent debugging build or runtime failures caused by mismatched package versions.

How this skill works

The skill inspects project dependencies and identifies when NativeWind and Tailwind CSS versions are outside the recommended pair. It highlights the specific error patterns that arise from unsupported combinations (for example, build-time errors related to process(css).then(cb)). When a mismatch is detected, it recommends uninstalling and reinstalling the exact compatible versions and explains why that fixes the issue.

When to use it

  • When adding NativeWind or Tailwind CSS to a React Native or Expo project for the first time.
  • When encountering build or runtime errors referencing process(css).then(cb) or similar postcss/tailwind failures.
  • During dependency upgrade cycles to verify compatibility before committing changes.
  • When onboarding teammates and enforcing a stable UI tooling baseline.
  • When automated CI builds fail after dependency changes related to styling packages.

Best practices

  • Use [email protected] together with [email protected]; avoid mixing higher or untested versions.
  • If you hit compatibility errors, run: npm remove nativewind tailwindcss && npm install [email protected] [email protected].
  • Lock these versions in package.json and your lockfile (package-lock.json or yarn.lock) to ensure consistent installs across environments.
  • Test style-related changes in a clean environment (clear node_modules and reinstall) to reproduce and confirm fixes.
  • Document the approved versions in project README and any onboarding docs to reduce accidental upgrades.

Example use cases

  • A React Native app fails to build after upgrading Tailwind CSS; the skill guides restoring the tested version pair.
  • A CI pipeline reports PostCSS errors; the skill points to dependency mismatch and provides reinstall commands.
  • A developer tries a newer NativeWind release and sees runtime style breakage; the skill recommends reverting to the stable pair.
  • During a sprint cleanup, the team uses the guidance to pin and standardize styling tool versions across apps.

FAQ

Why these exact versions?

[email protected] and [email protected] are a tested, stable combination known to avoid specific PostCSS/process errors encountered with newer releases.

Will newer versions ever be supported?

Yes—support is possible once upstream fixes are confirmed. Until then, use the recommended pair to ensure stability.