@flyeric0212/frameworks-tailwind

---
description: 该规则解释了 Tailwind CSS 约定、实用工具类和现代 UI 开发的最佳实践。
globs: **/*.css
alwaysApply: false
---

# Tailwind CSS 规则

- 使用响应式前缀实现移动优先设计：

```html
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 移动设备上全宽，中等屏幕上占一半，大屏幕上占三分之一 -->
</div>
```

- 为交互元素使用状态变体：

```html
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2">
  点击我
</button>
```

- 必要时使用 @apply 处理重复模式：

```css
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
  }
}
```

- 对特定需求使用任意值：

```html
<div class="top-[117px] grid-cols-[1fr_2fr]">
  <!-- 自定义定位和网格布局 -->
</div>
```

- 使用间距工具实现一致的布局：

```html
<div class="space-y-4">
  <div>项目 1</div>
  <div>项目 2</div>
</div>
```

═══════════════════════════════════════════════════════════════════
═══ ENGLISH TRANSLATION ═══
═══════════════════════════════════════════════════════════════════

---
description: Frameworks Tailwind Development Guidelines (Translation)
---

# Frameworks Tailwind Guidelines - English Translation

**Note**: This package contains Chinese cursor rules for Frameworks Tailwind.

**Original Language**: Chinese (Simplified)

**Content Summary**: This package provides comprehensive development guidelines, best practices, and coding standards for Frameworks Tailwind. The rules cover code organization, naming conventions, design patterns, testing strategies, and performance optimization.

**Translation Status**: Automated translation placeholder. For accurate technical translation of specific terms and context, please:
1. Use the original Chinese content above as authoritative reference
2. Refer to official Frameworks Tailwind documentation in English
3. The technical patterns and code examples remain universal across languages

**How to Use**:
- Code blocks and examples use universal syntax
- Technical terms (APIs, methods, libraries) are typically in English even in Chinese text
- Structure and organization principles translate directly to English development practices

**Content Length**: 691 characters of detailed technical guidance

For community-contributed English translation, please refer to the source repository.