Skip to main content

React Native / Expo

@weapp-tailwindcss/react-native is a standalone React Native compiler package. It reuses weapp-tailwindcss's Tailwind CSS v4 source scan and candidate collection, and compiles the generated raw CSS into an in-memory RN style manifest; the runtime does not depend on NativeWind or react-native-css.

Install​

pnpm add @weapp-tailwindcss/react-native
pnpm add -D tailwindcss

The first version is for Expo SDK 54+, React 19, React Native 0.81+. The project still uses pnpm and the Node version required by the repository.

CSS entry​

global.css
@import "tailwindcss";

@source "./src/**/*.{js,jsx,ts,tsx}";

Metro and Babel​

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}'],
})
babel.config.js
module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
  }
}

Expo only configures Metro once; it will automatically connect source scanning, manifest generation and Babel JSX transform, without having to write a second copy of classNameSet by hand. Static className="flex items-center" will be compiled into a pre-generated StyleSheet lookup and will not call the generic tw() in render; dynamic className={condition ? "bg-red-500" : "bg-blue-500"} will remain as a controlled tw(...) call. Normal inline style covers Tailwind class, !important class covers inline style. Non-Expo or custom Metro scenes can still use @weapp-tailwindcss/react-native/babel explicitly.

Runtime and boundaries​

The Metro virtual module will inject the manifest, Platform.OS and Appearance color modes into the runtime, so the dark:, ios:, android:, native: variants can select rules according to the current environment. The compiler covers common layout, flex, spacing, sizing, colors, typography, border, radius, opacity, transform, shadow and arbitrary values; browser preflight ignores them by default. Unsupported CSS features will generate Chinese warnings, which can be checked in manifest.warnings.

Type enhancement is introduced from @weapp-tailwindcss/react-native/env; ordinary custom components can reuse the same writing method as long as they receive className and style, without the need for third-party component prop mapping.

import { tw } from '@weapp-tailwindcss/react-native/runtime'

const style = tw(condition ? 'bg-red-500' : 'bg-blue-500')

Tailwind is still generated by the weapp-tailwindcss generator, do not register @tailwindcss/vite or @tailwindcss/postcss at the same time. Expo Web is only recommended as a smoke test, and the Android/iOS simulator or real device is the acceptance target for the first version.

verify​

pnpm --filter @weapp-tailwindcss/react-native test
pnpm --filter @weapp-tailwindcss/react-native build
pnpm --filter @weapp-tailwindcss/example-react-native-expo build
pnpm --filter @weapp-tailwindcss/example-react-native-expo test