mcpField
D
d2-00-angular-tailwind-init

d2-00-angular-tailwind-init

github.com/softinter-chiangrai開発046 回インストール9 週間前に更新
リポジトリ

d2-00-angular-tailwind-init について

手動設定で Angular アプリと Tailwind CSS を初期化する開発スキルです。プロジェクト作成、Tailwind の設定、基本的なアプリファイルを扱います。

主な機能

  1. 01スタンドアロン Angular アプリの作成
  2. 02Tailwind CSS の導入と設定
  3. 03Tailwind のコンテンツパス設定
  4. 04標準 Tailwind クラスの使用

活用シーン

  1. 01ルーティング付き Angular アプリの開始
  2. 02schematic を使わない 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 対応