Back to Details

busirocket-tailwindcss-v4

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS v4 Best Practices

Tailwind CSS v4 最佳实践

Setup and styling patterns for Tailwind CSS v4 projects.
Tailwind CSS v4 项目的配置与样式模式。

When to Use

适用场景

Use this skill when:
  • Setting up Tailwind CSS v4 in a project
  • Writing component styles with Tailwind utilities
  • Deciding when to extract custom CSS vs using utilities
  • Avoiding style drift and maintaining consistency
在以下场景中使用本技能：
  • 在项目中配置Tailwind CSS v4
  • 使用Tailwind工具类编写组件样式
  • 决定何时提取自定义CSS而非使用工具类
  • 避免样式偏移并保持一致性

Non-Negotiables (MUST)

必须遵循的规则

  • Import Tailwind via a single global CSS entry: 
    @import 'tailwindcss';
  • Keep that global CSS imported from the root layout.
  • Prefer Tailwind utilities in 
    className
    for most styling.
  • Avoid large custom CSS files; keep custom CSS truly global (resets, tokens).
  • Avoid heavy use of arbitrary values unless necessary; prefer consistent tokens.
  • 通过单个全局CSS入口导入Tailwind：
    @import 'tailwindcss';
  • 确保该全局CSS从根布局中导入。
  • 大部分样式优先使用Tailwind工具类写在
    className
    中。
  • 避免大型自定义CSS文件；仅在真正需要全局样式（如重置样式、tokens）时使用自定义CSS。
  • 除非必要，避免大量使用任意值；优先使用统一的tokens。

Class Strategy

类策略

  • If class strings become hard to read:
    • Extract a small presentational component.
    • Or extract a 
      components/<area>/...
      wrapper rather than inventing large custom CSS.
  • 如果类字符串变得难以阅读：
    • 提取一个小型展示组件。
    • 或者提取
      components/<area>/...
      包装器，而非编写大量自定义CSS。

Rules

规则说明

Setup

配置

  • tailwind-setup
    - Tailwind CSS v4 setup (single global CSS import)
  • tailwind-setup
    - Tailwind CSS v4配置（单全局CSS导入）

Class Strategy

类策略

  • tailwind-class-strategy
    - Prefer utilities, extract components when needed
  • tailwind-avoid-drift
    - Avoid style drift (keep custom CSS global, prefer tokens)
  • tailwind-class-strategy
    - 优先使用工具类，必要时提取组件
  • tailwind-avoid-drift
    - 避免样式偏移（仅保留全局自定义CSS，优先使用tokens）

Ordering

排序

  • tailwind-css-ordering
    - CSS order depends on import order
  • tailwind-css-ordering
    - CSS顺序取决于导入顺序

Related Skills

相关技能

  • busirocket-react
    - Component extraction patterns
  • busirocket-react
    - 组件提取模式

How to Use

使用方法

Read individual rule files for detailed explanations and code examples:
rules/tailwind-setup.md
rules/tailwind-class-strategy.md
rules/tailwind-avoid-drift.md
Each rule file contains:
  • Brief explanation of why it matters
  • Code examples (correct and incorrect patterns)
  • Additional context and best practices
阅读单个规则文件获取详细说明与代码示例：
rules/tailwind-setup.md
rules/tailwind-class-strategy.md
rules/tailwind-avoid-drift.md
每个规则文件包含：
  • 简要说明该规则的重要性
  • 代码示例（正确与错误模式）
  • 额外背景信息与最佳实践