d2-00-angular-tailwind-init

用途

该技能用于初始化一个名为 up-app 的 Angular 22 项目，并为其集成 Tailwind CSS。它被定位为 CRUD 练习 Day 2 的第 0 步，即项目脚手架搭建阶段。触发方式为“day2 step0”或“create up-app”。

主要能力

• 使用 Angular CLI 创建带路由、CSS 样式和独立组件（standalone）配置的新项目 up-app。
• 以开发依赖方式安装 Tailwind CSS 及其 PostCSS 相关包。
• 配置 PostCSS 以注册 @tailwindcss/postcss 插件。
• 在全局样式文件中引入 Tailwind。
• 提供 tailwind.config.ts 模板，用于统一设计配置。
• 提示在模板中使用标准 Tailwind 颜色与间距类，确保样式被正确识别。

使用方式

1. 创建项目：

ng new up-app --routing --style=css --standalone
cd up-app

1. 安装依赖：

npm install tailwindcss @tailwindcss/postcss postcss --save-dev

1. 添加 .postcssrc.json（或 postcss.config.js），注册 @tailwindcss/postcss；在 src/styles.css 中加入：

@import "tailwindcss";

1. 创建 tailwind.config.ts：

import type { Config } from "tailwindcss";

export default {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;

1. 在 src/app/app.ts 中配置根组件：

import { RouterOutlet } from '@angular/router';

export const AppComponent = {
  selector: 'app-root',
  // ... other metadata
  imports: [RouterOutlet],
  template: `<router-outlet/>`
};

1. 将 src/app/app.html 整个文件替换为：

<router-outlet/>

适用场景

适用于需要从零搭建 Angular 22 项目并启用 Tailwind CSS 的练习或教学场景，尤其是 CRUD 练习的初始步骤。

限制与注意事项

• Angular 22 没有内置的 Tailwind 原理图（schematic），必须手动安装。
• 若接线出现错误，可查阅 Tailwind 当前的 Angular 文档，因为不同主版本之间配置方式可能变化。
• 在模板中应使用标准 Tailwind 颜色和间距类（例如 bg-blue-500、p-6、gap-4），以确保所有类被 Tailwind 正确识别和渲染。
• 关于收费、价格、平台支持范围等信息，资料中暂未提供。