服务端2月17日 13:47
Tailwind CSS Flexbox 布局类怎么用？常见 Flex 布局如何写？Tailwind CSS 里做 Flexbox 布局，核心就是把 CSS 的 `display: flex`、`flex-direction`、`justify-content`、`align-items`、`flex-wrap`、`flex-grow` 等属性换成原子类。它适合做一维布局：一行导航、一列菜单、左右内容区、按钮组、卡片内部对齐都很顺手。
如果页面要同时控制行和列，比如完整商品列表、后台仪表盘、复杂二维卡片墙，通常 Grid 更省心；如果只是沿着一个方向排列元素，Flex 更直接。
## 启用 Flex：flex 和 inline-flex 有什么区别？
最常用的两个...
乐闻
服务端2月17日 14:20
TailwindCSS 响应式设计怎么写？断点、容器查询和测试怎么做？TailwindCSS 做响应式设计，不是给每个设备单独写一套样式，而是先写移动端默认样式，再在需要变宽时用断点前缀覆盖。没有前缀的类会一直生效；`sm:`、`md:`、`lg:`、`xl:`、`2xl:` 这类前缀表示“从这个宽度开始改成另一种样子”。
## 默认断点怎么理解？
TailwindCSS 默认断点是 mobile-first，也就是基于 `min-width`：`sm` 640px，`md` 768px，`lg` 1024px，`xl` 1280px，`2xl` 1536px。
```html
<div class="w-full md:w-1/2 lg:w-1/3...服务端2月17日 14:21
TailwindCSS 主题如何配置？v3 与 v4 怎么定制？## 什么时候需要定制 TailwindCSS 主题？
TailwindCSS 默认提供了颜色、字号、间距、断点、圆角、阴影、动画等一整套设计基础。小项目直接用默认值就够了，但只要项目开始有品牌色、统一字号、暗色模式、多端断点，或者多个仓库共享同一套设计规范，就应该把这些东西沉淀到主题配置里。
主题配置的价值不是“把 CSS 写到另一个地方”，而是把设计规则变成可复用的工具类。比如按钮统一使用品牌主色，卡片统一使用一套圆角和阴影，页面间距统一使用固定 token，团队成员写出来的页面就不会各有各的风格。
## v3：从 tailwind.config.js 开始
Tailwind...服务端2月17日 14:22
TailwindCSS 和 Bootstrap、CSS-in-JS 有什么区别？## 先说结论
TailwindCSS、Bootstrap 和 CSS-in-JS 解决的是同一个问题：怎么写样式。但它们的出发点完全不同。
Bootstrap 更像一套现成 UI 套件，按钮、表单、栅格、弹窗都有默认方案，适合快速搭页面。TailwindCSS 更像一盒低层级样式积木，用大量原子类组合出界面。CSS-in-JS 则把样式放进 JavaScript 或组件逻辑里，适合样式强依赖状态、主题和运行时变量的场景。
## 三者的核心差异是什么？
| 方案 | 样式主要写在哪里 | 核心特点 | 典型场景 |
|---|---|---|---|
| Bootstrap | ...服务端2月17日 14:20
Tailwind CSS JIT 编译器是什么？有哪些优势？Tailwind CSS 的 JIT（Just-in-Time）编译器可以理解成“看到你用了哪个类，就生成哪个 CSS”。它不会提前把所有可能的工具类一次性打包出来，而是扫描项目里的模板、组件和脚本文件，只为实际出现的类名生成样式。
需要纠正一个常见说法：JIT 在 Tailwind CSS v2.1 作为预览功能引入，当时需要手动配置 `mode: 'jit'`；从 Tailwind CSS v3 开始，JIT 已经成为默认编译方式，不再需要写 `mode: 'jit'`。
## JIT 编译器是怎么工作的？
Tailwind 的 JIT 流程大致分成三步：扫描 `content...服务端2月17日 14:23
TailwindCSS 如何实现复杂布局？Flex、Grid 与响应式怎么选？TailwindCSS 做复杂布局，关键不是背更多 class，而是先判断页面属于哪类布局：一维排布用 Flex，二维排布用 Grid，需要脱离文档流时再用定位。很多布局写乱，往往不是 TailwindCSS 的问题，而是一开始就把工具选错了。
比如导航栏、按钮组、表单行，更适合 Flex；商品卡片墙、仪表盘、圣杯布局，更适合 Grid；浮动徽标、固定底栏、吸顶标题，则交给 relative、absolute、fixed、sticky。
## 先判断：Flex 还是 Grid？
一句话判断：**Flex 解决一条轴上的排列，Grid 解决行和列同时存在的布局。**
如果只关心元素...服务端2月17日 14:29
TailwindCSS @apply 怎么用？哪些场景不该用？TailwindCSS 的 `@apply` 用来把已有的工具类写进 CSS 选择器里。它适合抽取少量重复样式，比如按钮、表单控件、第三方组件覆盖；但不适合把所有 Tailwind 工具类都“搬回 CSS”。如果大量使用 `@apply`，最后很容易写成一套披着 Tailwind 外衣的传统 CSS，还会带来样式膨胀、优先级混乱和维护成本。
## @apply 是什么？
一句话：`@apply` 可以在 CSS 中复用 Tailwind 工具类。
```css
.btn-primary {
@apply rounded-md bg-blue-600 px-4 py-2 font...服务端2月17日 14:30
TailwindCSS 任意值语法如何使用？常见场景和坑有哪些？TailwindCSS 的任意值语法（Arbitrary Values）适合处理“只出现一次、但默认工具类没有覆盖”的样式。核心写法是把具体值放进方括号里，比如 `w-[372px]`、`text-[#1f2937]`、`mt-[18px]`。这样不用临时写 CSS，也不用为了一个特殊尺寸去改 `tailwind.config.js`。
不过它不是“想写什么都往方括号里塞”。用得好，代码更快落地；用得乱，项目里会到处都是魔法值，后面维护很难受。
## 基本写法是什么？
```html
<div class="w-[372px] bg-[#f5f5f5] text-[15px] p-...服务端2月17日 14:31
TailwindCSS 暗色模式如何实现？v3 和 v4 有什么区别？TailwindCSS 做暗色模式，核心不是写两套 CSS，而是用 `dark:` 变体给同一个元素补一组暗色样式。真正容易踩坑的地方在于：你的项目用 Tailwind v3 还是 v4？暗色状态由系统偏好决定，还是由用户手动切换？这两个问题先想清楚，后面的代码会简单很多。
## 先决定暗色模式由谁触发
Tailwind 的暗色模式大致有两种思路：跟随系统，或由用户手动切换。如果只是文档页，跟随系统通常够用；如果是后台、SaaS、博客、控制台这类长期使用的产品，建议支持手动切换，并允许用户选择“跟随系统”。
## Tailwind v3 怎么配置 darkMode？
在 Tail...服务端2月17日 14:32
TailwindCSS 动画和过渡如何实现？TailwindCSS 做动画主要分两类：一种是用 `animate-*` 直接套关键帧动画，比如加载、提示、状态闪烁；另一种是用 `transition-*` 处理状态变化，比如 hover、focus、active 时的颜色、位移、透明度变化。前者适合“自己一直动”的效果，后者适合“用户触发后平滑变化”的效果。
## 内置动画怎么用
TailwindCSS 默认提供了几个常用动画，日常 UI 里够用一大半。
```html
<!-- 旋转：常用于 loading 图标 -->
<div class="animate-spin rounded-full h-8 w-8 borde...