Introduction to Tailwind Best CSS Framework
Tags: html, tailwindcss, productivity, webdev
Published: 2022-01-06 15:11:35

Hello Guys Today i am going to show you the power of Tailwind a CSS framework.
First of All i want to tell you that i was using Bootstrap for the styling part and it is also a good frameword but its design style has become common and little bit old and also it has some limitations which can be fulfilled by Tailwind CSS.

Lets Get started...

##Installation - 
```html
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
```
First of all Add this CDN of Tailwind to your HTML file's Head tag to use the Tailwind for your styling.

###Just like Bootstrap , Tailwind also do your styling by just adding the class names of the style you want to use.

##Example 1 - Basic Styling - 

```html
...
<h1 className='bg-blue-800 text-gray-500 text-center p-5 m-5'>
hello Tailwind
</h1>
...
```

### Explaination - 
* As you can see the class names is similar to like bootstrap classes.
* bg(background)-blue(color name)-800(opacity).
* text-gray(text color)-500(opacity).
* text-center(will center the text).
* p-5(padding of 20px on all sides).
* m-5(margin of 20px on all sides).

####See how you easily you have done the styling to your element without using any css.

##Example 2 - Grid and Flex 

1. Flex
```html
 <div className='flex justify-center gap-5'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
</div>
```
* Flex (will make the element a flexbox).
* justify-center(horizontally align the items centered).
* gap-5(Put a gap of 20px between each element).

2. Grid - 
```html
<div className='grid grid-cols-3 place-content-center text-center h-48 gap-2'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
</div>
```
* grid(make the element as grid).
* grid-cols-3(make a 3x2 grid).
* place-content-center(place all the elements at center).
* h-48(gives the height of 192px).
* gap-2(A gap of 8px).

##Example - 3 Hover effects 
```html
<div className='text-center p-4 bg-purple-900 text-white 
hover:bg-red-700 hover:text-slate-100'>
   <h1 className='hover:scale-125'>Hello Tailwind</h1>
</div>
```
###Explaination - 
* text-center,p-4 ,bg-purplre-900, text-white i have discussed these already.
* hover:bg-red-700 and hover:text-slate-100 (when you hover over the element , the background color will change to red and text color will change to slate with opacity very low).
* Inside H1 tag , hover:scale-125(it will zoom the text by 1.25 times when you will hover over the text).

Documentation - https://tailwindcss.com/docs/installation

Thats it for this tutorial....

NOTE - I have used className attribute instead of class because i am working in react and the class attribute there is written as className. 

## ^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

### THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.

###Also check these posts as well
1. https://dev.to/shubhamtiwari909/animation-with-react-spring-3k22

2. https://dev.to/shubhamtiwari909/text-to-speech-in-reactjs-52ml

3. https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3