用途:该技能面向由 framevideo init --tailwind 生成的合成 HTML,使用钉在 @tailwindcss/browser@4.2.4 的 Tailwind 浏览器运行时(即 v4,非 v3)。不适用于 packages/studio(其内部仍用 v3 的 tailwind.config.js、PostCSS 和 @tailwind 指令),也不用于非 Tailwind 项目、后端/CLI 代码。
主要能力:在合成 HTML 中书写工具类;用 <style type="text/tailwindcss"> 内的 @theme 定义颜色、字体、间距令牌,用 @utility 定义自定义工具;指导 v3 到 v4 的 CSS-first 迁移;处理 window.__tailwindReady 相关的样式缺失调试。
使用方式:npx framevideo init my-video --tailwind 创建项目。v4 中避免 @tailwind base/components/utilities,也不为定义令牌新增 tailwind.config.js;确需旧配置可从 CSS 用 @config 显式加载。运行时脚本由 CLI 注入,不要换成 cdn.tailwindcss.com。样式交给 Tailwind,动效计时交给 GSAP 等可定位适配器。反复项建议用完整类名加 CSS 自定义属性。现代工具类如 shadow-xs、rounded-xs、outline-hidden、shrink-、grow- 为 v4 名称;显式写边框色,如 border border-white/20。
验证:运行 npx framevideo lint、npx framevideo validate、npx framevideo inspect;渲染证明:npx framevideo render . --workers 1 --quality draft --output tailwind-proof.mp4。若预览有样式而渲染没有,检查 window.__tailwindReady 是否在捕获前就绪。
限制:运行时扫描当前文档只为可见类名生成 CSS,避免在 seek 时动态拼类名;readiness shim 需确定,无渲染循环轮询、时钟重试或额外网络请求;离线、锁定或追求生产稳定时建议编译 Tailwind 为 CSS 直接引入;v4 面向现代浏览器,注意旧浏览器支持。官方文档:https://tailwindcss.com/docs 。