想用 TypeScript 写样式又零运行时：vanilla-extract 把 CSS 编译成静态文件
用 TypeScript 写样式、又不想在浏览器里跑一套样式引擎，vanilla-extract 刚好对口。它让你在 .css.ts 文件里用类型安全的写法描述样式，构建时把这些全编译成普普通通的静态 CSS 文件，运行时什么都不剩，调试还能直接看到原生 CSS。
它解决什么问题
想用 TS 的类型与提示写样式，但厌_runtime CSS-in-JS 的开销。
运行时样式引擎拖慢首屏，还难定位生成的类名。
希望样式产物是干净的原生 CSS，方便排查。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| CSS-in-TS | 用 TypeScript 写样式，类型与补全都在 |
| 零运行时 | 构建期编译成静态 CSS，浏览器无样式计算 |
| 作用域隔离 | 类名自动加哈希，避免全局样式冲突 |
| 变量与主题 | 用 CSS 变量做主题，明暗切换方便 |
| 原生产物 | 输出就是普通 CSS，调试直观可控 |
| 开源可查 | MIT 协议开源，源码公开易排查 |
它把「写样式的地方」和「样式最终形态」分开
vanilla-extract 的核心理念是：开发时用 TypeScript 享受类型与组合的乐趣，但交付给浏览器的是纯静态 CSS。你在 .css.ts 里声明 style、theme、vars，构建工具（配合它的插件）会扫描这些文件、生成带哈希作用域的 CSS，并替换掉组件里的引用。整个过程浏览器端完全不参与样式计算。
它是通过 npm 安装的样式方案，不是组件库，也不是复制源码，需要先接好对应打包器的插件（如 Vite、webpack）。产物虽是静态 CSS，但默认不是原子化——类名按模块作用域生成，去重粒度与 Panda/Tailwind 不同。适合重视「原生 CSS 产物 + TS 开发体验」的团队。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Panda CSS | 开源免费 | 构建期原子化 CSS，同样零运行时，但偏原子类。 |
| CSS Modules | 开源免费 | 原生作用域 CSS，但少了 TS 类型与组合能力。 |
| styled-components | 开源免费 | 运行时 CSS-in-JS，开发顺手但有运行时成本。 |
谁适合用
- 想用 TS 写样式、拒绝运行时开销的前端
- 希望产物是干净原生 CSS 的团队
- 在意样式作用域隔离、怕全局污染的开发者
怎么开始
- 安装 @vanilla-extract/css 及对应打包器插件。
- 新建 .css.ts 文件，用 style、vars 描述样式。
- 在组件里引入生成的样式并挂到元素上。
- 运行构建，确认样式被编译成静态 CSS。
- 用浏览器开发者工具核对生成类名与效果。
常见问题
依赖 Tailwind 吗？
不依赖。它是独立的 CSS-in-TS 方案，可与 Tailwind 并存但非必须。
是装库还是复制源码？
是装库，通过 npm 引入，并需配置打包器插件。
绑定某个框架吗？
不绑定框架，但需配合支持它的构建工具使用。
能商用吗？
能。以 MIT 开源协议发布，可自由用于商业项目。
授权与合规
vanilla-extract 以 MIT 开源协议发布，源码公开，可自由用于商业与个人项目。 官网：vanilla-extract.style。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
↓ 获取资源
点击按钮直接前往资源页面。
