框架与类库：Tailwind CSS
如何在浏览器插件中使用 Shadow DOM 样式隔离
使用React + Vite构建浏览器插件时，Shadow DOM能有效隔离Content Script的样式，避免主网站样式影响。Tailwind CSS默认使用REM单位，但在Shadow DOM中需转换为EM以确保样式一致性。可通过PostCSS插件或Vite运行时转换实现REM到EM的转换。CSS变量需在Shadow DOM根元素:host上定义，确保内部可用。无障碍阅读在Shadow DOM中可能受限，需手动处理交互功能。
让 AI Agent 实时生成个性化交互式可视化体验
AI交互新范式：告别枯燥文字对话，Agent直接生成精美可视化内容！通过设计规范转prompt、AI原型图生成、组件实时渲染三步走，让保险产品解读等场景秒变PPT级展示。蚂蚁"灵光"已落地应用，未来小游戏、小程序或都能由AI实时生成。技术颠覆传统开发流程，人机交互体验迎来质的飞跃~
How to Build a Modal Video Component with Tailwind CSS and Vue
Learn how to build a simple modal video component using Tailwind CSS and Vue.js, and with TypeScript support.
3 Examples of Brilliant Vertical Timelines with Tailwind CSS
Learn how to build three responsive vertical timelines with Tailwind CSS.
How to Create a Spotlight Card Hover Effect with Tailwind CSS
Learn how to create to create a spotlight card effect on mouse hover with Tailwind CSS.
Implementing Tailwind CSS Dark Mode Toggle with No Flicker
Learn how to implement flicker-free Tailwind CSS Dark Mode toggle.
How to Make a Stunning CTA Animation with Tailwind CSS
Learn how to create an engaging CTA animation on mouseover using Tailwind CSS.
Auto-Growing Textarea with Tailwind CSS
A common trick that makes a textarea automatically grow in height as you type, made with Tailwind CSS.
Animated Gradient Borders with Tailwind CSS
How to create a card highlighted with animated border gradients using Tailwind CSS.
Create a Table with a Sticky Column using Tailwind CSS
How to create a table with a sticky column with Tailwind CSS.
Active Link Animation with Tailwind CSS and Framer Motion
Learn how to create a sliding active link animation for one-page navigation with Tailwind CSS and Framer Motion.
OTP Form Example Made with Tailwind CSS and JavaScript
An example of a simple OTP (One-Time Password) form made with Tailwind CSS and JavaScript.
Create an Infinite Horizontal Scroll Animation with Tailwind CSS
In this tutorial, we will show you how to create a cool infinite horizontal animation using only CSS. This effect can be used to display a variety of things, and for this post, we’ll focus on building a logo carousel that smoothly scrolls from right to left using Tailwind CSS classes.
Creating a Sliding Text Animation with Tailwind CSS
Learn how to create a sliding text animation with Tailwind CSS.
原子化真的是现代前端CSS的救星吗
原子化 CSS 的主要是将样式属性拆分成最小的单元，并使用这些单元类名来构建样式。But,在某些复杂的样式需求下，使用传统的 CSS 方法可能更合适。
带你探索Tailwind Css
tailwind 是一个流行的原子化 css 框架。本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。