样式与组件

Svelte、Astro、Eleventy 都支持 组件化 + 样式隔离，并与 Tailwind 广泛集成。本节聚焦 scoped CSS、全局策略、Tailwind 配置，并与 html-css-essentials 的布局基础、Next 样式课 对照。

学习目标

• 使用 Svelte / Astro 的 scoped <style>
• 在 Astro 或 SvelteKit 中接入 Tailwind
• 说清「内容组件」与「交互岛」的样式边界

Scoped CSS

Svelte（编译为唯一 attribute）：

<style>
  .card { padding: 1rem; border-radius: 8px; }
</style>
<div class="card">...</div>

Astro 同样默认 scoped；需穿透子组件时用 :global(.prose h2)。

方式	适用
Scoped	单组件布局、避免泄漏
:global	富文本 MD 内部标签
CSS Modules	团队规范要求时
Tailwind utility	快速原型、设计系统

vue-essentials 的 scoped 与 Svelte 体验接近；react-essentials 常配合 CSS Modules 或 Tailwind，无内置 scoped。

Tailwind 集成

SvelteKit / Astro 官方文档均提供 @astrojs/tailwind 或 PostCSS 配置：

npx astro add tailwind
# 或 svelte-add tailwind

内容路径需包含模板文件，否则 production 会 purge 掉未扫描到的 class：

// tailwind.config 片段
content: ["./src/**/*.{astro,html,js,svelte,mdx}"];

与 platform 的 Tailwind 4 可能版本不同——以各项目 package.json 为准，原则相同：utility 优先、设计 token 集中。

组件边界（Astro 特别重要）

---
import DocBody from './DocBody.astro';
import Search from './Search.jsx';
---
<DocBody />           <!-- 纯静态，零 JS -->
<Search client:load /> <!-- 仅搜索框带样式+交互 bundle -->

反模式：在 .astro 里写大段 client:load 的 react-essentials 布局——样式与 JS 一起膨胀。文档区用 Typography plugin / prose 类；交互区单独组件。

Eleventy 与纯 CSS

11ty 无 scoped 编译器，常用 BEM 或 单一 global.css + html-css-essentials 的 Flex/Grid。简单站 不引入 Tailwind 也可维护。

练习

• 给 Svelte 卡片加 scoped 样式，确认不影响兄弟组件
• Astro 文档页：prose 渲染 MD + 一个 Tailwind 按钮岛
• 列出你会放 global.css 的三类规则（reset、字体、prose）

小结

Scoped 保隔离，Tailwind 提速，Astro 把样式跟「是否 hydrate」一起规划。 下一课部署静态产物与 adapter。