SuperAPI AI 工具集

tailwind

前端与建站

查看项目

更新于 10-15 21:11

技能介绍

用途:用于 Tailwind CSS 项目的构建、审查、调试、配置与迁移,决策依据是当前官方文档以及本地项目的实际 Tailwind 版本、集成路径和设计约定。

工作流程:先识别 Tailwind 的使用面,阅读最近的项目指南与包清单,检查 tailwindcss、@tailwindcss/vite、@tailwindcss/postcss、@tailwindcss/cli、@tailwindcss/webpack、@tailwindcss/turbopack、prettier-plugin-tailwindcss 及框架包的已装版本;查看 CSS 入口文件、vite.config.、PostCSS 配置、框架配置、tailwind.config. 与类名组合辅助文件。当用户要求最新行为、版本与快照不一致、或涉及 v4 迁移与配置时,参考 source-map.md 的官方来源链接,并加载对应参考文件:setup-and-migration.md(安装路径、包拆分、v3 到 v4 升级、浏览器支持与迁移风险)、core-utilities.md(工具类组合、源检测、响应式、暗色模式、变体、任意值、Preflight 与可访问性)、css-directives-and-theme.md(@theme、@source、@utility、@variant、@custom-variant、@apply、@reference、@config、@plugin 及 Tailwind 函数)。

实现原则:优先沿用项目当前的主版本与集成包;使用完整、可静态检测的类名,将 props 或状态映射为完整类名字符串而非插值片段;优先使用设计令牌工具类与主题变量,而非一次性任意值;仅当工具类、主题变量、变体或组件组合不适用时才添加自定义 CSS;未经用户要求或任务需要,不将 v3 项目迁移到 v4。

验证:运行相关样式构建、框架构建、类型检查、lint、测试、Storybook 或浏览器检查中的最小有效范围;对可见 UI 改动尽量检查真实渲染状态,并说明未能执行的验证。

判断要点:Tailwind v4 以 CSS 为先,使用 @import "tailwindcss"; 主题变量写在 CSS 中,并有专用 Vite/PostCSS/CLI/webpack/Turbopack 集成包;@source 用于 monorepo、被忽略的外部包、多样式表、安全列表与源排除;响应式保持移动优先,无前缀工具类作用于所有尺寸,断点前缀在該断点及以上生效;暗色模式明确处理,使用默认 prefers-color-scheme 或通过 @custom-variant dark 定义项目选择器;导入 Tailwind 时 Preflight 处于启用状态,需考虑边距重置、标题与列表无样式、边框重置、图片块级化、响应式媒体和隐藏属性;当框架掌管 CSS 管线时优先采用官方框架指南;若需支持 Safari 16.4 以下、Chrome 111 以下或 Firefox 128 以下,未做明确兼容决策前不应选用 Tailwind v4。