tailwindcss

Tailwind CSS

该技能基于 Tailwind CSS v4.1.18，生成于 2026-01-28。

Tailwind CSS 是一个实用优先的 CSS 框架，用于快速构建自定义用户界面。无需编写自定义 CSS，而是直接在标记中使用实用类来组合设计。Tailwind v4 引入了以 CSS 为先的配置和主题变量，使自定义设计系统更加容易。

核心参考

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

布局

显示 & Flexbox & Grid

主题	描述	参考
显示	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

定位

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

尺寸

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

间距

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

溢出

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

图片 & 替换元素

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

表格

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

变换

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

排版

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

视觉

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

效果与交互

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

功能

深色模式

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

迁移

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

自定义

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

最佳实践

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

关键建议

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