Install Tailwind CSS in Angular

Install tailwind in angular

Steps1 : Create project in Angular

ng new my-project
cd my-project

Step 2: Install Tailwind as local dependency

npm install -D tailwindcss postcss autoprefixer

Step 3: run the init command to generate a tailwind.config.js file.

npx tailwindcss init

Step 4: Configure your template paths- File created at

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Add the Tailwind directives to your CSS- add in style.css file

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

Step 6: Add below code in angular app.component.html for test

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Top Angular courses

If you are a front end Web developer or you wants to learn Angular for web development and looking for some excellent video tutorial then you have come to the right place. In this article, I am going to share best Angular courses to learn web development in 2021. If you don’t know what is Angular and how it helps you to develop web development.
Angular is one of the popular Javascript front-end frameworks By Google. Now a day most of company wants from fresher they have atleast basic knowlege of angular.Angular is a single page web application that runs on a browser.
It uses TypeScript programming language, a superset of JavaScript, which more features for writing better code. Angular is highly scalable and provide good performace.

Now most of the companies are using Angular web develop.

1. Angular – The Complete Guide (2021 Edition)

This is the best Angular course. Max is explaining each concept and create project inside that.

In this tutorial you can learn Component, Services, Databinding, Dependency injection, Pipes, Directive, Authentication, Authorization

In this tutorial you can learn TypeScript, Angular Universal. You can click below image purchase this tutorial.

This course is already purchased by 1.4 million people and rated 4.6.

What you’ll learn in this course

Develop modern, complex, responsive and scalable web applications with Angular 12

Fully understand the architecture behind an Angular application and how to use it

Use the gained, deep understanding of the Angular fundamentals to quickly establish yourself as a frontend developer

Create single-page applications with one of the most modern JavaScript frameworks out there

2. The Complete Angular Course: Beginner to Advanced

This course is from Mosh Hamedani. He explains very well. In this tutorial you will learn all concepts of Angular.

What you’ll learn in this video tutorial

Build real-world Angular applications on your own

Master the best practices

Write clean and elegant code like a professional developer

Troubleshoot common Angular errors

3. Complete Angular 11 – Ultimate Guide – with Real World App

What you’ll learn

Angular Material (UI Components)

Add Angular to your prior knowledge of any Server technology (Asp .Net Core Mvc, NodeJS, Python, Java etc.), to become successful Full-stack developer and get new career opportunities

Secure Angular applications using the most-recommended – JWT Authentication

Create Angular Apps From Scratch and scale it up to any level

4. Angular & NodeJS – The MEAN Stack Guide [2021 Edition]

What you’ll learn

Build real Angular + NodeJS applications

Use ExpressJS as a NodeJS Framework

Connect any Angular Frontend with a NodeJS Backend

Use MongoDB with Mongoose to interact with Data on the Backend\

Understand how Angular works and how it interacts with Backends

Improve any Angular (+ NodeJS) application by adding Error Handling

What is TypeScript. Its Installation and Features

Typescript is a superset to JavaScript. It offers more feature than JavaScript like

  • Classes
  • Interface
  • Strong Typing
  • and many more

Vanilla JavaScript has dynamic typing. Typescript does not run in the browser, So it is compiled to JavaScript in the end.

Installation

To install TypeScript locally you first need to install NodeJS in your PC. You can click on https://nodejs.org/en/ link and install NodeJS.

If NodeJS is already install in your pc then copy TypeScript command from below and run copied command in command prompt. Below command is only applicable to you current Project/folder

npm install typescript

If you want to install TypeScript globally then copy below command and execute in command prompt. -g stands for globally

npm install -g typescript

Compilation

Below simple example is add two values. In this example you can see add function contains two number type argument which I define a: number.

You can compile by execute below command

npx tsc add.ts

One more file is created with same name but extension is js that is add.js

If you pass string in add function it will give error in compilation