直接学 Tailwind CSS 可行但需先掌握基础 CSS，它用预设 class 重组开发流程；PostCSS 是其依赖的 AST 处理管道；工具链卡点多源于配置疏漏而非语法本身。
该不该直接学 Tailwind CSS？
学完 display、flex、grid、position 和选择器优先级后，立刻上手 Tailwind 是可行的，但容易卡在「为什么这个 class 要这么写」和「怎么覆盖默认样式」上。它不是替代 CSS，而是用预设 class 重组 CSS 编写流程。
实操建议：
- 先用
create-react-app或vite搭个空项目，按官方文档跑通tailwindcss init+@tailwind base三行指令，别跳过postcss配置 - 别一上来就开
jit: true（现在叫content配置），先手动写几个bg-blue-500、hover:scale-105看是否生效，确认 class 真被识别了 - 遇到样式不生效，优先检查浏览器开发者工具里对应元素是否真渲染出了那个 class —— 很多时候是模板没更新、JS 没触发重绘，不是 Tailwind 问题
PostCSS 是什么？为什么装 Tailwind 就得配它？
PostCSS 不是构建工具，也不是 CSS 预处理器，它是个「CSS AST 处理管道」：把 CSS 字符串解析成树，再让插件一层层加工，最后吐出新 CSS。Tailwind 的核心就是靠 postcss-tailwindcss 插件把 @tailwind 指令替换成实际规则。
常见误解：
立即学习“前端免费学习笔记（深入）”；
- 以为删掉
postcss.config.js改用 Vite 内置 PostCSS 就能省事 —— 实际上 Vite 5+ 默认不自动加载项目根目录的 PostCSS 配置，必须显式配置css.postcss字段 - 在
build阶段发现 utility class 消失了，大概率是content配置路径没覆盖到你的 HTML/JSX 文件，比如写了"./src/**/*.{js,ts,jsx,tsx}"却漏了.vue或.svelte - 想临时加一个响应式断点，别改
tailwind.config.js的theme.screens—— 先试试md:max-w-2xl这种现成组合，80% 场景够用
要不要学 Sass/Less？还是直接跳到 CSS-in-JS？
如果目标是进团队写业务，Sass 仍有真实存在感：很多老项目用 @mixin 封装栅格、用 @import 拆文件、靠 & 写嵌套。但它解决的问题（变量、嵌套、复用）现在原生 CSS 也能做：:root 自定义属性、env()、clamp()、container query。
更关键的是取舍点：
- 学 Sass 前先问自己：你是否要维护一个 5 年以上的后台系统？如果是，
_variables.scss和_mixins.scss还会出现在 daily commit 里 - CSS-in-JS（如
styled-components或Emotion）适合组件粒度强、主题切换频繁的场景，但服务端渲染（SSR）时要注意useInsertionEffect的执行时机，否则首屏可能闪动 - 真正值得花半天搞懂的是
CSS Custom Properties动态换肤方案：用 JS 改document.documentElement.style.setProperty('--primary', '#3b82f6')，比任何框架都轻量且兼容性好（IE11 除外）
哪些 CSS 工具链细节最容易拖慢上线节奏？
不是语法不会，而是部署时才发现某些东西根本没生效。几个高频卡点：
-
prefers-color-scheme媒体查询在 Chrome DevTools 里要手动打开「Rendering」面板 → 勾选「Emulate CSS prefers-color-scheme」，否则切暗色模式永远看不到效果 - 用
aspect-ratio做卡片比例控制时，若子元素含img且没设height: 100%，图片会溢出容器 —— 这不是 bug，是aspect-ratio只作用于容器自身尺寸计算 - 部署后字体变回 Times New Roman？检查
@font-face中的src路径是否为相对路径，CI/CD 打包后静态资源路径变了，要用url(/fonts/xxx.woff2)而非url(../fonts/xxx.woff2)
工具链越厚，离「写一行 CSS 看一眼效果」就越远。先确保本地 localhost:3000 能稳定复现问题，再怀疑是构建配置或 CDN 缓存惹的祸。
