How to setup Tailwind CSS in AngularJS ? - GeeksforGeeks

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/ 
AngularJS-Questions
Picked
Tailwind CSS
AngularJS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form