AI 摘要：本文介绍了在 Tailwind CSS 中使用自定义字体的方法，重点讨论了通过本地安装字体和 Web 字体两种方式，并提供了具体的实现步骤和代码示例。

1. 引言
• 作者提到自己搜索“如何在 Tailwind CSS 中使用自定义字体”的需求，并找到了解决方案。
• 问题背景：在 React 项目中，没有全局 CSS 文件的情况下如何添加本地安装的字体。

2. 解决方案
• 方法 1：通过 index.html 文件添加本地字体
• 在 index.html 中插入 <link> 标签引用本地字体文件。
• 适用于 React 项目，且作者认为这种方式更符合标准，尤其是已通过类似方式导入 Web 字体的情况。
• 方法 2：使用 Web 字体
• 通过 CDN 或在线链接导入字体（如 Google Fonts）。
• 需要在 Tailwind 配置文件中扩展字体配置。

3. 潜在问题与建议
• 作者不确定从其他角度看这种方法是否存在问题，但认为在当前项目中是可行的。
• 提示读者根据项目需求选择最合适的字体导入方式。

LogRocket Blog

How to use custom fonts in Tailwind CSS - LogRocket Blog

Learn how to use Google Fonts and locally installed fonts in a Tailwind project to help you improve your typography and design consistency.

AI 摘要：本文是一份关于 CSS 容器查询的交互式指南，详细介绍了容器查询的语法、使用场景、常见问题及解决方案，并通过大量实例演示如何利用容器查询实现响应式组件设计，替代传统的媒体查询方法。

1. Introduction to container queries
• 容器查询解决了基于容器宽度（而非视口）调整 UI 的痛点，传统媒体查询在此场景下存在局限性。
• 示例：页面头部操作按钮的标签显示/隐藏逻辑通过容器查询优化。

2. Container query syntax
• 基本语法：通过 container-type 和 container-name 定义容器，使用 @container 规则查询。
• 支持简写：container: name / type。

3. Common pitfalls
• 容器不能依赖内容自动调整大小（需显式设置或通过 Flex/Grid 布局控制）。
• 无法直接查询容器自身的样式（需额外包装元素）。

4. Container query units
• 引入容器相对单位（如 cqw, cqh），实现容器内的流体排版和间距控制。

5. Use cases
• 卡片组件：根据容器宽度切换堆叠/水平布局。
• 仪表盘部件：动态调整 widget 样式以适应不同列宽。
• 时间线组件：窄容器显示垂直布局，宽容器显示水平布局。
• 表单输入：基于容器空间自动调整网格列数。

6. Style queries
• 实验性功能（仅 Chrome/Safari TP 支持），通过查询 CSS 变量（如 --featured: true）切换样式。
• 示例：结合 :has() 选择器控制时间线布局。

7. DevTools 支持
• Chrome 开发者工具可调试容器查询应用的元素。

8. Resources & Related articles
• 推荐了容器查询规范、兼容性检查工具及其他相关文章（如 CSS :has() 指南）。

Outro
容器查询标志着响应式设计的范式转变，未来将逐步替代媒体查询在组件级布局中的应用，但媒体查询仍适用于全局布局。

Ishadeed

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

AI 摘要：本文探讨了如何通过 CSS 自定义属性和 @property 规则，实现嵌套容器中子元素使用外层容器的容器查询单位（如 cqw）而非默认的最近父容器，从而解决嵌套容器场景下的单位计算问题。

1. 问题背景
• 开发者 Matt Wilcox 指出：当存在嵌套容器时，容器查询单位（如 cqw）默认相对于最近的父容器计算，无法直接指定外层容器作为基准，导致布局设计受限。

2. 技术基础
• 容器查询（Container Queries）和容器单位（Container Units）是 CSS 的新特性，允许元素样式基于容器尺寸动态调整。
• 示例代码展示了嵌套容器（.outer-container 和 .inner-container）的结构，以及子元素 .inner-child 使用 20cqw 时默认相对于 .inner-container 计算的问题。

3. 尝试解决方案
• 失败方案 1：直接为 .inner-child 指定 outer 20cqw 语法无效。
• 失败方案 2：通过 CSS 变量传递 --s: outer 20cqw 同样不被支持。
• 部分成功方案：将变量 --s: 20cqw 定义在 .inner-container 中，但子元素继承时仍基于 .inner-container 计算。

4. 最终解决方案
• 使用 @property 注册自定义属性 --s，强制其继承并保留原始计算值（基于 .outer-container 的 20cqw），从而在子元素中正确应用。
• 代码示例：
@property --s {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}

Frontend Masters

Using Container Query Units Relative to an Outer Container

Recently, Matt Wilcox posted on Mastodon:

AI 摘要：Zod 4 作为 TypeScript 生态中广受欢迎的 schema 验证库迎来重大升级，通过性能优化（解析速度提升 3 倍）、内置 JSON Schema 转换、轻量级 @zod/mini 模块等新特性，显著提升了开发效率和应用性能，尤其适合现代 Web 应用和大型项目。

1. 性能优化
• 深层嵌套 schema 解析速度提升 3 倍，内存效率更高
• 核心库体积减少 57%，更适合前端性能敏感场景
• 减少 20 倍 TypeScript 编译器实例化，改善大型项目类型检查速度

2. 轻量级替代方案 @zod/mini
• 专为边缘计算/无服务器环境优化，支持 tree-shaking
• 保留核心功能（如 .parse()），与完整版 Zod 无缝兼容

3. 内置 JSON Schema 转换
• 原生支持 .toJSON() 方法，替代第三方工具
• 示例代码展示如何快速生成符合规范的 JSON Schema

4. 全局注册表 (z.globalRegistry)
• 集中管理 schema 元数据（ID/描述/示例）
• 自动生成可复用的 $defs 引用，简化大型应用维护

5. 增强错误处理
• z.prettifyError 提供多行格式化错误输出，提升调试体验

6. 原生文件验证
• 新增 z.file() 支持 MIME 类型、文件大小等约束
• 示例演示如何验证上传文件的扩展名和尺寸

7. 升级指南
• 通过 npm install zod@latest 升级
• 注意废弃的 API（如 z.nullable() 改为 z.nullish()）

LogRocket Blog

Here's why everyone's going crazy over Zod 4 - LogRocket Blog

Heard the buzz about Zod 4? Learn what’s new in this update, why it matters, and how it could transform your workflow.

AI 摘要：本文介绍了一种使用 CSS animation-timeline 和自定义属性实现现代滚动阴影效果的新方法，通过 CSS 遮罩（mask）替代传统阴影，实现跨背景兼容的水平滚动元素边缘渐变效果，无需 JavaScript 且支持优雅降级。

1. 背景介绍
• 传统方法：通过背景渐变叠加实现滚动阴影（Chris Coyier 曾推荐）
• 新方法：Geoff 使用 animation-timeline 绑定滚动位置与伪元素透明度动画

2. 新方案核心
• 改用 CSS 遮罩（mask）淡出可滚动元素边缘
• 优势：适配深浅背景、无需独立边框，适合水平滚动场景（如表格）

3. 实现步骤
• 可滚动元素初始化
• 示例：响应式差的水平滚动表格
• 使用线性渐变遮罩代码：

.scrollable {
mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}

• 自定义属性与动画定义
• 通过 @property 声明 --left-fade 和 --right-fade 属性
• 关键帧动画控制两侧淡入淡出范围（0-10% 左端动画，90-100% 右端动画）
• 动画与滚动时间轴绑定
• 将 scroll-timeline 关联到 animation-timeline

4. 兼容性与扩展
• 目前 Safari 不支持 animation-timeline，但会优雅降级（无渐变效果）
• 适用场景：滚动吸附（scroll-snap）轮播或卡片组件

5. 总结
• 结合 CSS 新特性（自定义属性动画 + animation-timeline）实现实用效果
• 强调 CSS 近年来的进步：无 JavaScript 依赖、内容无关性

CSS-Tricks

Modern Scroll Shadows Using Scroll-Driven Animations | CSS-Tricks

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.