关键css是浏览器渲染首屏必需的样式；tailwind通过content配置+jit仅生成用到的类，但不自动分离关键css，需借助critical等工具提取并内联。

什么是关键CSS，Tailwind里怎么识别它

关键CSS（Critical CSS）不是指“最重要的类”，而是浏览器渲染首屏时必须加载并解析的那部分样式。Tailwind本身不区分关键/非关键，它生成的完整CSS文件默认全量阻塞渲染。真正决定哪些是关键CSS的，是你在content配置中声明的路径里实际用到的工具类——JIT模式下，只有这些类会被生成；但它们仍会打包进一个main.css里，未经拆分。

用content + JIT控制输出体积，但还不够

光靠content扫描和JIT编译只能防止未使用类膨胀，不能解决首屏阻塞问题。常见错误是把所有页面、组件、甚至node_modules里的模板都塞进content数组，导致生成的CSS远超15KB（Gzip后）阈值。

• 只保留真实运行时会访问的路径，比如./src/pages/**/*.{tsx,jsx}、./src/layouts/**/*.{tsx,jsx}，避免./src/**/*这种宽泛写法
• 服务端渲染（SSR）项目需额外加入./src/app/**/*.{ts,tsx}（Next.js App Router）或./src/routes/**/*.{svelte,astro}等对应路径
• 如果用了MDX或富文本组件，确保其HTML字符串也被content覆盖，否则其中的class不会被识别

手动提取关键CSS：用postcss + critical插件

Tailwind不内置关键CSS提取能力，得靠PostCSS生态补足。核心思路是：先生成完整CSS → 用真实URL或HTML片段模拟首屏 → 提取匹配的规则 → 内联到中。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 安装critical和postcss-cli：npm install critical postcss-cli --save-dev
• 准备一个首屏HTML快照（如critical.html），确保包含首屏真实DOM结构和class名
• 执行提取命令：npx critical --base ./dist --html critical.html --css ./dist/main.css --inline > ./dist/index-critical.html
• 注意：提取结果依赖HTML结构准确性，动态渲染内容（如React hydration前的空容器）会导致漏提

Edge部署时，用Vercel的dynamic + static分离策略

Vercel边缘网络能自动缓存静态资源，但无法自动判断哪段CSS该优先加载。你需要主动配合它的内容分发逻辑：

• 把main.css拆成两份：critical.css（仅含首屏类，non-critical.css（其余）
• 在tailwind.config.js中用content分组配置，例如用两个独立构建流程分别处理不同路径
• critical.css通过<link rel="preload">或内联方式注入；non-critical.css用<link rel="stylesheet" media="print" onload="this.media='all'">异步加载
• Vercel会将内联CSS和预加载资源视为高优先级，更快分发到边缘节点

真正容易被忽略的是：Tailwind的dark:变体、响应式断点（如md:）、以及@layer定义的样式，都会被计入关键CSS范围——哪怕用户根本没触发深色模式或没缩放窗口，只要HTML里写了dark:bg-gray-800或md:flex，它们就属于关键路径的一部分。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！