Tailwind CSS is one of the best CSS frameworks which helps us to write faster and cleaner CSS

Installation

Let's take a look at the easiest way to install tailwind CSS by adding the Play CDN script https://cdn.tailwindcss.com to your HTML

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
</body>
</html>

this is it. now we can use the tailwind utility class to style the HTML element

let's see one example. I'm going to add the below background color to the HTML element

bg-cyan-500

😂😂 I know this is a little confusing, but trust the process we are going to add the background linear code in the config which will be very handy, without wasting time let's see the first example

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div  class="bg-cyan-500" >
<p>Getting Start With Tailwind Css</p>
</div>
</body>
</html>

let's take a look at what I wrote in class

the number after the color represents the different shades of color, and we can also control the opacity of color using the opacity modifier cyan-500/75, cyan-500/25

Let's add background to the config

config

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            bgColor: 'cyan-500',
          }
        }
      }
    }
  </script>
</head>
<body>
<div  class="bg-bgColor" >
<p>Getting Start With Tailwind Css</p>
</div>
</body>
</html>

Utility-First Fundamentals

Tailwind CSS is known as a utility-first CSS Framework. 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.

Using utilities to style elements on hover

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

hover

For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class:

<button
          class="bg-sky-700 hover:bg-sky-400 h-10 w-32 rounded-full font-bold text-white"
        >
          hover
        </button>

hover active.png

Margin and padding

In tailwind CSS we can add margin by applying the m utility

Examples

class =" m-0" margin : 0
margin on single side
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: "0 4px" in plane CSS the margin will be applied on the x-axis in tailwind CSS we can achieve by using mx-1
*Add vertical margin margin: "4px 0" in plane CSS the margin will be applied on the y-axis in tailwind CSS we can achieve by using my-1

This same goes for padding

In tailwind CSS we can add padding by applying the m utility

Examples

padding on single side
```
 `pt-0` ,  `pr-0 `, `pb-0` , `pl-0` 
```
- Add horizontal Padding px-0
- Add vertical margin py-0

official documentation

flex box

Class	Properties
`flex-row`	flex-direction: row;
`flex-row-reverse`	flex-direction: row-reverse;
`flex-col`	flex-direction: column;
`flex-col-reverse`	flex-direction: column-reverse;

Responsive Design 📲

Using responsive utility variants to build adaptive user interfaces.

Overview Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

There are five breakpoints by default, inspired by common device resolutions:

Tables	Minimum width	CSS
`sm`	768px	`@media (min-width: 640px) { ... }`
`md`	1024px	`@media (min-width: 768px) { ... }`
`xl`	1280px	`@media (min-width: 1024px) { ... }`
`2xl`	1536px	`@media (min-width: 1280px) { ... }`

Getting Start With Tailwind CSS