Triage

You are triaging a GitHub issue for either nativewind/nativewind or nativewind/react-native-css. Your goal is to understand the issue, reproduce it, verify it against the latest releases and local HEAD, and draft a response.

Project context

Before diving in, read the relevant project docs for architecture and conventions:

• Nativewind v5: Read CLAUDE.md and DEVELOPMENT.md in /Users/dan/Developer/nativewind/nativewind/
• react-native-css: Read CLAUDE.md and DEVELOPMENT.md in /Users/dan/Developer/nativewind/react-native-css/
• Nativewind v4: Read CONTRIBUTING.md and check test structure in /Users/dan/Developer/nativewind/nativewind-v4/

These docs describe the architecture, test conventions, commands, and common pitfalls for each project. Use them to inform your reproduction strategy and root cause analysis.

Step 0: Parse the issue reference

Extract the issue number and repo from $ARGUMENTS. Accept formats like:

• 123 or #123 (defaults to nativewind/react-native-css)
• nativewind/nativewind#123
• nativewind/react-native-css#123
• A full GitHub URL like https://github.com/nativewind/react-native-css/issues/45

Step 1: Read the issue

gh issue view <number> --repo <owner/repo> --json title,body,labels,state,comments,createdAt,author

Read the full output carefully. Pay attention to:

• Title and description: What is the reported problem?
• Comments: Any additional context, workarounds, or clarifications from the reporter or maintainers?
• Labels: Any existing version or area labels?
• Code snippets, config files, or error messages included in the issue

Step 2: Determine repo and version context

If filed on nativewind/react-native-css

react-native-css is a standalone CSS polyfill for React Native. It provides the CSS compiler (lightningcss-based), babel plugin (import rewriting), Metro transformer, and native runtime styling engine. It functions independently of Tailwind CSS but is the engine behind Nativewind v5. There is no v4 equivalent in this repo (v4's runtime was react-native-css-interop, which lives in the nativewind-v4 monorepo).

Read DEVELOPMENT.md in the react-native-css repo for the full architecture diagram and key directories. The issue likely involves one of these layers:

• Compiler (src/compiler/) if CSS parses/compiles incorrectly
• Native runtime (src/native/) if styles resolve incorrectly at runtime
• Babel plugin (src/babel/) if import rewriting fails
• Metro transformer (src/metro/) if bundling/transformation fails

If filed on nativewind/nativewind

Figure out whether this is a v4 or v5 issue. Clues:

• nativewind version in their package.json (v4.x = v4, v5.x = v5)
• Presence of tailwind.config.js = v4 (v5 uses Tailwind CSS v4's @tailwindcss/postcss)
• Presence of react-native-css-interop = v4; react-native-css = v5
• Mention of @import "nativewind/theme" = v5
• If unclear, assume v5 (the active development branch) but note the ambiguity

Step 3: Assess reproducibility

Before creating a reproduction, check if there is enough information:

• Is the problem clearly described?
• Are there code snippets showing the failing className, component, CSS, or config?
• Is there an error message or screenshot?

If the issue lacks critical details needed for reproduction, skip to Step 6 and draft a comment requesting more information. Tailor the ask to the repo:

For nativewind issues:

Thanks for reporting this. To investigate, we need a minimal reproduction. Could you provide:

• Your package.json dependencies (nativewind, react-native-css/react-native-css-interop, tailwindcss versions)
• The specific className(s) or config causing the issue
• A reproduction using npx rn-new@latest --nativewind (v4) or npx rn-new@next --nativewind (v5)

For react-native-css issues:

Thanks for reporting this. To investigate, we need a minimal reproduction. Could you provide:

• Your react-native-css version
• The CSS and component code that triggers the issue
• Expected vs. actual behavior

Step 4: Create a reproduction

Create a minimal reproduction. The approach depends on the repo and what's being tested.

react-native-css issues

Tests are organized by domain in src/__tests__/ with three subdirectories: native/, compiler/, babel/. Before writing a test, read a few existing tests in the relevant subdirectory to match the conventions exactly.

For native styling issues (most common, e.g., wrong style output, className not working):

// Create: src/__tests__/native/triage-<issue-number>.test.tsx
import { render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS, testID } from "react-native-css/jest";

describe("Issue #<number>", () => {
  test("description of the problem", () => {
    registerCSS(`.my-class { /* the CSS from the issue */ }`);

    render(<View testID={testID} className="my-class" />);
    const component = screen.getByTestId(testID);

    // Log what we actually get
    console.log(JSON.stringify(component.props, null, 2));

    // Assert expected behavior
    expect(component.props).toStrictEqual({
      children: undefined,
      style: { /* expected styles */ },
      testID,
    });
  });
});

Run with: cd /Users/dan/Developer/nativewind/react-native-css && yarn test src/__tests__/native/triage-<issue-number>.test.tsx

For compiler issues (CSS parses wrong, wrong JSON output):

Read existing tests in src/__tests__/compiler/ (e.g., compiler.test.tsx, declarations.test.tsx) to match the pattern. Compiler tests verify the JSON output structure from compile().

Run with: cd /Users/dan/Developer/nativewind/react-native-css && yarn test compiler

For babel issues (import rewriting broken):

Read existing tests in src/__tests__/babel/ which use babel-plugin-tester.

Run with: cd /Users/dan/Developer/nativewind/react-native-css && yarn test babel

For runtime issues that need a full app:

cd /Users/dan/Developer/nativewind/react-native-css/example
yarn example start:build  # Rebuilds library + starts Metro