Tailwind
Published: 2022-03-03 12:52:48

## What is Tailwind-CSS
Basically, tailwind CSS is a utility-first CSS framework for building custom user interfaces rapidly. It is a highly customizable CSS framework. It’s a framework of packing  with classes like flex, p for padding, m for margin, text-center to centralized text, rotate, bg-color etc, that can be composed to build any design, directly in our project. It is being the most populated CSS framework day by day because of its flexibility.

## Benefits of Tailwind CSS

According to my experience, Tailwind CSS is a framework which is highly customizable. It’s very flexible to make designs. It can be used to make websites in the fastest and the easiest way. Here are no more silly names for CSS classes and Id’s. We can customize the designs to make the components. Also Making the website responsive here is easier. It Can Be Optimized Using PurgeCSS too.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeczi6x3s7viboxe0dq4.jpg)           **Image: Benefits of Tailwind CSS**

**Based on these features,** we can easily say that Tailwind is an excellent solution for developers familiar with CSS who want to speed up the creation and design process in the long run. But It’s not such a good idea if you are not familiar with vanilla CSS and do not want to spend time to learn a new CSS framework.

 

##  Compared with Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for building  responsive web sites. On the other hand,  Tailwind CSS  is the most popular utility-first CSS framework for fast UI development.
If anyone is working with a design, a framework like Bootstrap doesn't help much because of writing most of their own CSS. With Tailwind, that becomes easier because  of the utility classes.
Tailwind is different from frameworks like Bootstrap because  it's not a UI kit. It doesn't have a default theme, and there are no built-in UI components. 

## Use Tailwind CSS

To use tailwind css we can apply two way:__

   First-way:- Install tailwind css via npm,
			
Step-1:- Install:  `npm install -D tailwindcss`
Step-2:- Configure your template paths __tailwind.config.js	
`module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [],
}`

Step-3:-Install:- `npx tailwindcss init`

Step-4:- Add the Tailwind directives to  CSS__src/input.css
`@tailwind base; 
@tailwind components; 
@tailwind utilities;`

Step-5:- Start the Tailwind CLI build process_command

`npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch`

Second-way:-Using Tailwind CSS via CDN,
Link:- <!-- add it to the head section of the html file -->
`<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
	rel="stylesheet">`

## Code with CDN in html file

```
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

</head>

<body>

    <body>
        <div class="container mx-auto">

            <div class="leading-9
                    text-red-700
                    bg-red-500 w-full p-5 my-10
                    border-t-2
                    border-solid
                    border-green-500
                    opacity-40
                    shadow-2xl">
                <h2 class='text-2xl font-bold text-center text-pink-800 uppercase py-2'>Our Top New Brands</h2>

            </div>
            <div class='container mx-auto py-5'>

                <div class='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png"
                            class='w-full p-2' alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png"
                            class='w-full p-2' alt='' />
                    </div>
                </div>
            </div>
    </body>

</html>

```
## Code with npm in react javascript library(Brands.js)file;
      import React from 'react';

```
const Brands = () => {
    return (
        <div className='container mx-auto py-5'>
            <h2 className='text-2xl font-bold justify-center text-pink-800 uppercase pb-6'>Our Top New Brands</h2>

            <div className='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png" className='w-full p-2' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png" className='w-full p-2' alt='' />
                </div>
            </div>
        </div>
    );
};

export default Brands;
```
So, that's all within a short description about Tailwind CSS. I hope readers will benefit at least a little bit.