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

间距

主题	描述	参考
外边距	使用间距比例、负值、逻辑属性和间距实用类控制元素外边距	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
文本对齐	使用 left、center、right、justify 和逻辑属性控制文本对齐	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 配置