DOCSEARCHbyAlgolia
Submit Docs

weapp-tailwindcss

repository·main·Indexed 23 days ago

https://github.com/sonofmagic/weapp-tailwindcss

A specialized adaptation layer that brings the Tailwind CSS JIT engine (including v4 support) to the mini-program ecosystem, including WeChat, Alipay, and multi-platform frameworks like uni-app and Taro.

Tokens
300.3K
Snippets
557
Records
1.6K
Agent score
83%

What's inside weapp-tailwindcss

  1. Overview of domestic (China) coding platforms

    main

    Several domestic platforms provide high-performance coding models with competitive pricing and localized support:

    • GLM (Zhipu AI): GLM-4.6 aligns with Claude Sonnet 4 in coding capability. It is highly cost-effective (approx. 1/7 the price of Claude).
    • MiniMax M2: Designed specifically for Agents and code. It holds a SWE-bench championship (44% success rate) and offers 200k+ context windows at a fraction of Claude's cost.
    • Kimi K2 Thinking (Moonshot AI): Features a trillion-parameter MoE architecture with 256K context and supports up to 300 continuous tool calls.
    • Qwen (Alibaba Cloud): A comprehensive family including Qwen3-Coder for code and Qwen-Long for ultra-long context. Available via the Bailian platform with enterprise-grade compliance and private deployment options.
    • Doubao (ByteDance/Volcengine): The first domestic programming model with visual understanding. It can generate code from UI designs/screenshots and is highly cost-effective for frontend replication.

  3. Overview of @weapp-tailwindcss/runtime

    main

    The @weapp-tailwindcss/runtime package serves as the foundational layer for runtime-based implementations in the weapp-tailwindcss ecosystem. It provides essential primitives required for handling Tailwind CSS utilities within WeChat Mini Programs and similar environments, specifically focusing on:

    • Escape/Unescape: Handling special characters in class names.
    • Runtime Wrapping: Logic for wrapping or processing classes at runtime.
    • Caching: Performance optimizations through caching mechanisms.
    • rpx Length Transformation: Converting Tailwind CSS units (like rem) into WeChat Mini Program's rpx (responsive pixel) units to ensure proper scaling.

  5. Overview of @weapp-tailwindcss/ui

    main

    The @weapp-tailwindcss/ui package provides an atomic UI runtime layer specifically designed for mini programs. It includes the following capabilities:

    • Components: Atomic UI components.
    • Style Assets: Pre-defined style assets.
    • Variants: Support for Tailwind CSS variants.
    • Hooks: React/Vue-style hooks for UI logic.
    • Cross-platform Adapters: Tools to ensure compatibility across different mini-program platforms.

  6. Overview of weapp-tailwindcss

    main

    What is weapp-tailwindcss?

    weapp-tailwindcss is a string escaper designed to bridge the gap between standard tailwindcss and the unique technical specifications of mini-program runtimes (like WeChat Mini Programs).

    Because mini-programs have unique standards, many web-based CSS features and standard atomic CSS generators like tailwindcss cannot be used directly. weapp-tailwindcss solves this by intercepting the class names collected by Tailwind CSS and the resulting CSS, then transforming them into a format that mini-programs can accept.

    Key Features

    • Automatic File Processing: Handles and escapes files such as wxml / wxss (for WeChat), as well as js and wxs artifacts.
    • Broad Framework Support: Works with native mini-program development and major frameworks including taro, uni-app, and mpx.
    • Multiple Integration Methods: Provides support via webpack, vite, and gulp plugins, as well as a direct nodejs api.
    • High Performance: Features efficient parsing and caching mechanisms for fast Hot Module Replacement (HMR).
    • Tailwind Compatibility: Designed to align with Tailwind CSS's core philosophy, ensuring friendly IntelliSense and compatibility with the Tailwind ecosystem.

  7. Overview of weapp-style-injector

    main

    weapp-style-injector is a utility that generates style entry assets for mini-program builds and automatically injects them into matching page or component styles using @import. It is designed to support common build tools like Vite, Webpack, uni-app, Taro, and Mpx.

    It works alongside weapp-tailwindcss by handling the injection logic. While weapp-tailwindcss identifies which files to scan via cssEntries and @source directives, weapp-style-injector uses styleInjector.rules to map those generated subpackage entries to the correct target style assets.

  9. Overview of UserDefinedOptions

    main

    The UserDefinedOptions interface provides a comprehensive overview of all configuration options that can be passed to the weapp-tailwindcss plugin. These options are categorized into several functional groups to help you customize how Tailwind CSS is processed for mini-programs:

    • Important Configurations: Core settings that significantly impact the plugin's behavior.
    • File Matchers: Options for defining which files the plugin should process.
    • Lifecycle: Configuration related to the plugin's execution stages within the build process.
    • General Configurations: Miscellaneous settings for fine-tuning the plugin.

  10. Overview of @weapp-tailwindcss/postcss-calc

    main
    The @weapp-tailwindcss/postcss-calc package is a PostCSS plugin designed to handle calc() expressions within CSS. It attempts to safely evaluate and reduce calc() expressions to their final values. If an expression contains mixed units or is otherwise indeterminate, the plugin safely preserves the original calc() expression to prevent CSS breakage.

  11. Overview of weapp-tailwindcss configuration options

    main

    The detailed configuration for weapp-tailwindcss has been migrated to the dedicated API documentation. For specific configuration details, refer to the UserDefinedOptions interface documentation.

    Key configuration topics include:

    • Arbitrary values: Allowed class name writing styles.
    • Comments: Usage of comments and how to toggle ignoring them.

  12. Overview of @weapp-tailwindcss/postcss

    main

    The @weapp-tailwindcss/postcss package is the core CSS processing engine for weapp-tailwindcss. It is responsible for handling the following tasks required for WeChat Mini Programs and other mini-program platforms:

    • PostCSS AST Transformation: Modifying the Abstract Syntax Tree during the CSS processing phase.
    • Selector Compatibility: Ensuring Tailwind CSS selectors are compatible with mini-program environments.
    • Platform Difference Handling: Managing CSS variations across different mini-program platforms.
    • Tailwind Output Post-processing: Performing necessary adjustments to the CSS output generated by Tailwind CSS.