Configure Tailwind

Welcome to this free course for learning how to create an enterprise Angular project from scratch by using only Standalone Components.

Add Tailwind

The Tailwind doc page does a really great job at describing how to setup your project. Let’s see all the required steps to successfully add Tailwind to our Angular Project.

Install all the required dependencies:

pnpm add -D tailwindcss postcss autoprefixer

Then initialize Tailwind:

pnpm dlx tailwindcss init

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind by modifying styles.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

And we’re done!

You can now use all the cool features offered by Tailwind in your Angular project.

The Github Repo

What’s next

In the next chapter, we’ll see how to create our first Standalone Directive for the UI package.