Using Tailwind CSS with Angular

Tailwind CSS is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.

Setting up Tailwind CSS

1. Create an Angular project

First, create a new Angular project if you don't have one set up already.

ng new my-projectcd my-project

2. Install Tailwind CSS

Next, open a terminal in your Angular project's root directory and run the following command to install Tailwind CSS and its peer dependencies:

npm install tailwindcss @tailwindcss/postcss postcss

3. Configure PostCSS Plugins

Next, add a .postcssrc.json file in the file root of the project. Add the @tailwindcss/postcss plugin into your PostCSS configuration.

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

4. Import Tailwind CSS

Add an @import to ./src/styles.css that imports Tailwind CSS.

@import "tailwindcss";

If you're using SCSS, add @use to ./src/styles.scss.

@use "tailwindcss";

5. Start using Tailwind in your project

You can now start using Tailwind's utility classes in your component templates to style your application.

For example, you can add the following to your app.html file:

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

6. Start using Tailwind in your project

Run your build process with ng serve and you should see the styled heading.

Additional Resources

• Tailwind CSS Documentation