[Angular] Set up a new Angular project with Tailwind CSS

1. Use the Angular CLI to generate a barebones project.

   npx @angular/cli@latest new --style css

   You will be prompted to choose a project name (i.e. folder name) and other options for your project.

   Note

   It’s important to choose the css option for the --style flag, as Tailwind v4 does not work well with Sass (SCSS).

   Tip

   For Angular prerequisites and more: https://angular.dev/installation

   Tip

   If you want Angular to use a particular package manager for this project, you can specify it with the --package-manager flag. E.g.

   npx @angular/cli@latest new --style css --package-manager=pnpm

   For more options you can pass to the Angular CLI see: https://angular.dev/cli/new#Options

2. Navigate into the project directory.

   cd <project-name>

3. Install the necessary dependencies for Tailwind CSS, set up a new PostCSS config file, and update your stylesheet to import Tailwind.

   Docs

   https://tailwindcss.com/docs/installation/framework-guides/angular

   Install dependencies:

   npm

   npm i -D tailwindcss @tailwindcss/postcss postcss

   yarn

   yarn add -D tailwindcss @tailwindcss/postcss postcss

   pnpm

   pnpm add -D tailwindcss @tailwindcss/postcss postcss

   Create a .postcssrc.json file in the root of your project:

   .postcssrc.json

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

   Update your styles.css file to import Tailwind CSS:

   src/styles.css

   @import "tailwindcss";

4. Start the development server.

   npm

   npm run start

   yarn

   yarn run start

   pnpm

   pnpm run start

5. Now you can use the Tailwind CSS classes in your Angular templates.