1. Getting Started
  2. Install Tailwind CSS with Angular
  1. Create your project

    Start by creating a new Angular project if you don’t have one set up already. The most common approach is to use Angular CLI.

    ng new my-projectcd my-project
  2. Install Tailwind CSS

    Install tailwindcss via npm, and then run the init command to generate a tailwind.config.js file.

    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init
  3. Configure your template paths

    Add the paths to all of your template files in your tailwind.config.js file.

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
      theme: {
        extend: {},
      plugins: [],
  4. Add the Tailwind directives to your CSS

    Add the @tailwind directives for each of Tailwind’s layers to your ./src/styles.css file.

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  5. Start your build process

    Run your build process with ng serve.

    ng serve
  6. Start using Tailwind in your project

    Start using Tailwind’s utility classes to style your content.

    <h1 class="text-3xl font-bold underline">
      Hello world!