Back to Details

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:
<!-- v3 Import Syntax -->
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • 始终使用Tailwind CSS v3，并确保仅使用其支持的类。
  • 配置在
    tailwind.config.js
    文件中完成。
  • 使用
    @tailwind
    指令导入：
<!-- v3 Import Syntax -->
css
@tailwind base;
@tailwind components;
@tailwind utilities;

Spacing

间距处理

When listing items, use gap utilities for spacing; don't use margins.
<!-- Gap Utilities -->
html
<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>
排列元素时，使用gap工具类设置间距；不要使用margin。
<!-- Gap Utilities -->
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:
<!-- Dark Mode -->
html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>
如果现有页面和组件支持暗黑模式，新页面和组件必须以相同方式支持，通常使用
dark:
变体：
<!-- Dark Mode -->
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 布局

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

Grid Layout

Grid 布局

<!-- Grid Layout -->
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>
<!-- Grid Layout -->
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

验证步骤

  1. Check browser for visual rendering
  2. Test responsive breakpoints
  3. Verify dark mode if project uses it
  1. 在浏览器中检查视觉渲染效果
  2. 测试响应式断点
  3. 如果项目使用暗黑模式，验证其效果

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类可满足需求时，过度使用内联样式