Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to setup Tailwind CSS in AngularJS ?

  • Last Updated : 01 Jul, 2021

What is Tailwind CSS?

According to the official documentation, 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.

What is Angular?

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 lets start with creating a new angular project and setup Tailwind CSS in the angular project.



Setting up new Angular Project:

  • Open CMD (Window) or Terminal (Linux) and write command.
ng new project-name
  • After running the above command, it asks some question as shown below, related to CSS which is basically the CSS type you want to use in your angular project. Let Select CSS for this project.
  • It also ask for routing let enable it by saying yes.

Let them finish the above process.

  • Once process is completed, there is project folder. Get into the folder using change directory command of CMD or Terminal and run following command.
ng serve --open
  • It will open the default page of angular in the browser.

Angular setup is done let 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 favourite Code Editor.
  • Browse the index.html of angular project.
  • Just paste the below line in the head section.

<link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”>

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

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

Using PostCSS:

  • Open the project directory in the cmd or terminal and run following command.
npm install tailwindcss postcss autoprefixer
  • Above command install require library for tailwind to run. Let’s config the tailwind css and postcss. For that we can create a file with name of 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 setup into the project.

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

Ref: https://tailwindcss.com/ 

My Personal Notes arrow_drop_up
Recommended Articles
Page :