Tailwind CSS

Tailwind CSS is the first utility CSS framework to design a webpage. We don’t need to override the CSS classes because it has pre-built utility classes that create the desired design. So, for example, If you want to style the custom card, You can design the tailwindcss classes instead of adding a bunch of CSS properties.

What is Tailwind CSS? 

Tailwind CSS is not working on opinionated styles. We can create custom, unique, user-friendly, and modern designs using the low-level CSS utility classes because it hasn’t predesigned components like Bootstrap and MaterializeCSS. You design your website/application using your creativity and pre-made CSS classes. So you don’t need to write any CSS; instead, you use Tailwind CSS classes. if you want to add amazing animations to your design, you can do it easily by its animation classes. 

Why do we use Tailwind CSS?

Maybe you know, we can easily guess the webpage designed in bootstrap or materializes. So if we have to change the look, we need to override the framework CSS. We create each component using their creativity and tailwind CSS utility classes in the tailwind.

So, Let focus on starting to learn if you have any doubts or questions. Leave the comment.

Installation

we can use CLI and CDN, but if we are using CDN, they have some limitations like we can’t customize the default theme and much more things. So if we go using CLI npm to install it,  we can enable all features like group-hover. It’s our choice which is best for which situation. 

Using CLI 

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Tailwind CSS CDN

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

Tailwind Startup project

Further More you can take more info from https://tailwindcss.com/docs. I’ll share with you here best templates in future. 

Thank You