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

weapp-tailwindcss-lynx

Configures Tailwind CSS 4 for ReactLynx and Rspeedy native styling builds.

1.9k|102|Updated Jan 17, 2022
Search Tags:#tailwindcss#build tooling#lynx#css configuration#Cross-Platform#reactlynx#rspeedy
One-click install
npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-lynx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: weapp-tailwindcss-lynx
Source: https://github.com/sonofmagic/weapp-tailwindcss/tree/main/skills/weapp-tailwindcss-lynx
Command: npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-lynx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @weapp-tailwindcss/lynx, tailwindcss, @lynx-js/rspeedy, and includes references (resource) components.

What problem does it solve?

Setting up Tailwind CSS 4 for ReactLynx apps built with Rspeedy is tricky: browser-oriented preflight rules, dynamic class names, and unsupported CSS properties silently break or get dropped by the Lynx encoder. This Skill guides you through a correct, verified configuration so utilities actually reach the native Lynx runtime.

Core Features & Use Cases

  • Rspeedy Plugin Setup: Configure pluginLynxTailwindcss() in lynx.config.ts with a theme + utilities CSS entry that avoids browser preflight.
  • Static ClassName Guidance: Enforce complete static className strings or @source inline(...) candidates instead of dynamic string interpolation that Tailwind cannot enumerate.
  • Compatibility Triage: Distinguish three levels—Tailwind generated, Lynx encoder accepted, and runtime verified—using the compatibility matrix for logical properties, pseudo-classes, gradients, and arbitrary values.
  • Use Case: You are building a ReactLynx app and your padding-inline utilities disappear from the bundle. This Skill explains the encoder limitation and directs you to physical-direction properties plus real-device verification steps.

Quick Start

Use the weapp-tailwindcss-lynx skill to configure Tailwind CSS 4 in my ReactLynx Rspeedy project and verify the generated bundle on device.

Frequently Asked Questions about weapp-tailwindcss-lynx

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

FAQPage Schema
How do I set up Tailwind CSS 4 in a ReactLynx Rspeedy project?▼

Install @weapp-tailwindcss/lynx and tailwindcss, then add pluginLynxTailwindcss() to the plugins array in lynx.config.ts. Create a CSS entry importing only tailwindcss/theme.css and tailwindcss/utilities.css to avoid browser preflight rules.

Why do my Tailwind classes disappear in the Lynx bundle?▼

Classes vanish when built from dynamic string interpolation that Tailwind cannot enumerate at build time, or when the Lynx encoder drops unsupported properties. Use complete static className strings or register candidates with @source inline(...).

Does Tailwind CSS support arbitrary values in ReactLynx?▼

Arbitrary values like w-[123px] or bg-[#123456] work when written as complete static strings, and px, rpx, calc(), colors, and gradients are verified to enter the bundle. Logical properties like padding-inline and some arbitrary properties may be removed by the encoder.

Can I use the same setup for React Native or uni-app?▼

No, this configuration only covers ReactLynx with Rspeedy native output. React Native uses @weapp-tailwindcss/react-native with Metro and Babel, while uni-app and mini-programs use different builder entries.

How do I verify Tailwind styles actually work on Lynx devices?▼

Run the package unit tests and build the example ReactLynx app to confirm CSS enters the bundle, then run e2e:lynx on Android or e2e:lynx:ios for screenshot and pixel assertions. Pseudo-classes, media queries, and complex visuals require real runtime validation.

Related Skills

Explore More Software Engineering Skills→
FabienDehopreFabienDehopre

angular-new-app

Create new Angular applications with automated scaffolding and configuration.

Community
Intermediate
jitraponjitrapon
11

android-device-debug

Build, install, launch, and inspect Android apps on devices or emulators.

Community
Advanced
spencerpaulyspencerpauly
672

converting-css-to-tailwind

Convert plain CSS stylesheets into Tailwind utility classes in markup.

Community
Intermediate
cristianbc2004cristianbc2004

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo apps with NativeWind v5 and react-native-css.

Community
Intermediate