Tailwindcss Next Init

概览

用本 skill 为目标仓库生成 Tailwind v4 初始化骨架，并给出可复制的依赖安装命令、布局导入检查结果、@source 与 @reference 使用建议。 优先运行脚本完成标准化输出，避免手工遗漏。

标准流程

1. 识别目标项目结构。

• 检查 <project-root>/package.json 是否存在。
• 检查 src/app/layout.tsx 或 app/layout.tsx 是否存在。
• 检查 src/styles/ 与 styles/ 目录状态。

2. 先做 dry-run 预览。

• 运行：

python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project --dry-run

• 先确认将创建/覆盖的文件，再决定是否执行真实写入。

3. 执行初始化写入。

• 默认最小模板：

python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project

• 贴近本仓库模板：

python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project --preset project-like

• 已有文件需覆盖时显式加 --force。

4. 处理依赖安装。

• 按脚本输出的包管理器命令安装依赖（脚本只生成命令，不直接执行安装）。
• 默认图标策略是 --icons all，安装 lucide/mdi/tabler 三套图标集。

5. 检查导入与扫描边界。

• 若脚本提示缺少全局样式导入，在目标 layout.tsx 增加：

import "@/styles/globals.css";
import "@/styles/custom.css";

• 若类名来自 node_modules 或扫描盲区，按提示在 tailwind-core.css 增加 @source。

6. 进行项目验证。

• 至少执行一次构建链路检查（如 pnpm typecheck、pnpm dev）。
• 确认页面样式生效、Iconify 图标类可渲染。

脚本参数契约

scripts/init_tailwind_v4.py 支持以下参数：

• --project-root <path>：目标项目根目录（必填）
• --preset minimal|project-like：模板风格，默认 minimal
• --icons all|lucide|none：图标策略，默认 all
• --package-manager auto|pnpm|npm|yarn|bun：包管理器，默认 auto
• --dry-run：仅预览，不写文件
• --force：覆盖已存在文件

资源说明

• references/repo-tailwind-audit.md
  • 记录当前仓库 Tailwind 链路与历史演进，供“项目同款”策略参考。
• references/tailwind-v4-best-practices.md
  • 记录 Tailwind v4 / Next.js / Iconify 的最佳实践与官方链接。
• assets/templates/minimal/*
  • 通用最小模板，适合跨项目快速落地。模板源文件使用 .tpl 后缀。
• assets/templates/project-like/*
  • 贴近本仓库风格，包含 safe-area、reduced-motion、theme token bridge。模板源文件使用 .tpl 后缀。
  • project-like 模板中的 @layer ... antd ... 为仓库同款特化项；非 Ant Design 项目可按需移除该 layer。

模板后缀约定：

• 模板源：*.tpl
• 目标产物：src/styles/*.css 或 styles/*.css（脚本自动判定）
• init_tailwind_v4.py 严格读取 .tpl，不会回退读取 .css 模板。

输出约束

执行本 skill 时，始终输出：

1. 目标项目识别结果（layout、styles、package manager）
2. 将写入/已写入文件列表
3. 依赖安装命令（按所选包管理器）
4. @source 与 @reference 的建议片段
5. 验证清单（至少 3 条可执行检查项）