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: 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.
Top comments (0)