🤠前端开发过程中记录

1. 设置 flex 方向：
• flex-row: 水平排列（默认）
• flex-row-reverse: 反向水平排列
• flex-col: 垂直排列
• flex-col-reverse: 反向垂直排列

2. 设置 flex 项目的对齐方式：
• justify-start: 从头部开始对齐
• justify-center: 居中对齐
• justify-end: 从尾部开始对齐
• justify-between: 两端对齐，项目之间的间距相等
• justify-around: 每个项目两侧的间距相等
• justify-evenly: 项目之间的间距相等

3. 设置 flex 项目的对齐方式（交叉轴）：
• items-start: 从交叉轴的起点对齐
• items-center: 在交叉轴上居中对齐
• items-end: 从交叉轴的终点对齐
• items-baseline: 基线对齐
• items-stretch: 拉伸以填满容器（默认）

4. 设置 flex 项目的自身对齐方式：
• self-auto: 默认值
• self-start: 从交叉轴的起点对齐
• self-center: 在交叉轴上居中对齐
• self-end: 从交叉轴的终点对齐
• self-stretch: 拉伸以填满容器

5. 设置 flex 项目的排列顺序：
• order-1, order-2, order-3, ..., order-last: 设置 flex 项目的显示顺序

6. 设置 flex 项目的占比：
• flex-1: 项目将占据剩余的所有空间
• flex-auto: 项目将根据内容自动调整大小
• flex-initial: 项目将根据内容的大小进行调整，但不会占据剩余空间
• flex-none: 项目不会增长或缩小

布局

1. Flexbox:
• flex: 使元素成为 flex 容器。
• flex-row, flex-col: 设置 flex 方向。
• justify-start, justify-center, justify-end: 主轴对齐方式。
• items-start, items-center, items-end: 交叉轴对齐方式。

2. Grid:
• grid: 使元素成为网格容器。
• grid-cols-1, grid-cols-2, grid-cols-3, ...: 设置列数。
• gap-1, gap-2, gap-4, ...: 设置网格间距。

3. Spacing:
• m-4: 设置外边距。
• p-4: 设置内边距。
• space-x-4, space-y-4: 设置 flex 项目之间的间距。

排版

1. 文本:
• text-left, text-center, text-right: 文本对齐方式。
• text-sm, text-base, text-lg, ...: 设置文本大小。
• font-thin, font-normal, font-bold, ...: 设置字体粗细。

2. 颜色:
• text-red-500, text-blue-500, ...: 设置文本颜色。
• bg-red-500, bg-blue-500, ...: 设置背景颜色。

3. 字体:
• font-sans, font-serif, font-mono: 设置字体系列。
• leading-tight, leading-normal, leading-loose: 设置行高。

背景

1. 背景颜色:
• bg-white, bg-gray-100, bg-blue-500, ...: 设置背景颜色。

2. 背景图片:
• bg-cover, bg-contain: 设置背景图片的大小。
• bg-center, bg-top, bg-bottom: 设置背景图片的位置。

边框

1. 边框样式:
• border, border-2, border-4: 设置边框宽度。
• border-solid, border-dashed, border-dotted: 设置边框样式。

2. 边框颜色:
• border-gray-500, border-red-500, ...: 设置边框颜色。

3. 边框圆角:
• rounded, rounded-lg, rounded-full: 设置边框圆角。

大小

1. 宽度:
• w-1/2, w-1/3, w-full, ...: 设置宽度。
• min-w-0, min-w-full: 设置最小宽度。
• max-w-xs, max-w-sm, max-w-full: 设置最大宽度。

2. 高度:
• h-1/2, h-full, h-screen, ...: 设置高度。
• min-h-0, min-h-full: 设置最小高度。
• max-h-xs, max-h-sm, max-h-full: 设置最大高度。

其他实用类

1. 显示与隐藏:
• block, inline-block, inline: 设置显示类型。
• hidden: 隐藏元素。

2. 定位:
• relative, absolute, fixed, sticky: 设置定位方式。
• top-0, right-0, bottom-0, left-0: 设置位置。

3. 阴影:
• shadow, shadow-md, shadow-lg: 设置阴影效果。

4. 过渡与动画:
• transition, duration-150, ease-in-out: 设置过渡效果。
• animate-spin, animate-ping: 设置动画效果。

布局（续）

1. Flexbox（续）:
• flex-wrap, flex-nowrap, flex-wrap-reverse: 设置 flex 项目是否换行。
• flex-grow, flex-shrink: 设置 flex 项目的增长和收缩。
• flex-none: 禁止 flex 项目增长和收缩。
• order-first, order-last, order-none, order-1, order-2, ...: 设置 flex 项目的排列顺序。

2. Grid（续）:
• grid-rows-1, grid-rows-2, ...: 设置行数。
• col-span-1, col-span-2, ...: 设置列跨度。
• row-span-1, row-span-2, ...: 设置行跨度。
• auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr: 设置自动列大小。
• auto-rows-auto, auto-rows-min, auto-rows-max, auto-rows-fr: 设置自动行大小。

间距（续）

1. Margin（外边距）:
• m-0, m-1, m-2, ...: 设置所有方向的外边距。
• mt-0, mr-0, mb-0, ml-0: 单独设置上、右、下、左外边距。
• mx-0, my-0: 分别设置水平和垂直方向的外边距。

2. Padding（内边距）:
• p-0, p-1, p-2, ...: 设置所有方向的内边距。
• pt-0, pr-0, pb-0, pl-0: 单独设置上、右、下、左内边距。
• px-0, py-0: 分别设置水平和垂直方向的内边距。

排版（续）

1. 文本颜色:
• text-gray-100, text-gray-200, ...: 设置不同深浅的灰色文本颜色。
• text-opacity-50, text-opacity-75: 设置文本颜色的不透明度。

2. 文本修饰:
• underline, line-through, no-underline: 设置文本装饰。
• uppercase, lowercase, capitalize, normal-case: 设置文本变换。

3. 文本阴影:
• text-shadow, text-shadow-md, text-shadow-lg: 设置文本阴影（需要插件支持）。

背景（续）

1. 背景渐变:
• bg-gradient-to-t, bg-gradient-to-r, bg-gradient-to-b, bg-gradient-to-l: 设置背景渐变方向。
• from-blue-500, via-purple-500, to-pink-500: 设置渐变颜色。

2. 背景混合模式:
• bg-blend-normal, bg-blend-multiply, bg-blend-screen, ...: 设置背景混合模式。

边框（续）

1. 边框宽度:
• border-t-4, border-r-4, border-b-4, border-l-4: 单独设置某一边的边框宽度。

2. 边框颜色透明度:
• border-opacity-50, border-opacity-75: 设置边框颜色的不透明度。

大小（续）

1. 百分比宽度和高度:
• w-1/4, w-1/3, w-2/3, w-3/4: 设置宽度为百分比。
• h-1/4, h-1/3, h-2/3, h-3/4: 设置高度为百分比。

其他实用类（续）

1. 显示与隐藏（续）:
• inline-flex: 使元素成为 inline flex 容器。

2. 定位（续）:
• inset-0, inset-y-0, inset-x-0: 设置元素的位置。
• z-0, z-10, z-20, ...: 设置 z-index。

3. 阴影（续）:
• shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl: 设置不同强度的阴影。
• shadow-inner: 设置内阴影。

4. 过渡与动画（续）:
• transition-colors, transition-opacity, transition-transform: 设置不同类型的过渡效果。
• ease-linear, ease-in, ease-out, ease-in-out: 设置过渡的缓动函数。

5. 过滤器:
• filter, filter-none: 启用或禁用过滤器。
• blur-sm, blur-md, blur-lg: 设置模糊效果。
• brightness-50, brightness-75, brightness-100, ...: 设置亮度。
• contrast-50, contrast-75, contrast-100, ...: 设置对比度。
• grayscale, invert, sepia: 设置灰度、反色、和怀旧效果。

6. 变换:
• transform, transform-none: 启用或禁用变换。
• scale-50, scale-75, scale-100, ...: 设置缩放。
• rotate-45, rotate-90, rotate-180, ...: 设置旋转。
• translate-x-0, translate-x-1, translate-x-2, ...: 设置平移。