skills.rest
sonofmagic
sonofmagicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

weapp-tailwindcss-react-native

Configures Tailwind CSS 4 compilation into React Native style manifests via Metro and Babel.

1.9k|102|Updated Jan 17, 2022
Search Tags:#react native#tailwind CSS#expo#Metro#StyleSheet#mobile styling#Dark mode
One-click install
npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-react-native
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: weapp-tailwindcss-react-native
Source: https://github.com/sonofmagic/weapp-tailwindcss/tree/main/skills/weapp-tailwindcss-react-native
Command: npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-react-native

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @weapp-tailwindcss/react-native, tailwindcss, and includes references (resource) components.

What problem does it solve?

Bringing Tailwind CSS to React Native and Expo projects normally requires separate runtime libraries or hand-maintained style mappings. This Skill configures @weapp-tailwindcss/react-native to compile Tailwind CSS 4 candidates directly into a React Native style manifest, so className-based styling works natively on Android and iOS without a browser CSS pipeline.

Core Features & Use Cases

  • Metro Integration: Wraps the Expo Metro config with withWeappTailwindcss() to handle source scanning, manifest generation, and the Babel JSX transform in one step.
  • Static and Dynamic Styling: Static className values compile to StyleSheet lookups, while dynamic complete class strings use the controlled tw() runtime.
  • Platform Variants: Supports dark:, ios:, android:, and native: variants driven by Appearance and Platform.OS, with inline style and !important priority rules preserved.
  • Manifest Validation: Exposes manifest.warnings so unsupported CSS declarations surface as errors instead of silent broken styles, with a CI-friendly generateNativeStylesheet API.
  • Use Case: An Expo SDK 54+ project needs Tailwind-style utility classes across Android and iOS. This Skill walks through installing the package, creating global.css with @source globs, wrapping Metro config, enabling className types, and validating the manifest on real devices.

Quick Start

Use the weapp-tailwindcss-react-native skill to set up Tailwind CSS 4 in my Expo project with Metro config, global.css, and className type support.

Frequently Asked Questions about weapp-tailwindcss-react-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Tailwind CSS to an Expo React Native project?▼

Install @weapp-tailwindcss/react-native and tailwindcss, create a global.css with @import "tailwindcss" and @source globs, then wrap your Metro config with withWeappTailwindcss(). The wrapper handles source scanning, manifest generation, and the Babel JSX transform in one step.

How do I use dynamic className values in React Native with Tailwind?▼

Static className values compile to StyleSheet lookups automatically. For dynamic complete class strings, import tw from @weapp-tailwindcss/react-native/runtime and call tw() with the full class value, such as tw(active ? 'bg-red-500' : 'bg-blue-500').

Does this work with ReactLynx or uni-app projects?▼

No. ReactLynx and Rspeedy projects should use @weapp-tailwindcss/lynx, which keeps className and generates native CSS instead of an RN manifest. uni-app App, Taro RN, and App WebView targets use different weapp-tailwindcss entries.

What versions of Expo and React Native are supported?▼

The package requires Expo SDK 54+, React 19, React Native 0.81+, Tailwind CSS 4, and Node 22.12.0 or higher in the consuming project. Version 0.2.5 of @weapp-tailwindcss/react-native is the documented baseline.

Why are some Tailwind classes not applying styles on Android or iOS?▼

Unsupported CSS declarations do not silently fail; they appear in manifest.warnings. Check the manifest via generateNativeStylesheet and treat any warnings as errors, since only supported layout, spacing, color, typography, and similar utilities are compiled.

How do dark mode and platform-specific variants work in React Native?▼

The dark:, ios:, android:, and native: variants are driven by the injected environment using Appearance and Platform.OS. Inline style overrides Tailwind classes by default, while !important Tailwind rules override inline styles.

Related Skills

Explore More Software Engineering Skills→
aranlucasaranlucas

uniwind

Style React Native components with Tailwind CSS utility classes.

Community
Intermediate
alibabaalibaba
16.0k

test-ci

Runs MNN regression tests and on-device LLM benchmarks on Android and iOS.

Official
Advanced
cheetah-alocheetah-alo

tailwind-4

Enforce Tailwind CSS 4 class safety rules in React components.

Community
Basic
sofia-municipalitysofia-municipality
9

expo-tailwind-setup

Configures Expo projects with Tailwind CSS v4 using metro and postcss configs.

Official
Advanced