TailWind CSS
1. first copy below code and paste it under HTML head.
<script src="https://cdn.tailwindcss.com"></script> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
px-4 -------------padding
mx-4----------margin
bg--green-600 -----------background color green
text-white -----------change text color
cursor-pointer---------it will show cursor poiter
h-10--------------height
pl-4---------padding left
w-1/2--------------Text width
install "Tailwind CSS intelligence" extension
Font Sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<h1 class="font-bold mx-2 text-3xl">This is Header 1 </h1>
<h2 class="font-bold mx-2 text-2xl">This is Header 2 </h2>
<h3 class="font-bold mx-2 text-xl">This is Header 3 </h3>
<h4 class="font-bold mx-2 text-lg">This is Header 4 </h4>
<div class="mx-5 font-sans">I am using mx-5</div>
<div class="mx-5 font-serif font-extrabold">This is font extra bold</div>
<div class="mx-5 font-mono text-red-400">I am using mx-5</div>
<div class="mx-5 font-sans">I am using mx-5</div>
<div class="mx-5 font-sans tracking-widest">This is letter spacing tracking</div>
</body>
</html>
Margin Border Padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<!-- <div class="-mx-2">
This is mx-2
</div> -->
<nav>
<ul class="flex space-x-3">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div>
<div class="border-2 border-green-500 rounded-lg w-56 mx-8 px-8 bg-red-500 text-white">
I am a div
</div>
</div>
</body>
</html>
Square Bracket Notation in Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="mx-4 bg-red-900 text-white my-[3rem] w-[30vw]">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui beatae tenetur
repudiandae! Veritatis cum unde expedita aut saepe minus asperiores blanditiis commodi in quo
incidunt reprehenderit ullam error, amet dolores.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="lg:hidden text-sm sm:bg-green-100 mx-4 lg:bg-black-500 bg-red-900 text-black my-[3rem] w-[30vw]">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui beatae tenetur repudiandae! Veritatis cum unde expedita aut saepe
minus asperiores blanditiis commodi in quo incidunt reprehenderit ullam error, amet dolores.
</div>
<div class="hidden text-sm sm:bg-green-100 mx-4 lg:bg-black-500 bg-red-900 text-black my-[3rem] w-[30vw]">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui beatae tenetur repudiandae! Veritatis cum unde expedita aut saepe minus
asperiores blanditiis commodi in quo incidunt reprehenderit ullam error, amet dolores.
</div>
</body>
</html>
Hover, Focus & Other States in Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="m-36">
<button class="active:bg-purple-300 focus:bg-black rounded-md hover:bg-green-400 px-4 py-2 bg-purple-500 text-white text-sm ">Click Here</button>
</div>
</body>
</html>
@apply directive in Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="mx-4 bg-red-900 text-white">
This is a div This is a This is aThis is a
<button class="bg-green-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">Button</button>
<button class="bg-red-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full">Button</button>
</div>
</body>
</html>
layer Directive in Tailwind:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="mx-4 bg-red-900 text-white">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut itaque similique consequuntur
blanditiis, ipsum minima, quo modi quos voluptatibus ducimus excepturi corporis?
</div>
<div class="mx-4">
<button class="text-white px-2 py-1 rounded-xl text-sm bg-red-600">Click Me</button>
</div>
</body>
</html>