Tailwind v4 in Angular Nx Workspaces: Fix Your Bloated CSS Output

Tailwind v4 scans your entire Angular + Nx monorepo by default, resulting in bloated CSS with unused styles. Learn how to optimize your Angular Nx workspace by restricting Tailwind's scanning scope and automatically syncing @source directives with your dependency graph. 🔗 Resources: - Blog post: https://nx.dev/blog/setup-tailwind-4-angular-nx-workspace - Video: Tailwind v4 in an NPM workspace: https://www.youtube.com/watch?v=tg3LnqhNNws - nx-tailwind-sync package: https://github.com/juristr/nx-tailwind-sync - PostCSS plugin by Poul Hansen: https://gist.github.com/Phhansen/66cd0e4baeabe154d7d20691d709a421 - Tailwind docs on detecting classes: https://tailwindcss.com/docs/detecting-classes-in-source-files - Nx sync generators: https://nx.dev/concepts/sync-generators 📚 Chapters: 00:00 The problem with Tailwind v4 in monorepos 00:16 Demo setup: Angular app with shared libraries 01:02 Setting up Tailwind with Angular 01:53 How Tailwind v4 automatic scanning works 02:29 Unused styles ending up in your build 03:09 Solution 1: Restrict scanning with base directory 04:00 Using @source directives manually 04:55 Automating with nx-tailwind-sync 05:40 Installing and registering the sync generator 07:01 Configuring source restriction in styles.css 09:42 Alternative: PostCSS plugin approach