weapp-tailwindcss

https://tw.icebreaker.top/
Admin
weapp-tailwindcss is a comprehensive solution for integrating Tailwind CSS into Mini Programs,...
Tokens:332,494
Snippets:3,586
Trust Score:6.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### React Quick Start Commands

Source: https://tw.icebreaker.top/docs/ai/basics/llms-txt

Commands for installing dependencies and starting the development server for React projects.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Mini Program Quick Start Commands

Source: https://tw.icebreaker.top/docs/ai/basics/llms-txt

Commands for installing dependencies and running development or build tasks for Mini Programs.

```bash
# 安装依赖
pnpm install

# 开发模式 (微信小程序)
pnpm dev:wechat

# 构建
pnpm build
```

--------------------------------

### Install the package

Source: https://tw.icebreaker.top/docs/community/packages-runtime/cva

Use the package manager to install the library.

```bash
npm install @weapp-tailwindcss/cva
```

--------------------------------

### Install the package

Source: https://tw.icebreaker.top/docs/community/packages-runtime/variants

Use npm or yarn to install the package.

```bash
npm install @weapp-tailwindcss/variants
```

--------------------------------

### Install Dependencies

Source: https://tw.icebreaker.top/blog/2025/8/v4.2-release

Install Tailwind CSS and the weapp-tailwindcss plugin.

```bash
npm i -D tailwindcss weapp-tailwindcss
```

--------------------------------

### Install @weapp-tailwindcss/merge

Source: https://tw.icebreaker.top/docs/community/merge

Installation commands for various package managers.

```bash
npm install @weapp-tailwindcss/merge
```

```bash
yarn add @weapp-tailwindcss/merge
```

```bash
pnpm add @weapp-tailwindcss/merge
```

```bash
bun add @weapp-tailwindcss/merge
```

--------------------------------

### Install Individual Skill

Source: https://tw.icebreaker.top/llms-quickstart.txt

Installs only the primary compatibility entry skill.

```bash
npx skills add sonofmagic/skills --skill weapp-tailwindcss
```

--------------------------------

### Install typography package

Source: https://tw.icebreaker.top/docs/community/typography

Install the package via npm.

```sh
npm i -D @weapp-tailwindcss/typography
```

--------------------------------

### Run Development Server

Source: https://tw.icebreaker.top/blog/2025/3/v4-release

Start the development server for WeChat Mini Program.

```bash
npm run dev:mp-weixin
```

--------------------------------

### Few-Shot Prompting Example

Source: https://tw.icebreaker.top/docs/ai/basics/prompt-engineering

A prompt demonstrating Few-Shot learning by providing examples of natural language to SQL conversion.

```text
请将以下自然语言转换为 SQL 查询语句。

示例1：
输入：查找所有姓张的用户
输出：SELECT * FROM users WHERE name LIKE '张%'

示例2：
输入：查找年龄大于25的用户
输出：SELECT * FROM users WHERE age > 25

示例3：
输入：查找今年注册的用户
输出：SELECT * FROM users WHERE YEAR(created_at) = YEAR(CURDATE())

现在请转换：
输入：查找所有状态为"活跃"且注册时间在2024年之后的用户
输出：
```

--------------------------------

### Install Prettier and Tailwind Plugin

Source: https://tw.icebreaker.top/docs/issues/native-toutiao

Install the necessary dependencies for Prettier formatting in the project.

```sh
npm i -D prettier prettier-plugin-tailwindcss
```

--------------------------------

### Mini-program Project llms.txt Example

Source: https://tw.icebreaker.top/llms-quickstart.txt

A comprehensive example of an llms.txt file for a mini-program project.

```markdown
# 小程序商城

## 项目概述
微信小程序商城，支持商品浏览、购物车、微信支付

## 技术栈
- 原生小程序框架
- weapp-tailwindcss (TailwindCSS)
- gulp 构建工具

## 项目结构
```
pages/
├── home/          # 首页
├── category/      # 分类
├── product/       # 商品详情
├── cart/          # 购物车
└── order/         # 订单
components/
├── product-card/  # 商品卡片
├── address-picker/# 地址选择
utils/
├── request.js     # API 封装
└── auth.js        # 登录认证
```

## 快速开始
```bash
pnpm install
pnpm dev:wechat
```
```

--------------------------------

### Install Dependencies for uni-app

Source: https://tw.icebreaker.top/blog/2025/3/v4-release

Install the required packages for integrating Tailwind CSS 4 with uni-app.

```bash
npm install -D tailwindcss @tailwindcss/vite weapp-tailwindcss
```

--------------------------------

### Prompt Iteration Process Example

Source: https://tw.icebreaker.top/docs/ai/basics/prompt-engineering

An example showing the iterative process of refining a prompt.

```text
第一版（基础版）
"写一个登录功能"
      ↓
      ❌ 结果不符合预期
      ↓
第二版（添加细节）
"用 React 写一个登录表单，包含邮箱和密码"
      ↓
      ⚠️ 接近了，但还不完美
      ↓
第三版（精细化）
"请创建一个 React + TypeScript 登录表单，使用 shadcn/ui..."
      ↓
      ✅ 满意
```

--------------------------------

### Initialize Project

Source: https://tw.icebreaker.top/blog/2025/8/v4.2-release

Initialize a package.json file in the root directory of your uni-app x project.

```bash
npm init -y
```

--------------------------------

### Chain of Thought Prompting Example

Source: https://tw.icebreaker.top/docs/ai/basics/prompt-engineering

A prompt guiding the AI to use a step-by-step reasoning process to solve a mathematical sequence problem.

```text
请使用逐步推理的方式解决以下问题：

问题：如果一个数列的前三项是 2, 6, 18，求第四项。

推理过程：
1. 观察相邻两项的关系
2. 计算比例关系
3. 验证规律
4. 应用规律求解

请按照以上步骤逐步推理并给出答案。
```

--------------------------------

### Install weapp-tailwindcss

Source: https://tw.icebreaker.top/docs/issues/native-toutiao

Install the weapp-tailwindcss package for Gulp integration.

```sh
npm install -D weapp-tailwindcss
```

--------------------------------

### Configure Sass Preprocessor

Source: https://tw.icebreaker.top/docs/tailwindcss/history

Demonstrates build scripts for Sass and PostCSS, along with a sample SCSS file using tokens.

```json
{
  "scripts": {  

    "build:css": "sass src/styles/index.scss dist/index.css --no-source-map && postcss dist/index.css -o dist/index.css",  

    "watch:css": "sass --watch src/styles/index.scss:dist/index.css"  

  }  

}
```

```scss
@use './tokens' as *;  

.card { border: 1px solid lighten($color-primary, 65%); border-radius: $radius-lg; }
```

--------------------------------

### create(options?)

Source: https://tw.icebreaker.top/docs/community/merge/runtime-api

基于 CreateOptions 返回一组隔离的运行时实例，常用于多端项目控制转义行为。

```APIDOC
## create(options?)

### Description
基于 CreateOptions 返回一组隔离的运行时实例，常用于多端项目控制转义行为。

### Parameters
- **options** (CreateOptions) - Optional - 配置对象，包含 escape 和 unescape 选项。

### CreateOptions
- **escape** (false | EscapeConfig) - Optional - 控制输出时是否转义；可自定义映射表。
- **unescape** (false | UnescapeConfig) - Optional - 控制合并前是否还原占位符。

### Example
```ts
const { twMerge } = create({ escape: false, unescape: false })
```
```

--------------------------------

### onStart

Source: https://tw.icebreaker.top/docs/api/options/lifecycle

开始处理前触发的回调函数。

```APIDOC
## onStart

### Description
开始处理前触发。

### Signature
`onStart: () => void`

### Returns
- **void**
```

--------------------------------

### create(options)

Source: https://tw.icebreaker.top/llms-full.txt

Creates a custom instance of the library utilities with specific platform configurations.

```APIDOC
## create(options)

### Description
Initializes a custom instance of `tv` and `cn` with specific escape/unescape settings, useful for cross-platform development (e.g., H5 vs Mini Program).

### Parameters
- **options** (object) - Required - Configuration object containing `escape` (boolean) and `unescape` (boolean).

### Usage Example
```ts
import { create } from '@weapp-tailwindcss/variants'
const { tv, cn } = create({ escape: true, unescape: true })
```
```

--------------------------------

### Configure package.json for Postinstall

Source: https://tw.icebreaker.top/blog/2025/3/v4-release

Add the postinstall script to ensure Tailwind CSS 4 correctly recognizes the rpx unit.

```json
{
  "scripts": {
    // highlight-next-line
    "postinstall": "weapp-tw patch"
  }
}
```

--------------------------------

### Run development environments for Tailwind and Headless

Source: https://tw.icebreaker.top/docs/tailwindcss/demos

Use these commands to start the development servers for the built-in React or Vue applications.

```bash
pnpm --filter react-app dev
```

```bash
pnpm --filter vue-app dev
```

--------------------------------

### Redundant Spacing Declaration Example

Source: https://tw.icebreaker.top/llms-full.txt

Example of redundant declarations when cssCalc is enabled without cleanup.

```css
.mx-1 {
  margin-left: 8rpx;
  margin-right: 8rpx;
  margin-left: var(--spacing);
  margin-right: var(--spacing);
}
```

--------------------------------

### Tailwind CSS 4 Variable Example

Source: https://tw.icebreaker.top/llms-full.txt

Example of Tailwind CSS 4 generated CSS variables.

```css
page,
:root {
  --spacing: 8rpx;
}
.h-2 {
  height: calc(var(--spacing) * 2);
}
```

--------------------------------

### create(options)

Source: https://tw.icebreaker.top/docs/community/packages-runtime/variants

Factory function to create custom instances of tv and cn with specific configuration for escaping, unescaping, and twMerge settings.

```APIDOC
## create(options)

### Description
Creates a custom instance of the variants utilities, allowing configuration of escape/unescape behavior and custom twMerge settings.

### Parameters
- **options** (Object) - Required - Configuration object: { escape: boolean, unescape: boolean, twMergeConfig: Object }.

### Usage Example
```ts
import { create } from '@weapp-tailwindcss/variants';
const { tv, cn } = create({ escape: true, unescape: true });
```
```

--------------------------------

### Install Claude Code CLI

Source: https://tw.icebreaker.top/docs/ai/ai-coding-deployment-guide

Command to install the Claude Code CLI tool globally via npm.

```bash
npm i -g @anthropic-ai/claude-code
```

--------------------------------

### Create uni-app Project via CLI

Source: https://tw.icebreaker.top/docs/quick-start/frameworks/uni-app-vite

Commands to initialize a new uni-app project using the CLI for either JavaScript or TypeScript.

```bash
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
```

```bash
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
```

--------------------------------

### Tailwind CSS 4 Spacing Variable Example

Source: https://tw.icebreaker.top/llms-full.txt

Example of Tailwind CSS 4 margin spacing variables.

```css
.mx-1 {
  margin-left: var(--spacing);
  margin-right: var(--spacing);
}
```

--------------------------------

### 项目依赖安装与运行命令

Source: https://tw.icebreaker.top/llms-full.txt

用于初始化项目依赖及启动 React 或 Vue 开发环境的常用命令。

```bash
pnpm install
```

```bash
pnpm --filter react-app dev
```

```bash
pnpm --filter vue-app dev
```

```bash
pnpm --filter website build
```

```bash
pnpm build:docs
```

--------------------------------

### Example of preflight reset styles

Source: https://tw.icebreaker.top/docs/tailwindcss/v4-reference

An example of the global reset styles injected by WeappTailwindcss to ensure consistent element behavior.

```css
view,text,::before,::after,::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
```

--------------------------------

### Run development build

Source: https://tw.icebreaker.top/docs/quick-start/v4/taro-webpack

Execute the development command to build the project for WeChat Mini Program.

```bash
npm run dev:weapp
```

--------------------------------

### 使用 Docker 容器执行代码

Source: https://tw.icebreaker.top/docs/ai/basics/ai-sandbox

利用 Docker 容器运行脚本，并可通过参数限制内存、CPU 和网络访问。

```bash
# 运行容器执行代码
docker run --rm -v $(pwd):/workspace python:3.12 \
  python /workspace/script.py

# 限制资源
docker run --rm \
  --memory="512m" \
  --cpus="1.0" \
  --network=none \
  python:3.12 python script.py
```

--------------------------------

### Custom Attribute Configuration Example

Source: https://tw.icebreaker.top/docs/principle

Example of a component using custom attributes that require configuration via customAttributesEntities to be correctly processed.

```html
<my-com class="bg-[#123456]" hover-class="bg-[#654321]" custom-class="text-[#ff00ff]" happy-attr="text-[green]" sad-attr="text-[blue]"></my-com>
```

--------------------------------

### Claude Code Plugin Installation Commands

Source: https://tw.icebreaker.top/docs/ai/qoder-vs-glm47-cursor-claude-comparison

Commands to install various specialized plugins for the Claude Code CLI using the npx package manager.

```bash
npx claude-plugins install @anthropics/claude-code-plugins/pr-review-toolkit
```

```bash
npx claude-plugins install @wshobson/claude-code-workflows/python-development
```

```bash
npx claude-plugins install @wshobson/claude-code-workflows/javascript-typescript
```

```bash
npx claude-plugins install @wshobson/claude-code-workflows/backend-development
```

```bash
npx claude-plugins install @dotclaude/dotclaude-plugins/frontend-excellence
```

```bash
npx claude-plugins install @anthropics/anthropic-agent-skills/document-skills
```

```bash
npx claude-plugins install @wshobson/claude-code-workflows/code-refactoring
```

```bash
npx claude-plugins install @ruvnet/claude-flow-marketplace/claude-flow
```

```bash
npx claude-plugins install @wshobson/claude-code-workflows/developer-essentials
```

--------------------------------

### Serve custom style demos

Source: https://tw.icebreaker.top/docs/tailwindcss/demos

Use this command to serve custom style files placed in the temporary directory for testing and coverage analysis.

```bash
npx serve tmp/style-demos
```

--------------------------------

### Example of Incorrect CSS Generation

Source: https://tw.icebreaker.top/docs/quick-start/frameworks/uni-app-vite

An example of CSS output that may occur if the scanning scope is too broad, causing non-existent class names to be generated.

```css
._ba-zA-Z_c__B {
  a-z-a--z:;
}
```

--------------------------------

### 配置 package.json 的 postinstall 脚本

Source: https://tw.icebreaker.top/docs/migrations/v1

在 package.json 中添加 postinstall 脚本以确保插件正确运行。

```json
 "scripts": {
+  "postinstall": "weapp-tw patch"
 }
```

--------------------------------

### React: Anti-pattern Example

Source: https://tw.icebreaker.top/docs/tailwindcss/ai-friendly-and-demos

An example of poor Tailwind CSS practices often generated by AI, including hardcoded hex values and unstable string concatenation.

```tsx
export function Banner({ type, active }: { type: string; active: boolean }) {
  return (
    <div
      className={`rounded-[17px] bg-[#4f46e5] px-[17px] py-[11px] text-[15px] text-white ${
        active ? 'group hover:bg-[#4338ca]' : ''
      } ${type === 'warn' ? 'bg-[#f59e0b]' : ''} ${type === 'danger' ? 'bg-[#ef4444]' : ''}`}
    >
      <span className="group-hover:peer-hover:text-white">状态提示</span>
    </div>
  )
}
```
Tokens:
Raw