当前位置：首页 > news >正文

Tailwind CSS 小白快速入门速查手册

news 2025/10/18 12:00:36

你好！欢迎来到 Tailwind CSS 的世界。请记住一个核心思想：Tailwind 就是用一个个小积木 (CSS类) 来搭建你的网页样式。你不需要去想该给一个 div 取什么名字，只需要想“我需要它有边距、有圆角、有阴影”，然后把对应的积木（类名）放上去就行了。

基础语法结构

大部分类都遵循这个规律：[作用]-[值] 或 [作用]-[物体]-[值]。
例如: p-4 (padding: 4), bg-red-500 (background: red-500)。

一、布局、间距与尺寸 (Layout, Spacing & Sizing)

这是最常用、最重要的部分，决定了你页面的骨架。

1. 内边距 (Padding)

作用：给元素内部增加空间。
常用类:
- p-4：四边都有内边距。
- px-4：仅 水平方向 (左、右) 有内边距。
- py-4：仅 垂直方向 (上、下) 有内边距。
- pt-4：仅上边 (top) 有内边距。
- pr-4：仅右边 (right) 有内边距。
- pb-4：仅下边 (bottom) 有内边距。
- pl-4：仅左边 (left) 有内边距。
说明：数字 4 代表 1rem (通常是 16px)。数字越大，边距越大。常用的值有 0, 1, 2, 4, 6, 8, 12, 16, 24 等。

2. 外边距 (Margin)

作用：给元素外部增加空间，让它和别的元素隔开。
常用类：和内边距规则一样，只是把 p 换成 m。
- m-4：四边都有外边距。
- mx-4：水平外边距。
- my-4：垂直外边距。
- …等等
特殊用法：
- mx-auto：水平居中！这是一个超级常用的类，必须记住。它会让元素在父容器里水平居中。

3. 元素间距 (Space Between)

作用：给一组并排的子元素之间添加间距，非常方便。
常用类:
- space-x-4：为水平排列的子元素之间添加 1rem 的水平间距。
- space-y-4：为垂直排列的子元素之间添加 1rem 的垂直间距。

示例:

<!-- 这三个按钮之间会自动产生间隔，你不需要给每个按钮单独加 margin -->
<div class="flex space-x-4"><button>按钮1</button><button>按钮2</button><button>按钮3</button>
</div>

4. 宽度 (Width)

作用：控制元素的宽度。
常用类:
- w-1/2, w-1/3, w-2/3：百分比宽度 (50%, 33.3%, 66.6%)。
- w-64：固定宽度 (64 代表 16rem)。
- w-full：宽度 100%。
- w-screen：宽度占满整个屏幕。
- w-auto：宽度由内容决定。
- max-w-md, max-w-lg：设置最大宽度，常用于文章或卡片容器，防止内容在宽屏上变得太宽。

5. 高度 (Height)

作用：控制元素的高度。
常用类：规则和宽度类似，把 w 换成 h。
- h-16：固定高度。
- h-full：高度 100%。
- h-screen：高度占满整个屏幕，常用于制作全屏页面。
- h-auto：高度由内容决定。

二、网页布局双雄：Flexbox 与 Grid

现代网页布局几乎离不开它俩。

1. Flexbox (一维布局)

核心思想：处理单行或单列的元素对齐。像排队一样。
常用类:
- flex：启用 Flexbox 布局。这是“总开关”。
- flex-row (水平排列), flex-col (垂直排列)。
- items-center：交叉轴居中 (比如，水平排列时，就是垂直居中)。
- justify-center：主轴居中 (比如，水平排列时，就是水平居中)。
- justify-between：两端对齐。
黄金组合: <div class="flex items-center justify-center">...</div> 实现完美居中。

2. Grid (二维布局)

核心思想：处理由行和列组成的网格布局。像电影院座位一样。
常用类:
- grid：启用 Grid 布局。这也是“总开关”。
- grid-cols-3：定义一个 3 列 的网格。数字可以改，grid-cols-1, grid-cols-2 … grid-cols-12。
- grid-rows-2：定义一个 2 行 的网格。
- gap-4：在所有网格项目之间创建间隙。
- col-span-2：让一个子元素占据 2 列的宽度。

典型场景：照片墙、文章列表卡片。

<!-- 一个三列的卡片布局，每个卡片间有空隙 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"><div class="bg-sky-200 p-4">卡片 1</div><div class="bg-sky-200 p-4">卡片 2</div><div class="bg-sky-200 p-4">卡片 3</div><div class="bg-sky-200 p-4 md:col-span-2">这个卡片在平板上会占据两列</div>
</div>

三、文字与排版 (Typography)

1. 字体大小 (Font Size)

text-xs, text-sm, text-base (默认大小), text-lg, text-xl, text-2xl… text-9xl

2. 字体粗细 (Font Weight)

font-thin, font-light, font-normal (默认), font-medium, font-semibold, font-bold, font-black

3. 文字颜色 (Text Color)

结构：text-[颜色]-[深浅度]
常用类:
- text-black, text-white
- text-gray-500 (灰色，500是深浅度，数字越大越深)
- text-red-500
- text-blue-600
- text-green-500

4. 文字对齐 (Text Alignment)

text-left, text-center, text-right

四、背景、边框与阴影 (Backgrounds, Borders & Shadows)

1. 背景颜色 (Background Color)

结构：bg-[颜色]-[深浅度]
常用类：和文字颜色规则一样。
- bg-white
- bg-gray-100 (常用于页面背景或卡片背景)
- bg-blue-500 (常用于按钮)

2. 边框 (Borders)

用法：通常需要组合使用。
- border：给四边添加 1px 宽的边框。
- border-2, border-4：改变边框宽度。
- border-gray-300：设置边框颜色。
- border-t-2：只给上边添加 2px 宽的边框。

示例:

<div class="border-2 border-dashed border-sky-500">这是一个天蓝色的2px虚线边框
</div>

3. 圆角 (Border Radius)

作用：让元素的角变得圆润。
常用类:
- rounded-sm (小圆角)
- rounded (标准圆角)
- rounded-md, rounded-lg, rounded-xl… (越来越大的圆角)
- rounded-full：完全圆角。如果元素是正方形，会变成圆形；如果是长方形，会变成胶囊形状。

4. 阴影 (Box Shadow)

作用：给元素添加立体感。
常用类:
- shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl
- shadow-none：移除阴影。

五、元素定位与层级 (Positioning & Z-Index) (新增！)

这个非常重要，用于制作弹窗、悬浮按钮等效果。

1. 定位 (Position)

作用：让元素脱离正常的文档流，可以自由放置。
常用类:
- relative：相对定位。通常用在父元素上，为子元素的 absolute 定位提供一个“锚点”。
- absolute：绝对定位。相对于最近的 relative 父元素进行定位。
- fixed：固定定位。相对于浏览器窗口定位，滚动页面时位置不变（例如，网站顶部的固定导航栏）。
- sticky：粘性定位。正常时随页面滚动，到达屏幕顶部时会“粘”在那里（例如，侧边栏的目录）。
位置控制:
- top-0, left-0, right-0, bottom-0：配合定位使用，控制元素贴近哪条边。

示例：通知角标

<!-- 父元素设为 relative -->
<div class="relative inline-block"><p>图标🔔</p><!-- 子元素设为 absolute，并定位到右上角 --><span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</div>

2. 层级 (Z-Index)

作用：控制重叠元素的显示顺序，就像 Photoshop 的图层。数值越大，越靠上显示。
常用类: z-0, z-10, z-20, z-30, z-40, z-50。

六、动态效果与交互 (Transitions & Transforms) (新增！)

让你的网页“动”起来，感觉更高级！

1. 过渡 (Transitions)

作用：让 CSS 属性的变化过程变得平滑，而不是瞬间完成。
常用类:
- transition：应用一个默认的、平滑的过渡效果到所有变化的属性上。
- duration-300：指定过渡效果持续 300毫秒。数字越大，动画越慢。
- ease-in-out：指定动画的速度曲线（慢-快-慢），感觉更自然。

2. 变换 (Transforms)

作用：对元素进行移动、缩放、旋转。通常与 hover: 结合使用。
常用类:
- hover:scale-110：鼠标悬停时，放大到 110%。
- hover:rotate-12：鼠标悬停时，旋转 12 度。
- hover:translate-x-2：鼠标悬停时，向 右移动 0.5rem。

示例：会“呼吸”的卡片

<!-- transition 和 duration 放在默认状态，hover 时只写变化后的状态 -->
<div class="bg-white p-4 rounded-lg shadow-md transition duration-300 ease-in-outhover:shadow-xl hover:scale-105"><h3 class="font-bold">鼠标放上来试试</h3><p>我会平滑地变大并浮起来！</p>
</div>

七、显示与隐藏 (Display) (新增！)

block: 元素显示为块级，占满整行。
inline-block: 像单词一样排列，但可以设置宽高。
inline: 像单词一样排列，不能设置宽高。
hidden：隐藏元素 (display: none;)。这个超级常用，比如用 JavaScript 来切换一个元素的显示和隐藏。

八、交互与状态 (Interactivity & States)

作用：当用户与元素交互时（如鼠标悬停、点击），改变样式。
用法：在任何工具类前面加上状态前缀，如 hover:。
常用前缀:
- hover:：鼠标悬停时。
- focus:：元素获得焦点时 (例如，输入框被点击)。
- active:：元素被激活时 (例如，按钮被按住)。
- disabled:：元素被禁用时。
示例：一个交互式按钮
```
<button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-700focus:outline-none focus:ring-2 focus:ring-blue-400">点我
</button>
```
- 默认是蓝色背景。
- hover:bg-blue-700：鼠标放上去时，背景变成深蓝色。
- focus:ring-2 ...：当用键盘 Tab 键选中它时，会出现一个蓝色的光圈，提升可访问性。

九、响应式设计 (Responsive Design)

作用：让你的页面在不同尺寸的设备（手机、平板、电脑）上看起来都很好。
用法：在任何工具类前面加上断点前缀，如 md:。
核心思想：移动端优先。没有前缀的类默认应用于所有尺寸（即手机尺寸）。
常用前缀:
- sm: (small, 640px以上生效)
- md: (medium, 768px以上生效)
- lg: (large, 1024px以上生效)
- xl: (extra large, 1280px以上生效)

示例：一个响应式布局

<!-- 在手机上是垂直排列，在平板(md)及以上设备上是水平排列 -->
<div class="md:flex md:space-x-4"><div class="bg-red-200 p-4">侧边栏</div><div class="bg-green-200 p-4 w-full">主内容区</div>
</div>