04. 核心概念1. 概述Tailwind CSS 提供了数百个工具类分类清晰。掌握这些分类就能快速找到需要的类。2. 工具类分类总览分类说明示例布局display、position、z-indexflex,relative,z-10盒模型width、height、padding、marginw-full,h-screen,p-4,m-2排版字体、文字大小、颜色、对齐text-lg,font-bold,text-center背景背景色、渐变、图片bg-blue-500,bg-gradient边框边框宽度、颜色、圆角border,border-red,rounded效果阴影、透明度shadow-md,opacity-50交互悬停、焦点、激活hover:bg-blue,focus:ring变换平移、旋转、缩放translate-x-4,rotate-90过渡过渡属性、时长、缓动transition,duration-3003. 布局类3.1 Display类名效果blockdisplay: blockinline-blockdisplay: inline-blockinlinedisplay: inlineflexdisplay: flexinline-flexdisplay: inline-flexgriddisplay: gridinline-griddisplay: inline-gridhiddendisplay: none3.2 Position类名效果staticposition: staticfixedposition: fixedabsoluteposition: absoluterelativeposition: relativestickyposition: sticky3.3 Z-Index类名效果z-0z-index: 0z-10z-index: 10z-20z-index: 20z-50z-index: 50z-autoz-index: auto4. 盒模型类4.1 宽度 (Width)类名效果w-0width: 0w-4width: 16px(1rem)w-1/2width: 50%w-1/3width: 33.333333%w-fullwidth: 100%w-screenwidth: 100vww-autowidth: autow-minwidth: min-contentw-maxwidth: max-content4.2 高度 (Height)类名效果h-0height: 0h-4height: 16pxh-1/2height: 50%h-fullheight: 100%h-screenheight: 100vhh-autoheight: auto4.3 内边距 (Padding)类名效果p-0padding: 0p-1padding: 4pxp-2padding: 8pxp-4padding: 16pxp-8padding: 32pxpx-4padding-left: 16px; padding-right: 16pxpy-2padding-top: 8px; padding-bottom: 8pxpt-4padding-top: 16pxpl-4padding-left: 16px4.4 外边距 (Margin)类名效果m-0margin: 0m-4margin: 16pxmx-automargin-left: auto; margin-right: auto(居中)my-2margin-top: 8px; margin-bottom: 8pxmt-4margin-top: 16pxml-4margin-left: 16px-mt-4margin-top: -16px(负边距)5. Flexbox 类5.1 容器属性类名效果flexdisplay: flexflex-rowflex-direction: rowflex-colflex-direction: columnflex-wrapflex-wrap: wrapflex-nowrapflex-wrap: nowrap5.2 主轴对齐 (justify-content)类名效果justify-startjustify-content: flex-startjustify-endjustify-content: flex-endjustify-centerjustify-content: centerjustify-betweenjustify-content: space-betweenjustify-aroundjustify-content: space-aroundjustify-evenlyjustify-content: space-evenly5.3 交叉轴对齐 (align-items)类名效果items-startalign-items: flex-startitems-endalign-items: flex-enditems-centeralign-items: centeritems-baselinealign-items: baselineitems-stretchalign-items: stretch5.4 子项属性类名效果flex-1flex: 1 1 0%flex-autoflex: 1 1 autoflex-noneflex: nonegrowflex-grow: 1shrinkflex-shrink: 16. Grid 布局类6.1 容器属性类名效果griddisplay: gridgrid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))grid-cols-[200px,1fr]自定义列宽grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr))gap-4gap: 16pxgap-x-4column-gap: 16pxgap-y-2row-gap: 8px6.2 子项属性类名效果col-span-2grid-column: span 2 / span 2col-start-2grid-column-start: 2col-end-4grid-column-end: 4row-span-2grid-row: span 2 / span 27. 排版类7.1 字体大小类名字号行高text-xs12px16pxtext-sm14px20pxtext-base16px24pxtext-lg18px28pxtext-xl20px28pxtext-2xl24px32pxtext-3xl30px36pxtext-4xl36px40px7.2 字重 (font-weight)类名效果font-thinfont-weight: 100font-lightfont-weight: 300font-normalfont-weight: 400font-mediumfont-weight: 500font-semiboldfont-weight: 600font-boldfont-weight: 700font-extraboldfont-weight: 8007.3 文本颜色类名效果text-black黑色text-white白色text-gray-500灰色 (500 是中等亮度)text-red-500红色text-blue-500蓝色text-green-500绿色7.4 文本对齐类名效果text-left左对齐text-center居中对齐text-right右对齐text-justify两端对齐8. 背景类8.1 背景色类名效果bg-black黑色背景bg-white白色背景bg-gray-100浅灰色bg-blue-500蓝色bg-transparent透明8.2 背景渐变类名效果bg-gradient-to-r从左到右渐变bg-gradient-to-t从下到上渐变from-blue-500渐变起始色to-purple-500渐变结束色divclassbg-gradient-to-r from-blue-500 to-purple-500渐变背景/div9. 边框类9.1 边框宽度类名效果borderborder-width: 1pxborder-0border-width: 0border-2border-width: 2pxborder-tborder-top-width: 1pxborder-bborder-bottom-width: 1px9.2 边框颜色类名效果border-gray-300灰色边框border-red-500红色边框border-transparent透明边框9.3 圆角类名效果rounded-none无圆角rounded-sm小圆角rounded默认圆角rounded-md中等圆角rounded-lg大圆角rounded-full完全圆形rounded-t-lg顶部圆角10. 效果类10.1 阴影类名效果shadow-sm小阴影shadow默认阴影shadow-md中等阴影shadow-lg大阴影shadow-xl超大阴影shadow-2xl特大阴影shadow-none无阴影10.2 透明度类名效果opacity-0完全透明opacity-2525% 不透明opacity-5050% 不透明opacity-7575% 不透明opacity-100完全不透明11. 交互类11.1 状态前缀前缀说明示例hover:鼠标悬停hover:bg-bluefocus:获得焦点focus:ringactive:激活状态active:scale-95disabled:禁用状态disabled:opacity-5011.2 示例buttonclassbg-blue-500 hover:bg-blue-700 active:scale-95 focus:ring focus:ring-blue-300交互按钮/button12. 综合示例完整的卡片组件divclassmax-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadowdivclassp-6divclassflex items-center gap-3 mb-4divclassw-10 h-10 bg-blue-500 rounded-full flex items-center justify-centerspanclasstext-white font-boldA/span/divdivh3classfont-bold text-gray-900张三/h3pclasstext-sm text-gray-5002024-01-15/p/div/divpclasstext-gray-700 mb-4这是一段示例文本展示 Tailwind CSS 的组合能力。/pdivclassflex gap-2spanclasspx-2 py-1 bg-gray-100 text-gray-600 text-sm rounded标签1/spanspanclasspx-2 py-1 bg-gray-100 text-gray-600 text-sm rounded标签2/span/div/div/div效果最大宽度 384px自动居中白色背景大圆角阴影悬停时阴影变大过渡动画头部头像、名字、日期正文描述文本底部标签13. 快速查询表需求类名居中flex justify-center items-center两端对齐flex justify-between等宽列grid grid-cols-3响应式网格grid grid-cols-1 md:grid-cols-2卡片bg-white rounded-lg shadow-md p-4按钮px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700输入框border rounded px-3 py-2 focus:outline-none focus:ring隐藏hidden移动端隐藏hidden md:block14. 练习练习 1用 Tailwind 实现下面的布局一个 Flex 容器水平排列三个等宽的子元素每个子元素白色背景、阴影、内边距参考答案divclassflex gap-4divclassflex-1 bg-white shadow p-41/divdivclassflex-1 bg-white shadow p-42/divdivclassflex-1 bg-white shadow p-43/div/div练习 2实现一个警告提示框黄色背景左侧红色边框圆角内边距包含标题和描述参考答案divclassbg-yellow-50 border-l-4 border-red-500 rounded-lg p-4h4classfont-bold text-yellow-800警告/h4pclasstext-yellow-700这是一个警告信息/p/div15. 总结分类关键类名布局flex,grid,relative,absolute盒模型w-*,h-*,p-*,m-*Flexflex,justify-*,items-*Gridgrid,grid-cols-*,col-span-*排版text-*,font-*,text-*背景bg-*,bg-gradient-*边框border,rounded-*效果shadow-*,opacity-*交互hover:,focus:,active:16. 下一步掌握了核心工具类后接下来学习响应式设计下一节05. 响应式设计
04. 核心概念
发布时间：2026/7/25 11:54:02
04. 核心概念1. 概述Tailwind CSS 提供了数百个工具类分类清晰。掌握这些分类就能快速找到需要的类。2. 工具类分类总览分类说明示例布局display、position、z-indexflex,relative,z-10盒模型width、height、padding、marginw-full,h-screen,p-4,m-2排版字体、文字大小、颜色、对齐text-lg,font-bold,text-center背景背景色、渐变、图片bg-blue-500,bg-gradient边框边框宽度、颜色、圆角border,border-red,rounded效果阴影、透明度shadow-md,opacity-50交互悬停、焦点、激活hover:bg-blue,focus:ring变换平移、旋转、缩放translate-x-4,rotate-90过渡过渡属性、时长、缓动transition,duration-3003. 布局类3.1 Display类名效果blockdisplay: blockinline-blockdisplay: inline-blockinlinedisplay: inlineflexdisplay: flexinline-flexdisplay: inline-flexgriddisplay: gridinline-griddisplay: inline-gridhiddendisplay: none3.2 Position类名效果staticposition: staticfixedposition: fixedabsoluteposition: absoluterelativeposition: relativestickyposition: sticky3.3 Z-Index类名效果z-0z-index: 0z-10z-index: 10z-20z-index: 20z-50z-index: 50z-autoz-index: auto4. 盒模型类4.1 宽度 (Width)类名效果w-0width: 0w-4width: 16px(1rem)w-1/2width: 50%w-1/3width: 33.333333%w-fullwidth: 100%w-screenwidth: 100vww-autowidth: autow-minwidth: min-contentw-maxwidth: max-content4.2 高度 (Height)类名效果h-0height: 0h-4height: 16pxh-1/2height: 50%h-fullheight: 100%h-screenheight: 100vhh-autoheight: auto4.3 内边距 (Padding)类名效果p-0padding: 0p-1padding: 4pxp-2padding: 8pxp-4padding: 16pxp-8padding: 32pxpx-4padding-left: 16px; padding-right: 16pxpy-2padding-top: 8px; padding-bottom: 8pxpt-4padding-top: 16pxpl-4padding-left: 16px4.4 外边距 (Margin)类名效果m-0margin: 0m-4margin: 16pxmx-automargin-left: auto; margin-right: auto(居中)my-2margin-top: 8px; margin-bottom: 8pxmt-4margin-top: 16pxml-4margin-left: 16px-mt-4margin-top: -16px(负边距)5. Flexbox 类5.1 容器属性类名效果flexdisplay: flexflex-rowflex-direction: rowflex-colflex-direction: columnflex-wrapflex-wrap: wrapflex-nowrapflex-wrap: nowrap5.2 主轴对齐 (justify-content)类名效果justify-startjustify-content: flex-startjustify-endjustify-content: flex-endjustify-centerjustify-content: centerjustify-betweenjustify-content: space-betweenjustify-aroundjustify-content: space-aroundjustify-evenlyjustify-content: space-evenly5.3 交叉轴对齐 (align-items)类名效果items-startalign-items: flex-startitems-endalign-items: flex-enditems-centeralign-items: centeritems-baselinealign-items: baselineitems-stretchalign-items: stretch5.4 子项属性类名效果flex-1flex: 1 1 0%flex-autoflex: 1 1 autoflex-noneflex: nonegrowflex-grow: 1shrinkflex-shrink: 16. Grid 布局类6.1 容器属性类名效果griddisplay: gridgrid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))grid-cols-[200px,1fr]自定义列宽grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr))gap-4gap: 16pxgap-x-4column-gap: 16pxgap-y-2row-gap: 8px6.2 子项属性类名效果col-span-2grid-column: span 2 / span 2col-start-2grid-column-start: 2col-end-4grid-column-end: 4row-span-2grid-row: span 2 / span 27. 排版类7.1 字体大小类名字号行高text-xs12px16pxtext-sm14px20pxtext-base16px24pxtext-lg18px28pxtext-xl20px28pxtext-2xl24px32pxtext-3xl30px36pxtext-4xl36px40px7.2 字重 (font-weight)类名效果font-thinfont-weight: 100font-lightfont-weight: 300font-normalfont-weight: 400font-mediumfont-weight: 500font-semiboldfont-weight: 600font-boldfont-weight: 700font-extraboldfont-weight: 8007.3 文本颜色类名效果text-black黑色text-white白色text-gray-500灰色 (500 是中等亮度)text-red-500红色text-blue-500蓝色text-green-500绿色7.4 文本对齐类名效果text-left左对齐text-center居中对齐text-right右对齐text-justify两端对齐8. 背景类8.1 背景色类名效果bg-black黑色背景bg-white白色背景bg-gray-100浅灰色bg-blue-500蓝色bg-transparent透明8.2 背景渐变类名效果bg-gradient-to-r从左到右渐变bg-gradient-to-t从下到上渐变from-blue-500渐变起始色to-purple-500渐变结束色divclassbg-gradient-to-r from-blue-500 to-purple-500渐变背景/div9. 边框类9.1 边框宽度类名效果borderborder-width: 1pxborder-0border-width: 0border-2border-width: 2pxborder-tborder-top-width: 1pxborder-bborder-bottom-width: 1px9.2 边框颜色类名效果border-gray-300灰色边框border-red-500红色边框border-transparent透明边框9.3 圆角类名效果rounded-none无圆角rounded-sm小圆角rounded默认圆角rounded-md中等圆角rounded-lg大圆角rounded-full完全圆形rounded-t-lg顶部圆角10. 效果类10.1 阴影类名效果shadow-sm小阴影shadow默认阴影shadow-md中等阴影shadow-lg大阴影shadow-xl超大阴影shadow-2xl特大阴影shadow-none无阴影10.2 透明度类名效果opacity-0完全透明opacity-2525% 不透明opacity-5050% 不透明opacity-7575% 不透明opacity-100完全不透明11. 交互类11.1 状态前缀前缀说明示例hover:鼠标悬停hover:bg-bluefocus:获得焦点focus:ringactive:激活状态active:scale-95disabled:禁用状态disabled:opacity-5011.2 示例buttonclassbg-blue-500 hover:bg-blue-700 active:scale-95 focus:ring focus:ring-blue-300交互按钮/button12. 综合示例完整的卡片组件divclassmax-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadowdivclassp-6divclassflex items-center gap-3 mb-4divclassw-10 h-10 bg-blue-500 rounded-full flex items-center justify-centerspanclasstext-white font-boldA/span/divdivh3classfont-bold text-gray-900张三/h3pclasstext-sm text-gray-5002024-01-15/p/div/divpclasstext-gray-700 mb-4这是一段示例文本展示 Tailwind CSS 的组合能力。/pdivclassflex gap-2spanclasspx-2 py-1 bg-gray-100 text-gray-600 text-sm rounded标签1/spanspanclasspx-2 py-1 bg-gray-100 text-gray-600 text-sm rounded标签2/span/div/div/div效果最大宽度 384px自动居中白色背景大圆角阴影悬停时阴影变大过渡动画头部头像、名字、日期正文描述文本底部标签13. 快速查询表需求类名居中flex justify-center items-center两端对齐flex justify-between等宽列grid grid-cols-3响应式网格grid grid-cols-1 md:grid-cols-2卡片bg-white rounded-lg shadow-md p-4按钮px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700输入框border rounded px-3 py-2 focus:outline-none focus:ring隐藏hidden移动端隐藏hidden md:block14. 练习练习 1用 Tailwind 实现下面的布局一个 Flex 容器水平排列三个等宽的子元素每个子元素白色背景、阴影、内边距参考答案divclassflex gap-4divclassflex-1 bg-white shadow p-41/divdivclassflex-1 bg-white shadow p-42/divdivclassflex-1 bg-white shadow p-43/div/div练习 2实现一个警告提示框黄色背景左侧红色边框圆角内边距包含标题和描述参考答案divclassbg-yellow-50 border-l-4 border-red-500 rounded-lg p-4h4classfont-bold text-yellow-800警告/h4pclasstext-yellow-700这是一个警告信息/p/div15. 总结分类关键类名布局flex,grid,relative,absolute盒模型w-*,h-*,p-*,m-*Flexflex,justify-*,items-*Gridgrid,grid-cols-*,col-span-*排版text-*,font-*,text-*背景bg-*,bg-gradient-*边框border,rounded-*效果shadow-*,opacity-*交互hover:,focus:,active:16. 下一步掌握了核心工具类后接下来学习响应式设计下一节05. 响应式设计
