Tailwind is a utility-first CSS framework. In contrast to other CSS frameworks like Bootstrap or Materialize CSS it doesn’t come with predefined components. Instead Tailwind CSS operates on a lower level and provides we with a set of CSS helper classes. By using this classes we can rapidly create custom design with ease.

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

Some benefits of Using Tailwind CSS

It's fast, flexible, and reliable — with zero-runtime.
Faster UI building process
No more silly names for CSS classes and Id’s. Minimum lines of Code in CSS file.
CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.
We can customize the designs to make the components. Makes the website responsive.

Installation of Tailwind CSS

Before using tailwind css we need to install them in our project. There are different ways to install them

Add the play CDN script tag to the head of your HTML file.
```
script src="https://cdn.tailwindcss.com"></script>
```
Try Customizing your config Edit the tailwind.config object to customize your configuration with your own design tokens.
```
<script>
tailwind.config = {
theme: {
  extend: {
    colors: {
      myblue: '#2827CC',
    }
  }
}
}
</script>
```

Try adding some custom CSS Use type="text/tailwindcss" to add custom CSS that supports all of Tailwind's CSS features.

<style type="text/tailwindcss">
@layer utilities {
 .content-auto {
   content-visibility: auto;
 }
}
</style>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>

Utility-first

Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.

Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.

Below example we can see the button without using single line of CSS:

 <button class="bg-[#008060] m-3 rounded-full px-4 py-1 border-black" >
Submit
</button>

Flex-box in tailwind CSS

The flex feature enables us to create a responsive layout for various screen sizes. This means that different screen sizes will display your content differently. This feature is helpful for situations where we want to create a layout that adapts to different screen sizes.

Flex-direction

Utilities for controlling the direction of flex items. It uses below classes for the specified properties

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;

Flex-wrap

It uses below classes for the specified properties.

class	Properties
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

#Flex

Utilities for controlling how flex items both grow and shrink.

class	Properties
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

#Handling Hover, Focus, and other States

Tailwind includes modifiers for just about everything you’ll ever need, including:

Pseudo-classes, like :hover, :focus, :first-child, and :required
Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection
Media queries, like responsive breakpoints, dark mode, and prefers-reduced-motion
Attribute selectors, like [dir="rtl"] and [open]

For example, if you want to apply the bg-[#008060] class on hover, use the hover:bg-[#004C3F] class:

<button class="bg-[#008060] m-3 rounded-full px-4 py-1 border-black hover:bg-[#004C3F]" >
Submit
</button>

Output:

Screenshot 2022-08-23 022520.png

After hovering:

Screenshot 2022-08-23 022606.png

Tailwind CSS Container

In Tailwind CSS, a container is used to fix the max-width of an element to match the min-width of the breakpoint. It comes very handy when content has to be displayed in a responsive manner to every breakpoint.

Breakpoints in tailwind CSS are as follows:

Breakpoint	min-width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Tailwind CSS Display

This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS display property. This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.

Display Classes:

class	function
block	It is used to display an element as a block element.
inline-block	It is used to display an element as an inline-level block container.
inline	It is used to display an element as an inline element.
flex	It is used to display an element as a block-level flex container.
inline-flex	It is used to display an element as an inline-level flex container.
grid	It is used to display an element as a block-level grid container.
inline-grid	It is used to display an element as an inline-level grid container.
contents	It is used to disappear the container.
hidden	It is used to remove the element.

Tailwind CSS

Table of contents