#NewsLetter #React #JavaScript #前端 #新动态
⚛️ React Status #437

AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。

react.dev

React Compiler – React

The library for web and native user interfaces

#优质博文 #前端 #新动态 #css #tailwind
Frontend Focus #697

AI 摘要：Frontend Focus 第 697 期（2025 年 6 月 18 日）涵盖了前端开发的最新动态和技术趋势，重点介绍了 CSS 间隙样式的新方法、HTML 规范更新、前端开发者的趣味清单以及多个工具和资源。文章还包括了关于 CSS 动画、ARIA accessibility、浏览器扩展风险等教程和观点，以及对 Apple WWDC 25 的浏览器和设计系统的批判性分析。通过详细的资源和案例，读者可以深入了解前端技术的最新发展和实用技巧。

1. CSS 新特性与文章
• CSS gap decorations 新方法：由 Microsoft Edge 团队分享的 gap decorations 实现进展，旨在替代伪元素 hack，并提供互动演示页面（需在 Chromium 浏览器中启用标志）。
• CSS 动画中的变换顺序：Jake Archibald 探讨了 CSS 变换动画的复杂算法，提醒开发者避免不自然的动画效果，并通过趣味演示（如猫咪动画）解释实现方法和潜在问题。【好文】
• 如何跟上新的 CSS 功能：Sacha Greif 推荐了跟踪 CSS 新特性的资源，帮助开发者超越无目的的搜索，保持技术前沿。
• 打破边界：用（S）CSS 构建七巧板：Sladjana Stojanovic 通过构建七巧板拼图，探索 CSS 在创建交互用户界面时的极限。
• CSS 网格属性对比：Chris Coyier 分析了 1fr 1fr、auto auto 和 50% 50% 在创建列时的细微差异，帮助开发者理解输出效果。

2. HTML 与安全性更新
• HTML 规范变更：Chrome 团队介绍了 HTML 规范中关于属性中 < 和 > 转义的最新变化，旨在防止 mutation XSS 漏洞，提升安全性。
• 前端开发者清单：Nic Chan 以幽默的方式列举了前端开发者常见的“怪癖”，提供了一个有趣的互动网站，让读者探索和娱乐。
• 成为更好的前端工程师：Den Odell 建议通过一周的值班经历来提升前端工程技能，分享实战经验。

3. 无障碍与用户体验
• ARIA 入门指南：Eric Bailey 分享了关于“无障碍富互联网应用”的实用知识，破除常见误解，帮助开发者加深对 ARIA 的理解。
• 构建无障碍 UI 的理由：Nolan Lawson 阐述了构建无障碍用户界面的“自私”理由，强调其对开发者自身和用户的双重益处。
• 汉堡菜单图标的辨识度：Kate Kaplan 讨论了汉堡菜单作为一种常见模式在用户中的辨识度，同时指出其固有的权衡问题。

4. 浏览器与行业动态
• Apple WWDC '25 浏览器分析：Alex Russell 对 Apple 在 WWDC '25 上的浏览器和网页相关公告提出批评，指责苹果 “gaslighting” and “suppressing the web”.
• Apple 新设计系统问题：Nat Tarnoff 针对 Apple 的“Liquid Glass”设计系统提出无障碍方面的潜在问题，呼吁关注用户体验。
• Payload CMS 加入 Figma：James Mikrut 宣布 headless CMS Payload 被 Figma 收购，将继续开源，并计划以独特方式与设计系统集成。

5. 工具与资源推荐
• Anchors Tailwind 插件：Toolwind 提供了一个简易 API，用于在 Tailwind 项目中尝试 CSS Anchor Positioning，尽管浏览器支持尚未完全。
• Critical CSS Generator：Kigo 推出一个基于 Web 的工具，可从任意 URL 提取关键 CSS，支持自定义视口和渲染等待时间，并提供集成指南。
• DarkModeJS 2.0：Assortment 发布了一个实用包，利用 matchMedia API 和 prefers-color-scheme 媒体查询管理暗模式切换。
• RampenSau：David Aerne 开发了一个使用色调循环和缓动函数生成调色板的库，支持主页上的互动调整设置。

6. 其他教程与观点
• 可视化网站构建工具未流行原因：Salma Alam-Naylor 探讨了可视化网站构建工具未能广泛流行的原因，分析其局限性。
• 恶意浏览器扩展风险：Kush Pandya 警告了恶意浏览器扩展日益增长的风险，提醒开发者注意安全隐患。

Chrome for Developers

A new way to style gaps in CSS  |  Blog  |  Chrome for Developers

Say goodbye to border and pseudo-element hacks.

#优质博文 #前端 #tailwind #font
How to use custom fonts in Tailwind CSS

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

author Peter Ekene Eze

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.

#优质博文 #前端 #新动态
Frontend Focus #689 — April 23, 2025

AI 摘要：本期 Frontend Focus 涵盖前端领域多项重要动态：Google 宣布放弃移除 Chrome 第三方 Cookie 的计划，转而维持现有隐私设置；AG Grid 推广其高性能数据网格库；WebGL 渐变技术解析；此外还包括浏览器市场动态、前端工具更新（如 Polypane 24 和 Tailwind Trainer）、PWA 离线图像上传方案、CSS 预处理替代方案探讨，以及 AI 与可访问性的未来等深度文章。

1. 社区动态
• Chrome 隐私策略调整：Google 终止移除第三方 Cookie 的计划，用户仍需通过隐私设置手动管理。 #草

“ 考虑到所有这些因素，我们决定保持目前在 Chrome 中为用户提供第三方 cookie 选择的方法， 并且不会为第三方 Cookie 推出新的独立提示。用户可以继续在 Chrome 的隐私和安全 设置中选择最适合自己的选项。

• 谷歌可能被迫出售 Chrome， 猜猜谁想买? OpenAI。[Source]
• TLS 证书有效期将缩短至 47 天（2029 年起）。
• 从今天到 2026 年 3 月 15 日，TLS 证书最长生命周期为 398 天。
• 自 2026 年 3 月 15 日起，TLS 证书最长生命周期为 200 天。
• 自 2027 年 3 月 15 日起，TLS 证书最长生命周期为 100 天。
• 自 2029 年 3 月 15 日起，TLS 证书最长生命周期为 47 天。
• Web 开发引擎 Toddle 更名为 Nordcraft 并发布 1.0 版本。
• Heydon 的 Web 辅助功能高级指导原则集现已提供新增多语言版本（法语、日语等）。

2. 博文与工具
• AI is the Future of Accessibility：Karl Groves 通过汽车工业发展的类比，批判了当前无障碍设计领域对 AI 技术的消极态度，呼吁行业积极拥抱技术变革而非抵制。 #无障碍
• 网站“键盘导航”的真正含义：了解为什么能够使用键盘浏览我们的网站很重要，如何测试您当前的设置，并最终改进它。
• 构建离线友好的图像上传系统：利用 IndexedDB 和 Service Worker 提升弱网环境可靠性。
• Tailwind Trainer：通过游戏学习 Tailwind CSS 语法。 #tailwind #游戏
• Astro Font：自动优化字体的 Astro 插件，支持自定义字体、本地字体、任何 CDN 上的字体和 Google 字体的优化。
• Symbl：轻松搜索、复制和使用 HTML 符号、表情符号等。
• Markdown to Slides：将 Markdown 转换为 PDF/PPTX 幻灯片的在线工具。
• CSS Hell：挑战性 CSS 谜题游戏（仅限桌面端）。 答案

GitHub

css-hell/solutions.md at main · marcos-acosta/css-hell

Contribute to marcos-acosta/css-hell development by creating an account on GitHub.

#优质博文 #前端 #tailwind #性能优化
省流：测到最后发现压缩后性能差异基本可以忽略不计，重复的越多压缩效率越高，所以爱选哪个选哪个（）
Tailwind vs Linaria: Performance Investigation

AI 摘要：本文通过对比 Tailwind 和 Linaria 在初始加载性能（LCP）和交互性能（INP）上的表现，发现 Tailwind 虽能减少 CSS 体积（-13%）但增加了 HTML/JS 大小（HTML 最高 +162%），而实际初始加载性能差异可忽略不计。然而，Tailwind 的通用选择器（如 * 和伪元素）导致交互性能下降（如下拉菜单延迟增加 50%）。结论：两者性能差异对多数项目影响微小，框架选择应优先考虑开发体验而非性能优化。

author Nadia Makarevich

Developerway

Tailwind vs Linaria: Performance Investigation

Investigating performance of Tailwind vs Linaria frameworks, with a focus on initial load and interaction performance.

#优质博文 #前端 #tailwind #css #sass
So, You Want to Give Up CSS Pre- and Post-Processors... | CSS-Tricks

AI 摘要：本文探讨了 CSS 预处理工具（如 Sass）和后处理工具（如 PostCSS）的演变，指出随着原生 CSS 功能的增强（如变量、嵌套）以及新兴工具（如 Lightning CSS、Tailwind）的崛起，后处理工具逐渐成为主流选择。作者分析了技术趋势变化的原因，并提供了迁移建议。

1. 背景与分类
• 预处理工具（Pre-processors）：如 Sass、Less，需编译为合法 CSS。
• 后处理工具（Post-processors）：如 PostCSS、Lightning CSS，直接处理 CSS 文件并优化输出。

2. 后处理工具的优势
• Autoprefixer 曾是必备插件（自动添加浏览器前缀），现因浏览器兼容性提升需求减少。
• 关键转折点：
• 原生 CSS 支持变量和嵌套。
• Tailwind 4 放弃预处理支持。
• Lightning CSS 的高性能替代方案。

3. 原生 CSS 的进步
• 已支持变量（--var）和嵌套语法，减少对预处理器的依赖。
• 未来将引入 if() 函数，但模块化拆分仍需依赖工具（如 postcss-import）。

4. Tailwind 的影响
• Tailwind 4 明确不支持预处理器，推荐自身作为“预处理器替代”。
• 仍可通过 .css 扩展名与 Sass 兼容，但流程更复杂。

5. Lightning CSS 的崛起
• 性能优势：比 PostCSS 快 100 倍，支持 Vite 集成。
• 功能覆盖：替代 postcss-import 、autoprefixer 等插件。
• 开发者如 Chris Coyier 已转向 Lightning CSS。

6. 迁移建议
• 仅需变量/嵌套 → 原生 CSS。
• 需模块化 → Lightning CSS。
• 需混合（Mixins） → Tailwind 的 @apply。
• 需复杂逻辑（if/for） → 暂保留 Sass。

author Zell Liew

CSS-Tricks

So, You Want to Give Up CSS Pre- and Post-Processors... | CSS-Tricks

There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.

#优质博文 #前端 #tailwind #css
tailwind 总给我一种前端界的原神的感觉（暴论x
认真的说，这篇写挺好的，有一些 tailwind 实用小技巧。
Tailwind’s @apply Feature is Better Than it Sounds

AI 摘要：本文为 Tailwind CSS 的 @apply 功能辩护，认为其价值被严重低估。作者通过对比 Sass 的 @include 机制，展示了 @apply 在代码复用、响应式设计和可维护性上的优势，并提供了实用案例（如布局工具类）证明其灵活性，同时指出其虽不如 Sass 混入强大，但结合现代 CSS

1. 作者对 Tailwind 的矛盾态度
• 肯定 Tailwind 方法论在样式可维护性和性能上的优势，但批评原生 Tailwind 的某些设计。
• 强调 @apply 是被低估的核心功能，尽管 Tailwind 创始人 Adam Wathan 曾建议避免使用。

2. @apply 的功能解析
• 允许将 Tailwind 工具类复制到自定义 CSS 中，类似 Sass 的 @include。
• 示例对比单属性工具类（如 p-4）与复杂工具类的应用场景。

3. 与 Sass 混入的对比
• 优势 ：
• 直接用于 HTML 无需额外选择器（如 <div class="utility">）。
• 支持响应式变体（如 md:utility）。
• 劣势 ：
• 不支持多变量或逻辑控制（如 Sass 的 @if/@for）。

4. 实用案例展示
• 布局工具类 ：定义 vertical 和 horizontal 工具类，通过 flex-direction 快速切换布局，并支持响应式（如 sm:horizontal）。
• 网格系统 ：grid-simple 工具类结合 CSS 变量（--cols）动态调整列数，减少重复代码。

5. 灵活使用建议
• 混合 @apply 与原生 CSS 编写复杂布局（如媒体查询内应用工具类）。
• 提倡将 Tailwind 视为工具而非教条，平衡实用性与可读性。

author Zell Liew

CSS-Tricks

Tailwind's @apply Feature is Better Than it Sounds | CSS-Tricks

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obviously, nobody wants to use it. Personally…

#前端 #tailwind #css #新动态
想了想还是加一个 #新动态 的 tag，虽然很多更新一般没时间看，但是看过得还是 mark 一下。

tailwind 更新的这些功能差不多都是以往需要插件支持或者直接写的。

话说被喷多之后貌似改进了旧版本浏览器兼容性噢，颜色不会一团浆糊了，有没有小伙伴升级测测看。

不幸的是，其中一些功能在较旧的浏览器中降级得非常糟糕，以至于对于使用卡在 Safari 15 上的旧 iPhone 或 iPad 访问的人来说，即使是颜色和阴影等基本内容也可能根本无法呈现。

For Tailwind CSS v4.1, we put a bunch of effort into coming up with and testing our own framework-specific fallbacks to make your sites render as best as possible in older browsers, even if some super modern things still don't behave quite the same.
对于 Tailwind CSS v4.1，我们投入了大量精力来提出和测试我们自己的特定于框架的回退，以使您的网站在较旧的浏览器中呈现得尽可能好，即使一些超级现代的东西仍然表现得不尽相同。
在 oklab 中定义的颜色现在可以在旧版本的 Safari 中呈现

Tailwind CSS v4.1 发布：新增文本阴影、遮罩工具等多项功能

AI 摘要：Tailwind CSS v4.1 引入了文本阴影、遮罩工具、浏览器兼容性优化等多项新功能，提升开发体验。

Tailwind CSS v4.1 是一个重要版本更新，新增了多项实用功能和优化。主要包括：

• 文本阴影工具（text-shadow-*）：提供五种预设阴影大小，支持颜色和透明度调整。
• 遮罩工具（mask-*）：支持使用图片或渐变遮罩元素，优化了 API 设计。
• 浏览器兼容性改进：在旧浏览器中更优雅地降级，同时充分利用现代浏览器特性。
• 精细文本换行（overflow-wrap）：防止长单词破坏布局。
• 彩色投影支持（drop-shadow）：新增彩色投影工具。
• 输入设备适配（pointer-* 和 any-pointer-*）：针对触摸设备优化设计。
• 基线对齐（items-baseline-last 和 self-baseline-last）：支持将 Flex/Grid 项目对齐到文本最后一行的基线。
• 安全对齐（safe）：防止内容在空间不足时消失。
• 构建优化：支持忽略特定路径（ @source not ）和强制包含工具类（ @source inline(...) ）。
• 新变体：如 noscript、user-valid、inverted-colors 等。

文章还提供了升级指南，支持通过 npm 安装最新版本（CLI、Vite、PostCSS）。

#前端 #新动态 #优质博文 #css #html
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性

在采用网络平台功能时，是否应该使用 Polyfills 的规则并不明确。就像你在网络上做的任何事情一样，在权衡收益和风险的同时，还需要深思熟虑。回顾一下，处理这个问题的一套粗略规则是
• 要明白，虽然 Polyfills 功能在某些方面具有优势，但它们也会带来潜在的性能和可访问性成本，而且可能无法忠实复制未实现的网络功能。
• 如果可能，利用用户数据确定 Baseline 阈值。如果不可能，Baseline 广泛可用功能集是一个很好的起点，可以考虑使用 RUM 洞察数据来做出明智的决定。
• 利用这些数据，评估如果浏览器不支持您希望使用的功能，有多少用户会受到影响，并评估影响的严重程度。
• 与项目利益相关者沟通，确定哪些功能是可以接受的，适合项目目标和业务需求。
• 如果必须使用有限可用性功能，请评估受众和使用风险。除非您的用户只能使用一个浏览器引擎，否则您无法保证兼容性，即使使用多填充功能也是如此。

这些原因就是为什么 Polyfill 不包含在 Baseline 中。Baseline 的作用是告知您所有主流浏览器引擎都支持哪些功能。您仍然需要知道有多少用户可以使用 Baseline 功能，并根据您的用户和项目需求做出决定。Baseline 广泛可用是一个很好的默认设置，并且在许多情况下通常会为用户提供最广泛的 Web 功能支持。

3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685

Chrome for Developers

现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers

界面保持不变，焕然一新。

#优质博文 #前端
1. 宣布推出 TypeScript 5.8 —— 经过四个月的发展，TypeScript 5.8 以 Node 为重点。您现在可以在 nodenext 模块中对 ES 模块使用 require() ，对于希望继续以 Node 18 为目标的开发人员，有一个新的 node18 模块，最值得注意的是，现在有一个 --erasableSyntaxOnly 选项来确保不能使用仅限 TypeScript 的运行时语义（如果您使用 Node 的类型剥离功能直接运行 TypeScript 代码，则这是理想的选择） #typescript #node （机翻）
2. 使用 Playwright 进行动态网页数据抓取

本文通过 YouTube 案例，介绍如何利用 Playwright 工具解决动态网页（依赖 JavaScript）的数据抓取问题。
文章首先指出传统基于 Cheerio 的静态网页抓取工具无法处理动态渲染内容的问题，提出使用 Playwright 的浏览器自动化方案。 文章包含详细的代码片段和配图说明，重点展示了 Playwright 的 Locators API 和浏览器上下文操作能力，最终实现动态加载视频数据的结构化抓取。 #WebScraping #javascript #网页抓取 #教程

3. 具有现代依赖项的 Electron 应用程序样板 —— 一个基本的模板应用程序，使用 React 19、Tailwind CSS 4、shadcn/ui、Electron Vite、Biome，并包括 GitHub Actions 发布工作流程。 #template #tailwind #shadcn

via Node Weekly 568

Microsoft News

Announcing TypeScript 5.8

Today we’re excited to announce the release of TypeScript 5.8! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for types. Writing types in our code allows us to explain intent and have other tools…

#博客更新 #前端 #tailwind #astro #css #升级
Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录

是迁移过程小记和一些主要更新翻译，比较水，后续要是还有问题也丢这篇里边。

🔗 xLog链接
🔗 新版 Astro 博客链接
🔗 Follow - 余弦の博客

#组件库 #tools #前端 #react #tailwind
star 🌟 Emoji Picker - A composable React emoji picker component with Tailwind styling

https://fixupx.com/0xferruccio/status/1885676696541581769

#前端 #组件库 #tools #react #tailwind #headless
star ⭐ react-international-phone

☎︎ react-international-phone：电话号码输入组件 —— 您不仅可以选择一个国家，而且还可以在可能的情况下从数字中猜测该国。 react-phone-number-input 是该领域的另一个选择。

via React Status #415

GitHub

GitHub - ybrusentsov/react-international-phone: ☎️ International phone input component for React

☎️ International phone input component for React. Contribute to ybrusentsov/react-international-phone development by creating an account on GitHub.

#优质博文 #跨端 #tailwind #rn #css #color #follow
React Native 实践：Colors

AI 摘要：这篇文章讲述了 Follow Mobile 的颜色体系。Follow Mobile 使用 React Native 和 Expo 开发，并通过 NativeWind 工具来实现类似 TailwindCSS 的样式系统。文中详细介绍了准备工作，包括安装 NativeWindCSS、配置 Babel 和 Metro、创建 PostCSS 样式入口等。接着介绍了选择颜色体系，搬用了苹果的颜色规范，并提供了相应的颜色值参考。然后讲解了如何使用 NativeWind 的变量注入功能，将颜色定义从顶层传入且在 TailwindCSS 中配置使用。这些方法被用于组件中设置颜色和颜色过渡动画。最后文章提到，这个方案已被抽取为通用库，供大家使用。

via innei

#优质博文 #新动态 #前端 #tailwind #css
等晚点下班了再详细写一下

Tailwind CSS v4.0

AI摘要： Tailwind CSS v4.0 带来了性能提升和功能增强。主要变化包括

1. 全新 JIT 引擎优化：编译更快，支持更多的 CSS 特性，并减少生成文件大小。
2. 原生 CSS 变量支持：使用 theme() 自动生成 CSS 变量，动态设计更加灵活。
3. 改进的插件 API：允许插件定义动态规则和条件逻辑，扩展性更强。
4. 更新的断点系统：支持更灵活的屏幕适配逻辑，通过 container 和 screens 提高响应式设计效率。
5. 增强的文档和调试工具：便于开发者快速定位和解决问题。

此版本专注于提升开发体验和性能，是 Tailwind CSS 的重要升级。

相关博文：
Tailwind CSS 4.0 正式发布！ - 公众号 前端充电宝
千万别轻易在生产环境使用 tailwindcss 4.0 - 公众号 这波能反杀

Tailwindcss

Tailwind CSS v4.0

We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to…

#前端 #css #tailwind #color #配色
Flexoki

AI 摘要：Flexoki 是一款专为数字屏幕阅读和书写设计的开源墨水风格配色方案，灵感来自纸张和传统墨水。它采用高对比度、感知平衡的颜色，适用于多种应用程序和模式（明暗）。该配色基于 Oklab 色彩空间，优化了颜色的感知一致性和可读性，同时保留了艺术和科学的平衡。Flexoki 提供基础颜色、强调颜色和扩展调色板，用于代码高亮和界面设计，旨在营造温暖鲜活的视觉效果。

via Frontend Focus #674

Steph Ango

Flexoki

An inky color scheme for prose and code.

#前端 #工具推荐 #浏览器插件 #tools #tailwind #shadcn #color
CSS Variables Editor —— CSS Variables Editor 是一款浏览器扩展，旨在简化 CSS 变量中颜色的管理。 其主要功能包括：

- AI 生成的色彩方案：通过集成 OpenAI 或 Anthropic API，快速生成并在实际应用中预览色彩方案。

- 无障碍测试：根据 WCAG 指南检查色彩对比度，确保设计的可访问性。

- 实时颜色编辑：直接在浏览器中修改 CSS 变量的颜色值，实时预览更改效果，提升设计与代码的协作效率。

- 支持 daisyUI 和 shadcn/ui：提供官方文档中的颜色描述，确保在应用中正确使用，并避免忽略弹出框、聚焦环等状态的设计。

- 导出更改：支持导出修改后的 CSS 变量，遵循 Tailwind 的推荐实践。

该扩展可从 Chrome 网上应用店安装，适用于设计师和开发者，提升设计系统中颜色管理的效率。

Cssvariables

CSS Variables Editor - AI Browser Extension for managing colors in CSS Variables

CSS Variables Editor is the Browser Extension for managing colors in CSS Variables. AI-generated color palettes. Accessibility testing. Support for shadcn/ui and daisyUI (more coming soon).

#工具推荐 #前端 #组件库 #tailwind #react #nextjs #motion #落地页 #tools #动画

昨天群里看到的，相当漂亮的落地页酷炫组件库，且适用我的技术栈，加入知识库方便检索。

Aceternity UI 是一个前端UI组件库，专为快速构建美观网站而设计。用户可以通过复制粘贴组件代码，轻松集成到项目中，无需担心样式或动画。由 Next.js、React、TailwindCSS 和 Framer Motion，提供丰富的模板和组件，帮助开发者迅速提升网站外观和功能。

https://ui.aceternity.com/

#优质博文 #astro #tailwind #前端 #工程化
Setup Astro 3.0 with Tailwind CSS Prettier Plugin

AI 摘要：这篇文章介绍了如何在 Astro 3.0 项目中设置 Prettier 来自动排序 Tailwind CSS 类。通过安装 prettier-plugin-astro 和 prettier-plugin-tailwindcss 插件，并更新 .prettierrc 和 VSCode 设置，可以实现代码自动格式化和 Tailwind 类的自动排序。文章详细说明了安装、配置以及验证过程，帮助开发者优化代码风格和提高开发效率。

via Web Reaper

Web Reaper

Setup Astro 3.0 with Tailwind CSS Prettier Plugin

Save time and eliminate styling discussion with auto-formatting and tailwind auto-class-ordering on save by setting up Prettier for Tailwind CSS in your Astro 3.0 projects.

#工具推荐 #前端 #css #tools #tailwind #nextjs #学习项目 #sanity

看了一下技术栈没细看，感觉应该是适合初学者学习的 Next + tailwind 的项目，先 mark 一下。

独立开发者导航站 开源啦！
free-directory-boilerplate.vercel.app

Github：The Open Source Directory Website Boilerplate

https://github.com/javayhu/free-directory-boilerplate

https://github.com/javayhu/free-directory-sanity

该项目代码仓库有2个，你可以简单理解为是前后端分离的实现形式。
稍微提一嘴，后来我在写Mkdirs模板时就重构改为了单仓库形式。

https://fixupx.com/javay_hu/status/1872794607278538862

from Twitter@javay_hu

GitHub

GitHub - javayhu/free-directory-boilerplate: The Open Source Directory Boilerplate

The Open Source Directory Boilerplate. Contribute to javayhu/free-directory-boilerplate development by creating an account on GitHub.