Reports

Some rule changed with Tailwindcss V4.

V4 Angular init tutorials with CSS file, and use tailwindcss/postcss plugin.

Different vs V3

V4 not include/create tailwindcss.config.js file default, v4 need .postcss.json in Angular higher ver
V4 tutorial with styles.css in Angular project root, not styles.scss. so some usage changed.
styles.css need add @import "tailwindcss"; not like v3 add some "@tailwindcss "xxx"; "
V4 with CSS file in Angular Component, need add other statement: "@import "tailwindcss"" if you want to use @apply
The "dark" mode in manual setting, the tailwindcss v4 need add "@custom-variant dark (&:where(.dark, .dark *));" this statement in styles.css;
But if you want to use dark: in other component (lazy routing or lazy component), you must add "@import "tailwindcss";" in other css file(.css) and muse add "@custom-variant dark (&:where(.dark, .dark *));" again.

Add TailwindCSS v4 in Angular Higher Version flows:

Add TailwindCSS to project

npm install tailwindcss @tailwindcss/postcss postcss --force

Create postcss config

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Add TailwindCSS in root styles.css
```
@import "tailwindcss";
```

Set dark mode support (optional) in root styles.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *)); /* <html class="dark"> */

In other lazy component/module (must): src/dashboard/slidebar/slidebar.css

@import "tailwindcss"; /* for @apply usage */

@custom-variant dark (&:where(.dark, .dark *)); /* for dark:text-white usage */

.menu-item {

@apply flex flex-row w-full h-32 text-slate-100 dark:text-white;

} 

.menu-item.active { @apply text-slate-800 dark:text-slate-100; }

79686801