TailWind CSS 笔记
约 1360 字大约 5 分钟
2025-09-13
Tailwind 的类名大多是 属性-值 的形式,响应式/状态前缀放在最前面(例如 md:text-lg、hover:bg-blue-600)。负值用前缀 -(例如 -mt-4)。任意值可用方括号:w-[300px]。
布局基础
container— 居中并随着断点调整最大宽度(常用于页面容器)。 例如:<div class="container mx-auto">block/inline/inline-block— 显示类型。hidden—display: none;flex/inline-flex— flex 布局。grid/inline-grid— grid 布局。table/table-row/table-cell— 表格 display。order-1/order-last— flex/grid 中的项顺序。
Flex / Grid 常用
flex-row/flex-col— 主轴方向。flex-wrap/flex-nowrap— 换行。items-startitems-centeritems-enditems-stretch— 交叉轴对齐(align-items)。justify-startjustify-centerjustify-betweenjustify-aroundjustify-evenly— 主轴对齐(justify-content)。gap-0gap-1gap-2gap-4gap-8— 子元素间距,支持gap-x-.../gap-y-...。grid-cols-1/2/3/4/5/6— 列数(grid-cols-3)。col-span-2/row-span-1— 跨列/跨行。place-items-center/place-content-center— 进一步简写对齐。
间距(Margin / Padding)
m-0m-1m-2m-4m-8等 — 全边距(单位基于 Tailwind 预设 scale)。mt-4mr-2mb-6ml-3— 上右下左分别设。mx-auto— 左右自动(常用于水平居中)。px-4py-2— x/y 方向内边距。-mt-2-mx-4— 负 margin。space-x-4/space-y-2— 同胞元素之间的间隔(flex/grid 时非常常用)。
大小(宽高)
w-full/h-full— 占父元素全部。w-screen/h-screen— 占可视窗口。w-auto/h-auto— 自动尺寸。w-1/2w-1/3w-2/3— 百分比宽度。max-w-xsmax-w-smmax-w-mdmax-w-lgmax-w-2xlmax-w-full— 最大宽度(常用于容器/卡片)。min-h-screen/min-w-0/max-h-96。- 任意值:
w-[300px]、h-[50vh]。
排版(Typography)
text-xstext-smtext-basetext-lgtext-xltext-2xltext-3xl等 — 字号。font-thinfont-lightfont-normalfont-mediumfont-semiboldfont-boldfont-extraboldfont-black— 字重。font-sansfont-seriffont-mono— 字体族(基于 config)。text-lefttext-centertext-righttext-justify— 对齐。leading-noneleading-tightleading-normalleading-loose— 行高(line-height)。tracking-tighttracking-wide— 字间距(letter-spacing)。truncate— 单行溢出省略号,常配overflow-hidden whitespace-nowrap。whitespace-normalwhitespace-nowrapbreak-words/break-all— 换行策略。text-gray-700/text-white/text-red-500— 文本颜色(颜色系列常见:gray/blue/red/green/yellow/pink/purple/... + shade)。
背景与颜色
bg-whitebg-blackbg-gray-100bg-gray-800bg-blue-500等 — 背景色。bg-gradient-to-r/bg-gradient-to-b+from-via-to-— 渐变背景(例如bg-gradient-to-r from-blue-400 to-purple-600)。bg-coverbg-containbg-centerbg-no-repeat— 背景图控制。- 透明度:
opacity-100/75/50/25或者颜色斜线写法(在新版本/JIT 下)如bg-blue-500/50(带 alpha)。 bg-transparent。
边框与圆角
border/border-0/border-2/border-t/border-b— 边框宽度及方向。border-gray-200/border-blue-500— 边框颜色。rounded-nonerounded-smroundedrounded-mdrounded-lgrounded-full— 圆角。ring-0ring-1ring-2focus:ring-2ring-blue-500— ring(焦点环,常配合 forms/交互)。outline-none— 去默认外轮廓(注意可访问性)。
阴影与效果(Effects)
shadow-smshadowshadow-mdshadow-lgshadow-xl— 盒阴影。shadow-none。filterblur-smblurgrayscalesepiacontrast-125saturate-150等(需浏览器支持)。mix-blend-normal/mix-blend-multiply。drop-shadow(更适合图片/图标的阴影)。opacity-75opacity-50— 透明度。
定位与层级
relative/absolute/fixed/sticky— 定位模式。top-0left-0right-0bottom-0/inset-0/inset-y-0/inset-x-0— 定位偏移。z-0z-10z-20z-50— z-index。
溢出与滚动
overflow-autooverflow-hiddenoverflow-visibleoverflow-scroll。overflow-x-auto/overflow-y-hidden。scrollbar-hide(需插件或自定义)。
交互、状态类(伪类)
hover:前缀(如hover:bg-blue-600)focus:(如focus:outline-none focus:ring-2 focus:ring-blue-400)active:(如active:scale-95)disabled:visited:checked:first:last:odd:even:等group+group-hover:用于父子联动(例如class="group"的父元素下group-hover:text-white)。
动画与变换(Transform / Transition / Animation)
transform— 启用 transform(有些版本自动启用)。translate-x-2/-translate-y-1— 平移。scale-95scale-100scale-105— 缩放。rotate-45rotate-90— 旋转。origin-centerorigin-top-left— 变换原点。transition/transition-colors/transition-transform— 启用过渡。duration-150duration-300— 持续时间(ms)。ease-inease-outease-in-out。animate-spinanimate-pulseanimate-bounce— 常用内置动画。
表单(常用)
appearance-none— 去默认浏览器样式(input/select)。placeholder-gray-400— placeholder 颜色。focus:ring-2 focus:ring-offset-2 focus:ring-blue-500— 焦点样式组合(常用于 input)。rounded-fullpx-3 py-2borderw-full— 常见 input 样式组合。
可访问性 & 实用小工具
sr-only— 屏幕阅读器可见、视觉上隐藏(隐藏文本但对读屏器友好)。not-sr-only/visible。cursor-pointercursor-not-allowed— 鼠标指针。select-none— 禁止文本选中。pointer-events-none— 禁止鼠标事件。list-disclist-decimallist-insidelist-outside— 列表样式。
响应式前缀(常见断点)
sm:md:lg:xl:2xl:— 例如md:flex(中等及以上屏幕显示 flex)。- 可以组合:
sm:text-sm md:text-base lg:text-lg。
组合/工程化常见写法(快捷记忆)
mx-auto(水平居中)flex items-center justify-between(水平两端分布且垂直居中,常见 header)px-4 py-2 rounded-md shadow(简单按钮/卡片基座)grid grid-cols-3 gap-4(三列网格)w-full max-w-3xl mx-auto(中间容器)
插件/扩展(可能不是默认)
prose(typography 插件,适合论文/文章样式)。line-clamp-3(文本折叠插件,line-clamp)。aspect-w-16 aspect-h-9/aspect-video(长宽比插件)。
这些需要在
tailwind.config.js中开启或安装插件。