Tailwind css:

Tailwind CSS is a low-level framework, which means, unlike other CSS frameworks like Bootstrap and Materialize, Tailwind doesn’t offer fully styled components like buttons, dropdowns, and navbars. Instead, it offers utility classes so you can create your own reusable components.

Add tailwind using Play CDN :

Add the play CDN script tag to the head of your HTML file.

```

2. Config:

Edit the tailwind.config object to customize your configuration with your own design tokens.

```<script>
 tailwind.config = {
   theme: {
     extend: {
       colors: {
         clifford: '#da373d',
        bgcolor:'#ff3453h',
       }
     }
   }
 }
</script>

3.Responsive Design :

Tailwind is a mobile first framework, its made our life easy in terms of making responsive websites.tailwind CSS has predefined classes which are to be written in the HTML markup. These classes(like flex, justify-between, bg, spacing) style the document without requiring writing CSS. It can make the website responsive.

Breakpoint prefix: Minimum width

sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px

4.Background Color:

Here, we defined a class in the body tag as class="bg-blue-500". bg is a predefined class for background color. It changes the background color to blue with strength 500 strong.

<div class="bg-blue-500"></div>

5.Padding :

Utilities for controlling an element's padding.

6.Margin:

class =" m-0" margin : 0 margin on all sides

margin-top class="mt-1"

mt-1 the value 1 would be calculated as 4px or 0.25rem, The same goes for margin-right, margin-left and margin- bottom respectively the utility classes represented as mr, ml, mb

Add horizontal margin margin:

margin will be applied on the x-axis in tailwind CSS we can achieve by using mx-1

Add vertical margin margin:

margin will be applied on the y-axis in tailwind CSS we can achieve by using my-1

6.flexbox in tailwindcss :

The flex feature enables you to create a responsive layout for various screen sizes. This means that different screen sizes will display your content differently.

Flex Direction:

flex-row
flex-row-reverse
flex-col
flex-col-reverse

For flex-wrap, it uses the below class:

flex-wrap for the property flex-wrap: wrap;
flex-wrap-reverse for the property flex-wrap: wrap-reverse;
flex-nowrap for the property flex-wrap: nowrap;

How to use Hover in tailwindcss :

The hover and focus features allow you to create a hover-based action that appears when a user hovers over an element. For example, if you want to apply the bg-red-400 class on hover, use the hover:bg-red-400 class:

<button class="bg-red-800 hover:bg-red-400">
  Save changes
</button>

There are many more in Tailwindcss; you can explore the Tailwind Docs for more classes.

Thankyou for reading the blog if you found it helpful do give it a thumbs up and please add your valuable inputs as well:-)

Tailwind Css