mcpField
D
d2-00-angular-tailwind-init

d2-00-angular-tailwind-init

github.com/softinter-chiangraiDevelopment046 installsUpdated 9w ago
Repository

About d2-00-angular-tailwind-init

A development skill for initializing an Angular app with Tailwind CSS using manual setup. It covers project creation, Tailwind configuration, and basic app files.

Key features

  1. 01Create a standalone Angular app
  2. 02Install and configure Tailwind CSS
  3. 03Set up Tailwind content paths
  4. 04Use standard Tailwind classes

Use cases

  1. 01Start an Angular app with routing
  2. 02Configure Tailwind CSS without a schematic

Install

Copy the command and run it in a terminal.

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

After installing, type/d2-00-angular-tailwind-initin Claude Code to confirm it loaded.

Details

From the project README

Day 2 · Step 0 — Create up-app + Tailwind

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

Add .postcssrc.json (or postcss.config.js) registering @tailwindcss/postcss; in src/styles.css:

@import "tailwindcss";

Create tailwind.config.ts for consistent design:

import type { Config } from "tailwindcss";

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

Note: Use standard Tailwind colors and spacing (e.g., bg-blue-500, p-6, gap-4) in templates. This ensures all classes are recognized and styled correctly by 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 — replace entire file with:

<router-outlet/>

No bundled Tailwind schematic in Angular 22 — manual install. Check Tailwind's current Angular docs if wiring errors (changes between majors).

Comments

Markdown supported