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 -
<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 -
...
<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
- Flex
<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).
- Grid -
<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
<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 <--
Top comments (0)