Angular 15 How to integrate Tailwind CSS with example?

In this tutorial, How to integrate tailwind CSS in the Angular framework. It also includes how to use the tailwind CSS button in an angular component.

Angular is a front-end open-source framework written by Google company. It is based on writing components in the Typescript language.

Angular 15 is the recent and latest version of Google.

#Angular 15 TailwindCSS Example

• Step 1 Create Angular Application

• Step 2 Add TailwindCSS dependency to angular using npm

• Step 3 Create tailwind configuration

• Step 4 Add tailwind CSS styles globally

• Step 5 Angular component to use tailwind component.

Tailwind CSS is a popular CSS framework like Bootstrap, Bulma, and Angular Material. You can check my other post on Adding foundation in Angular

#Create an Angular Application

Check whether Angular CLI is installed or not using the below command.

ng --version

if it gives an ‘ng command not found error, You need to install ng command is an angular CLI to create an angular application with a prototype folder structure

Install Angular CLI using the below command

npm install -g @angular/cli

It installs angular CLI globally and the ng command works now.

To check whether angular CLI is installed correctly or not use the below command.

B:\blog\nodejsless>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3
@angular-devkit/core         13.0.3
@angular-devkit/schematics   13.0.3
@angular/cli                 13.0.3
@schematics/angular          13.0.3

The next step is to create an angular application

ng new angular-tailwindcss-app

Create an application with default settings and It creates an application. blueprint with required dependencies.

Once the application is created, Please run the application

npm run start
(or)
ng serve

It runs the angular application and is accessed at http://localhost:4200

#Add TailwindCSS to angular using npm

There are multiple ways we can integrate into angulars such as tailwind CLI and postcss approach.

tailwindcss is an npm library wrapper for the Tailwind CSS framework.

First, Install tailwindcss as a devDependencies(-D) into the angular app Next also install postcss

npm install -D tailwindcss postcss@latest autoprefixer@latest

It installs and adds tailwindcss as the devDependencies section in package.json.

{
  "devDependencies": {
    "tailwindcss": "^3.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5"
  }
}

#Create tailwind configuration

The next step is to create a tailwind configuration.

You can create a tailwind.config.js file manually or using the tailwind CLI tool.

In the application root folder, run the below command to create tailwind.config.js

A:\angular-tailwindcss-app>npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

It creates a tailwind.config.js file with the below content

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

#Add tailwind CSS styles globally

You have to include tailwind base, components, and utility components in application-style files.

If your application is using CSS, You have to include the below CSS in styles.css

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

in case, if the application uses sass, you have to import tailwind CSS components

styles.scss:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

#Angular component to use tailwind component

In angular app.component.html, you can use tailwind components and apply styles in app.component.scss

In this component, Going to add a button with styles to the angular component.

Next, add button code to app.component.html

<h1 class="text-3xl font-bold underline">Simple Tailwindo CSS application</h1>
<button class="btn btn-blue">Submit</button>

In app.component.scss, please add button styles

.btn-blue {
  @apply bg-red-500 text-white;
  :hover {
    @apply bg-red-700;
  }
}
.btn {
  @apply font-bold py-2 px-4 rounded;
}

This shows the tailwind CSS styles button on the page.

#Conclusion

Step by step tutorial explained about

• install Angular 15 cli
• Create a new angular application
• Integrate tailwindcss into the angular app
• Configure foundation CSS/scss styles
• Create an Angular component
• Tailwind CSS Button example