Install TailwindCSS in Angular 14

What is Tailwind CSS?

Tailwind CSS is a "utility-first" CSS framework that provides a wide variety of CSS classes and tools that lets you easily get started styling your website or application.

Tailwind CSS Documentation

Setting up Tailwind in an Angular Project

Step 1: Create a new Angular project if you don’t have one set up already.

ng new your-project-name
cd your-project-name

Step 2: Install tailwindcss via any of the following package managers npm or yarn.

Before installing the packages turn off your angular development server.

This command is for the npm users

 npm install -D tailwindcss postcss autoprefixer

or

This command is for the Yarn users

yarn add -D tailwindcss postcss autoprefixer

What is Post CSS?

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. Post CSS

What is Autoprefixer?

Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes. AutoPrefixer

Step 3: After installation of the above packages it's important to generate a configuration file for tailwind

npx tailwindcss init

this command will create a file tailwind.config.js

Step 4: Configuring the template paths

Add these lines in the tailwind.config.js so that it will compile the tailwind classes used in your project template.

module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 5: in your global styles.css / styles.scss file Add these three lines of code

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

Step 6: add the tailwind class inside the app.component.html To know that the tailwind is set up correctly.

<div class="flex h-screen items-center justify-center">
  <h1 class="text-3xl font-bold underline">The Tech Chronicle</h1>
</div>

Now start your angular development server

ng serve

Expected Output: