ReactLynx / Rspeedy Configuration Reference

This page documents @weapp-tailwindcss/lynx. For a complete setup example, see the ReactLynx / Rspeedy guide.

Support baseline

• @weapp-tailwindcss/lynx 0.3.2
• @lynx-js/rspeedy >=0.16.0
• Tailwind CSS 4.x
• Node.js >=22.12.0
• ReactLynx + Rspeedy native builds only; not Rspeedy Web, non-React Lynx, or React Native.

Install

npm

npm install -D @weapp-tailwindcss/lynx tailwindcss

Yarn

yarn add --dev @weapp-tailwindcss/lynx tailwindcss

pnpm

pnpm add -D @weapp-tailwindcss/lynx tailwindcss

Bun

bun add --dev @weapp-tailwindcss/lynx tailwindcss

The project must also have its existing @lynx-js/rspeedy, @lynx-js/react-rsbuild-plugin, and ReactLynx dependencies.

Minimal configuration

lynx.config.ts

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
import { pluginLynxTailwindcss } from '@weapp-tailwindcss/lynx'

export default defineConfig({
  plugins: [pluginReactLynx(), pluginLynxTailwindcss()],
})

src/global.css

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(none);

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

The plugin fixes platform: 'lynx', generator.target: 'web', and Lynx-compatible CSS output. ReactLynx className remains unchanged; no mini-program safe class, runtime stylesheet, or JSX transform is added.

pluginLynxTailwindcss() options

Option	Type	Default	Description
Core options	`Omit<UserDefinedOptions, 'platform'	'generator'>`	{}
generator	`LynxGeneratorOptions	false`	Inferred
rspack	PatchRspackConfigOptions	CSS patch enabled	Controls Rspeedy/Rspack CSS loader patching.
rspack.cssImportRewriteLoader	`boolean	object`	true
rspack.removeLightningCssLoader	boolean	false	Removes the built-in Lightning CSS loader when explicitly enabled.

The following values are owned by the plugin and cannot switch the build to mini-program or React Native output:

{
  platform: 'lynx',
  rewriteCssImports: true,
  generator: {
    target: 'web',
    webCompat: true,
    styleOptions: {
      cssOptions: { platform: 'lynx' },
    },
  },
}

CSS and candidates

Import only theme and utilities to avoid browser preflight warnings such as :root, :host, and :where(...). Arbitrary values must be complete static candidates:

<view className="w-[123px] h-[45rpx] rounded-[18px] bg-[#123456]" />

For dynamic cases, enumerate complete classes or register them in CSS:

@source inline("w-[120px] w-[240px] bg-[#123456]");

Do not construct w-[${width}px]; Tailwind cannot discover the final token during the build.

Encoder boundaries

• Unsupported properties such as padding-inline and mask-type may be removed; use physical-direction utilities such as pl-* and pr-*.
• Selectors containing complex :is() or :where() may be removed.
• Pseudo-elements, hover, dark, data, supports, media queries, and complex gradients require validation on the Lynx target runtime.
• “Generated by Tailwind” only proves that the generator emitted a rule; it does not prove encoder retention or device support.

Validation

pnpm --filter @weapp-tailwindcss/lynx test
pnpm --filter @weapp-tailwindcss/example-react-lynx build
pnpm e2e:lynx
pnpm e2e:lynx:android
pnpm e2e:lynx:ios

Static bundles, encoder logs, and Android/iOS reports prove generation, retention, and runtime support separately.