@weapp-tailwindcss/react-native

English | 简体中文

A Tailwind CSS v4 compiler for React Native and Expo. It reuses source scanning and candidate generation from weapp-tailwindcss, then compiles CSS into a serializable React Native style manifest without adding NativeWind or a react-native-css runtime.

Installation

pnpm add @weapp-tailwindcss/react-native tailwindcss

Expo and Metro

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config')
const { withWeappTailwindcss } = require('@weapp-tailwindcss/react-native/metro')

const config = getDefaultConfig(__dirname)

module.exports = withWeappTailwindcss(config, {
  input: './global.css',
  sourceGlobs: ['./src/**/*.{js,jsx,ts,tsx}'],
})

Metro scans sources, builds the exact candidate set and manifest, and connects the Babel JSX transform to the existing Expo transformer. You do not need to maintain a second classNameSet.

Runtime model

• Static className values compile to pre-generated StyleSheet lookups without calling tw() during render.
• Dynamic class values are resolved through tw(value) at runtime.
• Regular inline style overrides Tailwind classes, while !important classes override inline styles.
• Unsupported CSS declarations are recorded in manifest warnings instead of producing incorrect native styles silently.

Public entry points

The package exposes compiler, tailwind, babel, metro, runtime, and the platform-neutral env type entry. Custom Metro setups can compose these entry points directly.

Scope

This package generates React Native style manifests. It does not emit Web CSS or mini-program WXSS and does not add NativeWind or a browser CSS runtime to the application.

Documentation

See the React Native and Expo guide for the complete setup.