tailwindcss

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS

The skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduces CSS-first configuration with theme variables, making it easier to customize your design system.

本技能基于Tailwind CSS v4.1.18，生成于2026年1月28日。

Tailwind CSS是一个实用优先的CSS框架，用于快速构建自定义用户界面。无需编写自定义CSS，你可以直接在标记语言中组合工具类来完成设计。Tailwind v4引入了基于CSS的主题变量配置，让自定义设计系统变得更加容易。

Core References

核心参考

Topic	Description	Reference
Installation	Vite, PostCSS, CLI, and CDN setup	core-installation
Utility Classes	Understanding Tailwind's utility-first approach and styling elements	core-utility-classes
Theme Variables	Design tokens, customizing theme, and theme variable namespaces	core-theme
Responsive Design	Mobile-first breakpoints, responsive variants, and container queries	core-responsive
Variants	Applying utilities conditionally with state, pseudo-class, and media query variants	core-variants
Preflight	Tailwind's base styles and how to extend or disable them	core-preflight

主题	描述	参考
安装	Vite、PostCSS、CLI和CDN配置	core-installation
工具类	理解Tailwind的实用优先方法及元素样式设置	core-utility-classes
主题变量	设计令牌、自定义主题及主题变量命名空间	core-theme
响应式设计	移动优先断点、响应式变体及容器查询	core-responsive
变体	通过状态、伪类和媒体查询变体条件性应用工具类	core-variants
基础样式	Tailwind的基础样式及其扩展或禁用方式	core-preflight

Layout

布局

Display & Flexbox & Grid

显示与Flexbox与Grid

Topic	Description	Reference
Display	flex, grid, block, inline, hidden, sr-only, flow-root, contents	layout-display
Flexbox	flex-direction, justify, items, gap, grow, shrink, wrap, order	layout-flexbox
Grid	grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid	layout-grid
Aspect Ratio	Controlling element aspect ratio for responsive media	layout-aspect-ratio
Columns	Multi-column layout for magazine-style or masonry layouts	layout-columns

主题	描述	参考
显示	flex、grid、block、inline、hidden、sr-only、flow-root、contents	layout-display
Flexbox	flex-direction、justify、items、gap、grow、shrink、wrap、order	layout-flexbox
Grid	grid-cols、grid-rows、gap、place-items、col-span、row-span、subgrid	layout-grid
宽高比	控制元素宽高比以适配响应式媒体	layout-aspect-ratio
多列布局	用于杂志风格或瀑布流布局的多列布局	layout-columns

Positioning

定位

Topic	Description	Reference
Position	Controlling element positioning with static, relative, absolute, fixed, and sticky	layout-position
Inset	Controlling placement of positioned elements with top, right, bottom, left, and inset utilities	layout-inset

主题	描述	参考
定位	使用static、relative、absolute、fixed和sticky控制元素定位	layout-position
内边距偏移	使用top、right、bottom、left和inset工具类控制定位元素的位置	layout-inset

Sizing

尺寸

Topic	Description	Reference
Width	Setting element width with spacing scale, fractions, container sizes, and viewport units	layout-width
Height	Setting element height with spacing scale, fractions, viewport units, and content-based sizing	layout-height
Min & Max Sizing	min-width, max-width, min-height, max-height constraints	layout-min-max-sizing

主题	描述	参考
宽度	使用间距比例、分数、容器尺寸和视口单位设置元素宽度	layout-width
高度	使用间距比例、分数、视口单位和基于内容的尺寸设置元素高度	layout-height
最小与最大尺寸	min-width、max-width、min-height、max-height约束	layout-min-max-sizing

Spacing

间距

Topic	Description	Reference
Margin	Controlling element margins with spacing scale, negative values, logical properties, and space utilities	layout-margin
Padding	Controlling element padding with spacing scale, logical properties, and directional utilities	layout-padding

主题	描述	参考
外边距	使用间距比例、负值、逻辑属性和间距工具类控制元素外边距	layout-margin
内边距	使用间距比例、逻辑属性和方向工具类控制元素内边距	layout-padding

Overflow

溢出

Topic	Description	Reference
Overflow	Controlling how elements handle content that overflows their container	layout-overflow

主题	描述	参考
溢出	控制元素处理超出容器内容的方式	layout-overflow

Images & Replaced Elements

图片与替换元素

Topic	Description	Reference
Object Fit & Position	Controlling how images and video are resized and positioned	layout-object-fit-position

主题	描述	参考
对象适配与定位	控制图片和视频的缩放与定位方式	layout-object-fit-position

Tables

表格

Topic	Description	Reference
Table Layout	border-collapse, table-auto, table-fixed	layout-tables

主题	描述	参考
表格布局	border-collapse、table-auto、table-fixed	layout-tables

Transforms

变换

Topic	Description	Reference
Transform Base	Base transform utilities for enabling transforms, hardware acceleration, and custom transform values	transform-base
Translate	Translating elements on x, y, and z axes with spacing scale, percentages, and custom values	transform-translate
Rotate	Rotating elements in 2D and 3D space with degree values and custom rotations	transform-rotate
Scale	Scaling elements uniformly or on specific axes with percentage values	transform-scale
Skew	Skewing elements on x and y axes with degree values	transform-skew

主题	描述	参考
变换基础	启用变换、硬件加速和自定义变换值的基础变换工具类	transform-base
平移	使用间距比例、百分比和自定义值在x、y、z轴上平移元素	transform-translate
旋转	使用角度值和自定义旋转在2D和3D空间中旋转元素	transform-rotate
缩放	使用百分比值均匀或按特定轴缩放元素	transform-scale
倾斜	使用角度值在x和y轴上倾斜元素	transform-skew

Typography

排版

Topic	Description	Reference
Font & Text	Font size, weight, color, line-height, letter-spacing, decoration, truncate	typography-font-text
Text Align	Controlling text alignment with left, center, right, justify, and logical properties	typography-text-align
List Style	list-style-type, list-style-position for bullets and markers	typography-list-style

主题	描述	参考
字体与文本	字体大小、字重、颜色、行高、字母间距、装饰、截断	typography-font-text
文本对齐	使用left、center、right、justify和逻辑属性控制文本对齐	typography-text-align
列表样式	用于项目符号和标记的list-style-type、list-style-position	typography-list-style

Visual

视觉效果

Topic	Description	Reference
Background	Background color, gradient, image, size, position	visual-background
Border	Border width, color, radius, divide, ring	visual-border
Effects	Box shadow, opacity, mix-blend, backdrop-blur, filter	visual-effects
SVG	fill, stroke, stroke-width for SVG and icon styling	visual-svg

主题	描述	参考
背景	背景颜色、渐变、图片、尺寸、位置	visual-background
边框	边框宽度、颜色、圆角、分隔线、环形边框	visual-border
特效	盒阴影、透明度、混合模式、背景模糊、滤镜	visual-effects
SVG	用于SVG和图标样式的fill、stroke、stroke-width	visual-svg

Effects & Interactivity

特效与交互

Topic	Description	Reference
Transition & Animation	CSS transitions, animation keyframes, reduced motion	effects-transition-animation
Visibility & Interactivity	Visibility, cursor, pointer-events, user-select, z-index	effects-visibility-interactivity
Form Controls	accent-color, appearance, caret-color, resize	effects-form-controls
Scroll Snap	scroll-snap-type, scroll-snap-align for carousels	effects-scroll-snap

主题	描述	参考
过渡与动画	CSS过渡、动画关键帧、减少动画	effects-transition-animation
可见性与交互	可见性、光标、指针事件、用户选择、z-index	effects-visibility-interactivity
表单控件	accent-color、外观、光标颜色、调整大小	effects-form-controls
滚动捕捉	用于轮播的scroll-snap-type、scroll-snap-align	effects-scroll-snap

Features

功能特性

Dark Mode

暗色模式

Topic	Description	Reference
Dark Mode	Implementing dark mode with the dark variant and custom strategies	features-dark-mode

主题	描述	参考
暗色模式	使用dark变体和自定义策略实现暗色模式	features-dark-mode

Migration

迁移

Topic	Description	Reference
Upgrade Guide	Migrating from v3 to v4, breaking changes, rename mappings	features-upgrade

主题	描述	参考
升级指南	从v3迁移到v4、破坏性变更、重命名映射	features-upgrade

Customization

自定义

Topic	Description	Reference
Custom Styles	Adding custom styles, utilities, variants, and working with arbitrary values	features-custom-styles
Functions & Directives	Tailwind's CSS directives and functions for working with your design system	features-functions-directives
Content Detection	How Tailwind detects classes and how to customize content scanning	features-content-detection

主题	描述	参考
自定义样式	添加自定义样式、工具类、变体及处理任意值	features-custom-styles
函数与指令	Tailwind用于设计系统的CSS指令和函数	features-functions-directives
内容检测	Tailwind如何检测类及自定义内容扫描的方式	features-content-detection

Best Practices

最佳实践

Topic	Description	Reference
Utility Patterns	Managing duplication, conflicts, important modifier, when to use components	best-practices-utility-patterns

主题	描述	参考
工具类模式	管理重复、冲突、重要修饰符、何时使用组件	best-practices-utility-patterns

Key Recommendations

关键建议

Use utility classes directly in markup - Compose designs by combining utilities
Customize with theme variables - Use
```
@theme
```
directive to define design tokens
Mobile-first responsive design - Use unprefixed utilities for mobile, prefixed for breakpoints
Use complete class names - Never construct classes dynamically with string interpolation
Leverage variants - Stack variants for complex conditional styling
Prefer CSS-first configuration - Use
```
@theme
```
,
```
@utility
```
, and
```
@custom-variant
```
over JavaScript configs

直接在标记中使用工具类 - 通过组合工具类完成设计
使用主题变量自定义 - 使用
```
@theme
```
指令定义设计令牌
移动优先的响应式设计 - 未加前缀的工具类用于移动端，带前缀的用于断点
使用完整类名 - 永远不要通过字符串插值动态构造类
利用变体 - 堆叠变体实现复杂的条件样式
优先选择基于CSS的配置 - 使用
```
@theme
```
、
```
@utility
```
和
```
@custom-variant
```
而非JavaScript配置