D2 00 Angular Tailwind Init

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).