tailwindcss

TailwindCSS v4 技能是专为现代网页开发设计的工具组，专注于 CSS-first 配置范式。它使开发人员能够管理设计系统、样式架构和组件级响应式设计，而无需依赖传统的基于 JavaScript 的配置文件。此技能专为需要精确控制设计标记、自定义工具生成以及容器查询和 CSS 变量等现代原生 CSS 功能的前端工程师和 UI 设计师而设计。通过将配置转移到标准 CSS 指令，该技能促进了与 Vite 等框架的无缝集成，并确保了与 Safari 16.4+、Chrome 111+ 和 Firefox 128+ 等现代浏览器标准的兼容性。

• 全面支持 @theme 指令，将颜色、排版、间距和动画等设计标记定义并扩展为 CSS 自定义属性。

• 使用 @source 指令进行智能内容检测，允许对 HTML、JS 和框架特定文件的扫描模式进行精确控制。

• 高级自定义功能，包括用于基于状态样式的 @custom-variant 和用于创建项目特定快捷工具的 @utility。

• 使用 @plugin 指令的插件集成功能，通过排版和表单等官方 Tailwind 包扩展功能。

• 使用 @theme inline 的高效主题策略，将现有的系统 CSS 变量映射到 Tailwind 工具，促进深色/浅色模式转换。

• 推荐用于从 Tailwind v3 迁移到 v4 的项目，特别是那些希望消除与 tailwind.config.js 相关的构建时间复杂性的项目。

• 使用 @theme 块来集中管理全局设计系统（如调色板和断点），以保持大型应用程序的一致性。

• 应用 @utility 模式以减少重复任务的 CSS 样板代码，例如 Flexbox 居中或复杂的滚动条自定义。

• 输入时，提供使用 Tailwind 导入的干净 CSS 文件；输出时，获得为性能优化的生成工具类。

• 请注意，此技能强制执行现代 CSS 实践，并不依赖 Sass 或 Less 等传统预处理器，因为 Tailwind 本身即可处理预处理引擎。