How to setup Tailwind CSS in AngularJS ?

Last Updated : 06 Sep, 2022

In this article, we will see how to set up the Tailwind CSS in AngularJS & will understand the different ways for implementation through the examples.

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

So, let’s start with creating a new angular project and setting up Tailwind CSS in the angular project.

Setting up new Angular Project:

Open CMD (Window) or Terminal (Linux) and write the command.

ng new project-name

After running the above command, it asks some questions as shown below, related to CSS which is basically the CSS type you want to use in your angular project. Let’s select CSS for this project.
It also asks for routing let enables it by saying yes.

Let them finish the above process.

Once the process is completed, there is a project folder. Get into the folder using the change directory command of CMD or Terminal and run the following command.

ng serve --open

It will open the default page of angular in the browser.

Angular setup is done & let’s move to install the Tailwind CSS in the angular.

Installing Tailwind CSS in the Angular Project: There are 2 ways to add tailwind CSS in the Angular Project.

Using CDN
Using PostCSS and command line configuration

Using CDN:

Open the project in your favorite Code Editor.
Browse the index.html of the angular project.
Just paste the below line in the head section.

<script src="https://cdn.tailwindcss.com"></script>

It will include all the libraries of the tailwind in the project using the internet. It is an easy way to include the tailwind.

Note: It requires internet. If the internet is not available then it will not work.

Example 1: This example describes the basic implementation of the Tailwind CSS in AngularJS by using the CDN link.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Tailwind-AngularJS Example</title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <script src="https://cdn.tailwindcss.com"></script> 
</head> 
  
<body> 
    <div class="font-sans text-center"> 
        <h1 class="text-green-800 text-5xl p-7"> 
            GeeksforGeeks 
        </h1> 
        <p class="text-indigo-700 text-3xl"> 
            A Computer Science Portal for Geeks 
        </p> 
  
    </div> 
</body> 
  
</html>

Output:

Using PostCSS:

Open the project directory in the cmd or terminal and run the following command.

npm install tailwindcss postcss autoprefixer

The above command install requires a library for a tailwind to run. Let’s config the tailwind CSS and postcss. For that, we can create a file with the names tailwind.config.js and postcss.config.js in the project file.

tailwind.config.js:

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Now tailwind CSS is ready to use in your Angular project and it is successfully set up in the project.

Now you can use tailwind inline CSS and make more hands dirty you can refer to the tailwind website.

Example 2: This example describes the basic implementation of the Tailwind CSS in AngularJS by installing the tailwind CSS using npm.

app.component.html

<div class="font-serif text-center"> 
    <h1 class="text-green-800 text-5xl p-7"> 
        GeeksforGeeks 
    </h1> 
    <p class="text-indigo-700 text-3xl"> 
        A Computer Science Portal for Geeks 
    </p> 
  
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent{}

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
  
import { AppComponent } from './app.component'; 
  
@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule{}