Angular + Tailwind CSS 4 starter

A minimal Angular 19 project with Tailwind CSS 4 wired in through PostCSS, ready to use as a template.

• Angular 19.1 with standalone components (no NgModules), the application builder and a router config ready to fill in.
• Tailwind CSS 4.0 set up the v4 way: no tailwind.config.js, just the @tailwindcss/postcss plugin in .postcssrc.json and @import "tailwindcss"; in src/styles.css.
• A single AppComponent that renders a heading styled with Tailwind utility classes, so you can confirm the setup works.
• Karma and Jasmine for unit tests, as generated by the Angular CLI.
• A .npmrc with legacy-peer-deps=true. Angular 19.1's build package lists Tailwind 2 or 3 as an optional peer, so npm refuses to install Tailwind 4 without it.

.postcssrc.json:

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

src/styles.css:

@import "tailwindcss";

The Angular build picks up the PostCSS config automatically. Tailwind 4 scans your templates for class names on its own, so there is no content list to maintain. To customize the theme, add an @theme { ... } block in src/styles.css.

1. Clone it into a new folder:

   git clone https://github.com/manthanank/angular-tailwindcss.git my-app
   cd my-app
   rm -rf .git && git init

2. Rename the project: change name in package.json and the angular-tailwindcss project key in angular.json.

3. Replace the contents of src/app/app.component.html with your own markup and start adding components and routes (src/app/app.routes.ts).

Requires Node.js 18.19 or later.

npm ci
npm start

Then open http://localhost:4200/. The page reloads when you change a source file.

MIT