tailwind

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS Expert

Tailwind CSS 专家指南

Expert Tailwind CSS patterns for building modern, responsive interfaces.

为构建现代响应式界面提供专业的Tailwind CSS实践模式。

Core Principles

核心原则

Utility-first: Compose designs directly in markup using utility classes
Responsive by default: Mobile-first with
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
,
```
2xl:
```
prefixes
Consistent spacing: Use the spacing scale (4, 8, 12, 16, 20, 24, 32, 40, 48, 64)
Design tokens: Leverage the default theme or extend it consistently

工具类优先：直接在标记代码中使用工具类组合实现设计效果
默认支持响应式：采用移动端优先设计，支持
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
,
```
2xl:
```
断点前缀
间距一致性：使用预设的间距刻度（4、8、12、16、20、24、32、40、48、64）
设计令牌：合理利用默认主题，或保持一致性地扩展自定义主题

Common Patterns

常见实践模式

Layout

布局

html

<!-- Flexbox centering -->
<div class="flex items-center justify-center">

<!-- Grid layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Container with padding -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">

html

<!-- Flexbox 居中布局 -->
<div class="flex items-center justify-center">

<!-- Grid 布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- 带内边距的容器 -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">

Typography

排版

html

<!-- Headings -->
<h1 class="text-3xl font-bold tracking-tight text-gray-900">
<h2 class="text-2xl font-semibold text-gray-800">
<p class="text-base text-gray-600 leading-relaxed">

<!-- Truncation -->
<p class="truncate">  <!-- Single line -->
<p class="line-clamp-3">  <!-- Multi-line -->

html

<!-- 标题 -->
<h1 class="text-3xl font-bold tracking-tight text-gray-900">
<h2 class="text-2xl font-semibold text-gray-800">
<p class="text-base text-gray-600 leading-relaxed">

<!-- 文本截断 -->
<p class="truncate">  <!-- 单行 -->
<p class="line-clamp-3">  <!-- 多行 -->

Buttons

按钮

html

<!-- Primary -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">

<!-- Secondary -->
<button class="px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">

html

<!-- 主按钮 -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">

<!-- 次按钮 -->
<button class="px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">

Cards

卡片

html

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
  <h3 class="text-lg font-semibold text-gray-900">Title</h3>
  <p class="mt-2 text-gray-600">Description</p>
</div>

html

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
  <h3 class="text-lg font-semibold text-gray-900">标题</h3>
  <p class="mt-2 text-gray-600">描述内容</p>
</div>

Forms

表单

html

<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">

html

<label class="block text-sm font-medium text-gray-700">邮箱</label>
<input type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">

Responsive Design

响应式设计

html

<!-- Stack on mobile, side-by-side on larger screens -->
<div class="flex flex-col sm:flex-row gap-4">

<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">

<!-- Different padding at breakpoints -->
<div class="p-4 sm:p-6 lg:p-8">

html

<!-- 移动端堆叠排列，大屏端并排显示 -->
<div class="flex flex-col sm:flex-row gap-4">

<!-- 移动端隐藏，桌面端显示 -->
<div class="hidden lg:block">

<!-- 不同断点下的内边距 -->
<div class="p-4 sm:p-6 lg:p-8">

Dark Mode

深色模式

html

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

html

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

States

交互状态

html

<!-- Hover, focus, active -->
<button class="hover:bg-blue-700 focus:ring-2 active:bg-blue-800">

<!-- Disabled -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed">

<!-- Group hover -->
<div class="group">
  <span class="group-hover:text-blue-600">
</div>

html

<!-- 悬停、聚焦、激活状态 -->
<button class="hover:bg-blue-700 focus:ring-2 active:bg-blue-800">

<!-- 禁用状态 -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed">

<!-- 组悬停状态 -->
<div class="group">
  <span class="group-hover:text-blue-600">
</div>

Animation

动画效果

html

<!-- Transitions -->
<div class="transition-all duration-200 ease-in-out">

<!-- Built-in animations -->
<div class="animate-spin">
<div class="animate-pulse">
<div class="animate-bounce">

html

<!-- 过渡动画 -->
<div class="transition-all duration-200 ease-in-out">

<!-- 内置动画 -->
<div class="animate-spin">
<div class="animate-pulse">
<div class="animate-bounce">

Best Practices

最佳实践

Extract repeated patterns into components or partials
Use
```
@apply
```
sparingly in CSS files for complex repeated patterns
Prefer semantic HTML with utility classes over
```
<div>
```
soup
Use the official Tailwind CSS IntelliSense extension
Customize theme in
```
tailwind.config.js
```
rather than arbitrary values

将重复出现的模式提取为组件或局部模板
在CSS文件中谨慎使用
```
@apply
```
，仅用于复杂的重复模式
优先使用结合工具类的语义化HTML，避免过度使用
```
<div>
```
标签
安装官方的Tailwind CSS IntelliSense扩展
在
```
tailwind.config.js
```
中自定义主题，而非使用任意值