tailwindcss-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS Development

Tailwind CSS 开发

When to Apply

适用场景

Activate this skill when:

Adding styles to components or pages
Working with responsive design
Implementing dark mode
Extracting repeated patterns into components
Debugging spacing or layout issues

在以下场景激活该技能：

为组件或页面添加样式
处理响应式设计
实现暗黑模式
将重复样式提取为组件
调试间距或布局问题

Documentation

文档参考

Use

search-docs

for detailed Tailwind CSS v3 patterns and documentation.

使用

search-docs

获取Tailwind CSS v3的详细模式和文档。

Basic Usage

基础用法

Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

使用Tailwind CSS类为HTML设置样式。在引入新样式模式前，请检查并遵循项目中已有的Tailwind规范。
可根据项目规范（如Blade、JSX、Vue），将重复样式提取为组件。
考虑类的位置、顺序、优先级和默认值。移除冗余类，谨慎地为父元素或子元素添加类以减少重复，并合理分组元素。

Tailwind CSS v3 Specifics

Tailwind CSS v3 专属特性

Always use Tailwind CSS v3 and verify you're using only classes it supports.
Configuration is done in the
```
tailwind.config.js
```
file.
Import using
```
@tailwind
```
directives:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

始终使用Tailwind CSS v3，并确保仅使用其支持的类。
配置在
```
tailwind.config.js
```
文件中完成。
使用
```
@tailwind
```
指令导入：

css

@tailwind base;
@tailwind components;
@tailwind utilities;

Spacing

间距处理

When listing items, use gap utilities for spacing; don't use margins.

html

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

排列元素时，使用gap工具类设置间距；不要使用margin。

html

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Dark Mode

暗黑模式

If existing pages and components support dark mode, new pages and components must support it the same way, typically using the

dark:

variant:

html

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

如果现有页面和组件支持暗黑模式，新页面和组件必须以相同方式支持，通常使用

dark:

变体：

html

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

Common Patterns

常见布局模式

Flexbox Layout

Flexbox 布局

html

<div class="flex items-center justify-between gap-4">
    <div>Left content</div>
    <div>Right content</div>
</div>

html

<div class="flex items-center justify-between gap-4">
    <div>Left content</div>
    <div>Right content</div>
</div>

Grid Layout

Grid 布局

html

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

html

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

Verification

验证步骤

Check browser for visual rendering
Test responsive breakpoints
Verify dark mode if project uses it

在浏览器中检查视觉渲染效果
测试响应式断点
如果项目使用暗黑模式，验证其效果

Common Pitfalls

常见误区

Using margins for spacing between siblings instead of gap utilities
Forgetting to add dark mode variants when the project uses dark mode
Not checking existing project conventions before adding new utilities
Overusing inline styles when Tailwind classes would suffice

使用margin为同级元素设置间距，而非gap工具类
当项目使用暗黑模式时，忘记添加暗黑模式变体
在添加新工具类前未检查项目现有规范
当Tailwind类可满足需求时，过度使用内联样式