Menú
Use Tailwind CSS to style React Native components across web and native
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration. Handles package removal, config migration, Tailwind 4 upgrade, cssInterop removal, theme conversion, and all breaking changes.
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
End-to-end testing patterns with Playwright for full-stack Python/React applications. Use when writing E2E tests for complete user workflows (login, CRUD, navigation), critical path regression tests, or cross-browser validation. Covers test structure, page object model, selector strategy (data-testid > role > label), wait strategies, auth state reuse, test data management, and CI integration. Does NOT cover unit tests or component tests (use pytest-patterns or react-testing-patterns).
Keep JavaScript/TypeScript dependencies fresh with safety rails and monorepo support.
Architecture health-check and upgrade orchestrator. Use to detect a repo’s current shape (lib/cli/monorepo/webext/vscode/...) and migrate it onto the canonical tsdown-based starter architectures.
| name | nativewind |
| description | Use Tailwind CSS to style React Native components across web and native |
| metadata | {"author":"Hairy","version":"2026-02-26","source":"Generated from https://github.com/nativewind/website, scripts located at https://github.com/hairyf/skills"} |
Skill is based on NativeWind v5 (Tailwind CSS v4), generated at 2026-02-26.
NativeWind compiles Tailwind CSS for React Native: className on components, StyleSheet.create on native and reuse of the Tailwind stylesheet on web. It supports media/container queries, pseudo-classes (hover, focus, active), platform variants (ios:, android:, native:, web:), dark mode, and custom theme/utilities via CSS-first config.
| Topic | Description | Reference |
|---|---|---|
| Setup | CSS file, Metro withNativewind, PostCSS, app entry, optional lightningcss pin | core-setup |
| Configuration | CSS-first config, @theme, @source, nativewind/theme, custom utilities/variants | core-config |
| v5 Tailwind foundation | Built on Tailwind v4, CSS-first, web vs native support | core-v5-tailwind-foundation |
| v5 Units | px, %, vw/vh, rem, em on native; dp vs px; rem sizing | core-v5-units |
| v5 Functions & directives | @import, @theme, @utility; var(), calc(), env(), color-mix(); RN functions | core-v5-functions-directives |
| v5 Style specificity | Order of precedence, !important, merging className and style | core-v5-style-specificity |
| Topic | Description | Reference |
|---|---|---|
| Styling components | className usage, custom vs third-party, styled() / cssInterop / remapProps, nativeStyleToProp | features-styling |
| Platform & responsive | Platform variants, units, breakpoints, safe-area utilities | features-platform |
| v5 Responsive | Breakpoints on native, media queries, platform media, reactive updates | features-v5-responsive |
| States & dark mode | hover/focus/active, disabled/empty, group modifiers, dark:, data attributes | features-states |
| v5 States & pseudo-classes | Detailed pseudo-class table, selection/placeholder, group, ltr/rtl | features-v5-states-pseudo |
| v5 Third-party guide | When className isn't passed, multiple style props, dynamic mapping @prop | features-v5-third-party-guide |
| Theming & colors | @theme tokens, vars() for runtime CSS variables, color behavior | advanced-theme |
| Topic | Description | Reference |
|---|---|---|
| withNativewind | Metro wrapper options (globalClassNamePolyfill, typescriptEnvPath) | api-with-nativewind |
| styled | Third-party components, nativeStyleToProp, multiple className props | api-styled |
| vars & runtime variables | vars(), VariableContextProvider, useUnstableNativeVariable | api-vars-runtime |
| cssInterop / remapProps | Legacy API (deprecated; use styled) — migration reference | api-css-interop-remap |
| Topic | Description | Reference |
|---|---|---|
| Migrate v4 → v5 | Steps, breaking changes, deprecations | advanced-migrate-v4 |
| Topic | Description | Reference |
|---|---|---|
| Correctness & debugging | Explicit light/dark, colors on Text not View, cache, DEBUG, verifyInstallation | best-practices-performance |
| v5 Deprecations | useColorScheme → RN, cssInterop/remapProps → styled, @prop modifier | best-practices-v5-deprecations |
