Tailwind CSS basic usage

*Tailwind CSS * is an open source CSS framework. It enables us to implement CSS in our application in a much simpler way. The way it does this is by giving us utility-classes(meaning you just have to name a class accordingly to implement a specific style in a component or element and does not have to define the style completely write the style for that component or element). This will be cleared by seeing the examples below.
Tailwind CSS differs from different frameworks like Bootstrap in the way that in Tailwind, utility classes are build upon style elements unlike in Bootstrap where utility-classes are build upon components. Like 'bg-blue-400' gives style blue background style when applied on an element like button where as in bootstrap, we write 'Primary' which gives an already defined button with specific style. So, this enables us to more specifically design our component while writing our html in our own way.
Here are some basic utility classes which are used to implement CSS property in our project.

1. Margin and padding -
Tailwind CSS Classes: m-{size}, p-{size}

<div class="m-4 p-6 ">Lorem ipsum dolor sit amet</div>

2. Width and Height -
Tailwind CSS Classes: w-{size}, h-{size}

<div class="w-64 h-32 "></div>

3. Background and Text Color -
Tailwind CSS Classes: bg-{color}-{strength}, text-{color}

<div class="bg-green-300 text-white">Colored Content</div>

4. Font size and font weight -
Tailwind CSS Classes: text-{size}, font-{weight}

<p class="text-lg font-semibold">Large Bold Text</p>

5. Borders and Border Radius -
Tailwind CSS Classes: border, border-{size}, rounded, rounded-{size}

<div class="border border-gray-400 rounded-lg ">
  Bordered and Rounded
</div>

6. Positioning -
Tailwind CSS Classes: top-{size}, right-{size}, bottom-{size}, left-{size}

<div class="absolute top-0 left-0 ">Top Left</div>

7. Flexbox -
Tailwind CSS Classes: flex, inline-flex, flex-{direction}, flex-wrap, justify-{content}, items-{alignment}

<div class="flex justify-center items-center ">
  Centered Content
</div>

These are some of the basic CSS properties. If you want to know about more properties, go to tailwindcss.com and search for the property you need to implement.