DEV Community

Cover image for Introduction to Tailwind Best CSS Framework
Mysterio
Mysterio

Posted on

Introduction to Tailwind Best CSS Framework

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>
Enter fullscreen mode Exit fullscreen mode

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>
...
Enter fullscreen mode Exit fullscreen mode

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
 <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>
Enter fullscreen mode Exit fullscreen mode
  • Flex (will make the element a flexbox).
  • justify-center(horizontally align the items centered).
  • gap-5(Put a gap of 20px between each element).
  1. 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)