Nativewind And Tailwind Css Compatibility

Name: Nativewind And Tailwind Css Compatibility
Author: oimiragieo

oimiragieo/agent-studio

40 installs
36 repo stars
Updated July 14, 2026
oimiragieo/agent-studio

Helps with frontend development tasks.

About

nativewind-and-tailwind-css-compatibility is a Claude Code skill in the Frontend Development category.

nativewind-and-tailwind-css-compatibility
Frontend Development
AI-coding skill

Nativewind And Tailwind Css Compatibility by the numbers

40 all-time installs (skills.sh)
Ranked #1,377 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oimiragieo/agent-studio --skill nativewind-and-tailwind-css-compatibility

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oimiragieo/agent-studio/nativewind-and-tailwind-css-compatibility.svg)](https://skillselion.com/skills/oimiragieo/agent-studio/nativewind-and-tailwind-css-compatibility)

Installs	40
repo stars	★ 36
Last updated	July 14, 2026
Repository	oimiragieo/agent-studio ↗

What it does

Helps with frontend development tasks.

Files

SKILL.mdMarkdownGitHub ↗

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

1. 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. 2. 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. 3. ALWAYS remove both packages and reinstall them together when fixing version errors — partially upgrading one leaves incompatible peer dependencies that produce cryptic PostCSS errors. 4. 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. 5. 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 strict';
/**
 * Post-execute hook for nativewind-and-tailwind-css-compatibility
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Records metrics after skill execution.
 */

function postExecute(_context) {
  // Record execution metrics
  return { ok: true, skill: 'nativewind-and-tailwind-css-compatibility' };
}

module.exports = { postExecute };

'use strict';
/**
 * Pre-execute hook for nativewind-and-tailwind-css-compatibility
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Validates inputs before skill execution.
 */

function preExecute(context) {
  // Validate skill invocation context
  if (!context || typeof context !== 'object') {
    return {
      allow: true,
      message: 'nativewind-and-tailwind-css-compatibility: no context to validate',
    };
  }
  return { allow: true };
}

module.exports = { preExecute };

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "nativewind-and-tailwind-css-compatibilityInput",
  "description": "Input schema for Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "target": {
      "type": "string",
      "description": "Target file or path for the skill to operate on"
    },
    "options": {
      "type": "object",
      "description": "Additional options for skill execution",
      "additionalProperties": true
    }
  }
}

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "nativewind-and-tailwind-css-compatibilityOutput",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "ok": {
      "type": "boolean"
    },
    "summary": {
      "type": "string"
    }
  }
}

#!/usr/bin/env node
'use strict';
/**
 * nativewind-and-tailwind-css-compatibility - Enterprise Skill Script
 * Auto-generated by enterprise-bundle-scaffolder
 */

const fs = require('fs');
const path = require('path');

// Parse arguments
const args = process.argv.slice(2);
const options = {};
for (let i = 0; i < args.length; i++) {
  if (args[i].startsWith('--')) {
    const key = args[i].slice(2);
    const value = args[i + 1] && !args[i + 1].startsWith('--') ? args[++i] : true;
    options[key] = value;
  }
}

if (options.help) {
  console.log(`
nativewind-and-tailwind-css-compatibility - Enterprise Skill

Usage:
  node main.cjs --check <file>    Check a file against guidelines
  node main.cjs --list            List all guidelines
  node main.cjs --help            Show this help

Description:
  Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.
`);
  process.exit(0);
}

if (options.list) {
  console.log('Guidelines for nativewind-and-tailwind-css-compatibility:');
  console.log('See SKILL.md for full guidelines');
  process.exit(0);
}

console.log(
  'nativewind-and-tailwind-css-compatibility skill loaded. Use with Claude for code review.'
);