<style>内联是Astro中开销最低的CSS引入方式，因其静态注入HTML、跳过Vite构建链路、不触发插件、无JS运行时依赖；而import CSS易因@tailwind等指令激活构建流程，导致JS开销回归。
直接在 .astro 文件里写 <style> 是目前 Astro 中开销最低、最可控的组件级 CSS 引入方式——它不走构建流程、不触发任何插件、不生成额外文件、也不依赖 JS 运行时。
为什么 <style> 内联比 import CSS 更轻量
Astro 对 <style> 块的处理是静态注入：构建时直接提取内容，作为 <style> 标签塞进 HTML 的 <head>，全程跳过 Vite 的 CSS 处理链路（比如 PostCSS、Tailwind 插件、CSS 模块解析等）。而哪怕一行 import '../styles/card.css';，只要该文件里含 @tailwind、@layer 或被 @astrojs/tailwind 监听路径匹配到，整个 Tailwind 构建流程就会启动，JS 开销立刻回归。
-
<style>内容默认作用域隔离，类名不会泄露，无需手动加scoped - 不支持
@import url(...)或background: url(...)——这些会触发额外网络请求或构建时解析，破坏“零开销”前提 - 媒体查询、伪类、嵌套（仅限一级）都可直接写，Astro 不做转换，原样输出
什么时候不该用 <style> 内联
当样式需要跨组件复用、依赖设计系统变量（如 CSS 自定义属性）、或包含大量响应式断点嵌套时，<style> 就会变得难维护。此时应退回到纯 CSS 文件 + import，但必须严格满足两个条件：
- CSS 文件里不能出现任何构建期指令：
@tailwind、@layer、@theme、@apply都不行 - 不能链式
@import其他 CSS；也不能用url()引用字体、图片等外部资源（否则 Vite 会将其识别为 asset 依赖并介入处理） - 导入路径不能落入 Astro 插件的监听范围（例如
src/styles/tailwind.css若被@astrojs/tailwind配置为入口，就必然触发 JS 开销）
class:list 是合并动态类名的安全边界
组件接收父级传入的样式类时，不能直接拼字符串（易出空格/重复/undefined），也不能用 class={...} 覆盖默认类。正确姿势是用 class:list 指令：
立即学习“前端免费学习笔记（深入）”；
---
const { class: className, ...rest } = Astro.props;
---
<div class:list={[
"bg-white rounded-lg p-4 shadow-sm",
className
]} {...rest}>
<slot />
</div>
它自动过滤 null、undefined、空字符串，并支持数组和对象语法（如 { active: isActive }）。这个指令本身无运行时成本——Astro 在构建期就完成了类名归一化，最终输出仍是静态 HTML。
真正容易被忽略的是：哪怕只在某个 .css 文件里写了一行 @tailwind base，或者把文件放在了插件默认扫描路径下，Astro 就会悄悄启用整个 CSS 构建管道。所谓“极低开销”，本质是对构建链路的精确规避，而不是语法层面的简单与否。
