mcpField
D
d2-00-angular-tailwind-init

d2-00-angular-tailwind-init

github.com/softinter-chiangrai开发046 次安装10 周前更新
代码仓库

关于 d2-00-angular-tailwind-init

用于通过手动配置初始化 Angular 与 Tailwind CSS 项目的开发技能，涵盖项目创建、Tailwind 配置和基础应用文件。

主要功能

  1. 01创建独立模式的 Angular 应用
  2. 02安装并配置 Tailwind CSS
  3. 03设置 Tailwind 内容路径
  4. 04使用标准 Tailwind 类名

适用场景

  1. 01启动带路由的 Angular 应用
  2. 02不依赖 schematic 配置 Tailwind CSS

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/softinter-chiangrai/up-ai-skill-training --skill d2-00-angular-tailwind-init

安装后在 Claude Code 中输入/d2-00-angular-tailwind-init确认已加载。

详细介绍

第 2 天 · 步骤 0 — 创建 up-app + Tailwind

ng new up-app --routing --style=css --standalone
cd up-app
npm install tailwindcss @tailwindcss/postcss postcss --save-dev

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

@import "tailwindcss";

创建 tailwind.config.ts，以保持设计一致：

import type { Config } from "tailwindcss";

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

注意： 在模板中使用标准 Tailwind 颜色和间距（例如 bg-blue-500、p-6、gap-4）。这样可确保 Tailwind 能正确识别并应用所有类。

src/app/app.ts：

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

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

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

<router-outlet/>

Angular 22 中没有内置的 Tailwind 原理图，需手动安装。如果接线时报错，请查看 Tailwind 当前的 Angular 文档（不同大版本之间可能会有变更）。

评论

支持 Markdown