个人笔记 Tailwind CSS 用法

布局

• container: 设置容器的最大宽度。
• mx-auto: 在父元素中水平居中。
• my-auto: 在父元素中垂直居中。
• grid-cols-1 - grid-cols-12: 定义网格布局的列数。
• col-span-1 - col-span-12: 定义网格布局中一个项目跨越的列数。

盒模型

• box-border: 设置盒模型为 border-box。
• box-content: 设置盒模型为 content-box。
• w-0 - w-full: 定义宽度。
• min-w-0 - min-w-full: 定义最小宽度。
• max-w-0 - max-w-full: 定义最大宽度。
• h-0 - h-full: 定义高度。
• min-h-0 - min-h-full: 定义最小高度。
• max-h-0 - max-h-full: 定义最大高度。
• p-0 - p-8: 定义内边距。
• pt-0 - pt-8: 定义顶部内边距。
• pb-0 - pb-8: 定义底部内边距。
• pl-0 - pl-8: 定义左侧内边距。
• pr-0 - pr-8: 定义右侧内边距。
• px-0 - px-8: 定义左右内边距。
• py-0 - py-8: 定义上下内边距。
• m-0 - m-8: 定义外边距。
• mt-0 - mt-8: 定义顶部外边距。
• mb-0 - mb-8: 定义底部外边距。
• ml-0 - ml-8: 定义左侧外边距。
• mr-0 - mr-8: 定义右侧外边距。
• mx-0 - mx-8: 定义左右外边距。
• my-0 - my-8: 定义上下外边距。
• rounded-none - rounded-full: 定义圆角半径。
• border-solid: 设置边框样式为实线。
• border-dashed: 设置边框样式为虚线。
• border-dotted: 设置边框样式为点线。

文本

• text-xs - text-6xl: 定义字体大小。
• font-thin - font-bold: 定义字体粗细。
• text-left: 左对齐文本。
• text-center: 居中文本。
• text-right: 右对齐文本。
• text-justify: 两端对齐文本。
• underline: 下划线文本。
• line-through: 中划线文本。
• no-underline: 去掉下划线。
• font-sans - font-mono: 定义字体系列。

背景

• bg-transparent: 设置背景为透明。
• bg-white - bg-black: 定义背景颜色。
• bg-gray-100 - bg-gray-900: 定义灰色背景颜色。
• bg-red-100 - bg-red-900: 定义红色背景颜色。
• bg-green-100 - bg-green-900: 定义绿色背景颜色。
• bg-blue-100 - bg-blue-900: 定义蓝色背景颜色。
• bg-yellow-100 - bg-yellow-900: 定义黄色背景颜色。
• bg-pink-100 - bg-pink-900: 定义粉色背景颜色。
• bg-purple-100 - bg-purple-900: 定义紫色背景颜色。
• bg-indigo-100 - bg-indigo-900: 定义靛蓝色背景颜色。
• bg-gray-light - bg-gray-dark: 定义浅灰、中灰和深灰的背景颜色。
• bg-gradient-to-t: 设置背景颜色从底部到顶部渐变。
• bg-gradient-to-b: 设置背景颜色从顶部到底部渐变。
• bg-gradient-to-l: 设置背景颜色从右边到左边渐变。
• bg-gradient-to-r: 设置背景颜色从左边到右边渐变。

边框

• border-transparent: 设置边框为透明。
• border-white - border-black: 定义边框颜色。
• border-gray-100 - border-gray-900: 定义灰色边框颜色。
• border-red-100 - border-red-900: 定义红色边框颜色。
• border-green-100 - border-green-900: 定义绿色边框颜色。
• border-blue-100 - border-blue-900: 定义蓝色边框颜色。
• border-yellow-100 - border-yellow-900: 定义黄色边框颜色。
• border-pink-100 - border-pink-900: 定义粉色边框颜色。
• border-purple-100 - border-purple-900: 定义紫色边框颜色。
• border-indigo-100 - border-indigo-900: 定义靛蓝色边框颜色。
• border-gray-light - border-gray-dark: 定义浅灰、中灰和深灰的边框颜色。
• border-solid: 设置边框样式为实线。
• border-dashed: 设置边框样式为虚线。
• border-dotted: 设置边框样式为点线。
• border-0 - border-8: 定义边框宽度。
• rounded-none - rounded-full: 定义圆角半径。
• rounded-t-none - rounded-tr-full: 定义上部分圆角半径。
• rounded-l-none - rounded-bl-full: 定义左部分圆角半径。
• rounded-r-none - rounded-br-full: 定义右部分圆角半径。
• rounded-b-none - rounded-br-full: 定义下部分圆角半径。

表格

• table-auto: 设置表格宽度自适应列宽。
• w-full: 设置表格宽度为 100%。
• border-collapse: 设置相邻单元格边框合并。

动画

• animate-spin: 旋转动画。
• transition-all: 过渡动画，所有属性的变化都将被平滑过渡。

响应式设计

Tailwind CSS 针对不同的屏幕尺寸提供了多个前缀，用于定义特定屏幕大小下的样式。以下是这些前缀：

• sm: 小尺寸屏幕（>=640px）。

• md: 中等尺寸屏幕（>=768px）。

• lg: 大尺寸屏幕（>=1024px）。

• xl: 超大尺寸屏幕（>=1280px）。

• 2xl: 更大的屏幕（>=1536px）。

  可以将上述 CSS 类名与前缀组合使用，以实现响应式设计。例如：

  text-lg sm:text-xl md:text-2xl
  

  这个例子表示在小尺寸屏幕上字体大小为“large”级别，中等尺寸屏幕上字体大小为“extra-large”级别，在大尺寸屏幕上字体大小为“2 extra-large”级别。

  总之，Tailwind CSS 提供了非常丰富的 CSS 类，可以帮助开发者快速实现各种样式效果，同时也方便了维护和扩展。