PostCSS 是基于插件的 CSS 处理工具链，非预处理器；Sass/Less 是自带语法的编译器。Tailwind 适合快速开发但中大型项目易致 HTML 冗长；Bootstrap 5 定制需重编译 Sass 源码；CSS-in-JS 的 SSR 须对齐 client/server cache 实例以避免 hydration 失败。
PostCSS 是什么，它和 Sass/Less 有什么根本区别
PostCSS 不是预处理器，而是一个用 JavaScript 插件转换 CSS 的工具链平台。它本身不提供变量、嵌套等语法糖，这些能力全靠插件（如 postcss-nested、postcss-custom-properties）按需加载。Sass 和 Less 则是自带完整语法的编译器，开箱即用但扩展性弱、升级路径僵硬。
实际选型时注意：如果你需要精细控制处理流程（比如只在生产环境压缩、开发中保留 sourcemap、按浏览器版本条件注入 autoprefixer 规则），PostCSS 更灵活；如果团队刚接触 CSS 预处理，Sass 的成熟文档和 IDE 支持更省心。
-
postcss.config.js中插件顺序敏感：例如postcss-import必须在postcss-nested之前，否则嵌套无法解析 @import 引入的文件 - Sass 的
@use语法（替代@import）不被 PostCSS 原生识别，需额外插件或改用sass官方编译器配合 PostCSS - Less 编译后输出的是标准 CSS，PostCSS 可以直接接在其后做二次处理；但 Sass 默认输出已带 vendor prefix，若再叠一层
autoprefixer可能导致重复加前缀
Tailwind CSS 是否适合中大型项目
Tailwind 是实用优先（utility-first）的 CSS 框架，生成大量原子类（如 text-lg、bg-blue-500），不是“写样式”，而是“组合类”。它适合快速原型、设计系统收敛、以及有明确设计语言约束的团队。
但在中大型项目里，容易出现两个现实问题：HTML 冗长难维护、定制成本高。
立即学习“前端免费学习笔记（深入）”；
- 启用
content配置扫描模板文件时，若路径漏配（如没包含src/pages/**/*.tsx），PurgeCSS 会误删未显式使用的类，导致样式丢失 - 自定义颜色/间距需修改
theme.extend并重载所有相关工具类，比如新增brand-red后，bg-brand-red、text-brand-red、border-brand-red不会自动产生，必须手动配置extend.colors+ 各类插件支持 - 与 CSS-in-JS 方案（如 Emotion）混用时，Tailwind 的
@layer规则可能因构建顺序错乱，导致@layer components中定义的类优先级低于组件内联样式
Bootstrap 5 的 CSS 自定义机制怎么真正生效
Bootstrap 5 移除了 jQuery 依赖，但保留了完整的 Sass 源码和可配置变量。关键在于：必须从源码重新编译，不能只覆盖 CSS 文件。
常见失败原因是直接修改 bootstrap.min.css 或用 !important 覆盖——这会导致后续升级困难且响应式断点失效。
- 核心变量（如
$primary、$grid-breakpoints）需在引入 Bootstrap 主文件前，在自定义_custom.scss中声明并@import，顺序错误将被默认值覆盖 - 使用
map-merge()扩展$theme-colors时，必须确保合并后重新赋值给变量，仅调用函数不生效：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; $theme-colors: map-merge($theme-colors, ("dark": #212529)); @import "bootstrap/scss/bootstrap"; - 如果用构建工具（Vite/Webpack）直接 import
"bootstrap/dist/css/bootstrap.min.css"，所有 Sass 变量定制都会被跳过，必须切换为 import 源码路径（如"bootstrap/scss/bootstrap.scss"）
CSS-in-JS 方案中 class 名混淆与服务端渲染的冲突点
Emotion、Styled Components 等方案在客户端能稳定生成唯一哈希 class，但服务端渲染（SSR）时若未对齐 client/server 的 cache 实例或 key 生成逻辑，会导致 hydration 失败：DOM diff 发现服务端 class 名（如 css-1a2b3c）和服务端 JS 渲染出的 class（css-4d5e6f）不一致，React 抛出 Prop `className` did not match 错误。
- Emotion 要求 SSR 时传入同一
cache实例给renderStylesToString()和客户端CacheProvider，否则哈希种子不同，class 名必然不一致 - Styled Components v6+ 弃用了
StyleSheetManager的disableVendorPrefixes属性，但 SSR 时仍需确保ServerStyleSheet和客户端StyleSheetManager使用相同target（如都指向document.head） - Next.js App Router 中，若在 Server Component 里使用
styled.div，会触发 “You're trying to use styled components in a server component” 错误——必须用"use client"标记含 styled 的模块
