Installation of Tailwind CSS
Installation of Tailwind CSS via npm
- Basically Tailwind is available on npm and you can install it using the following command:
npm install tailwindcss
- After that create ad Tailwind configuration file using the following command:
npm tailwind init {name of file}
Installation of Tailwind CSS via yarn
- You can install tailwind by using the yarn command:
yarn add tailwindcss
- After that create ad Tailwind configuration file using the following command:
yarn tailwind init {name of file}
Example: It is a basic example of Tailwind CSS that describes how to change the background color on mouse hover.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Tailwind CSS CDN link -->
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<div class="h-full border-2 border-gray-200
border-opacity-60 rounded-lg
overflow-hidden">
<div class="p-6 hover:bg-green-600
hover:text-white transition
duration-300 ease-in">
<h1 class="text-2xl font-semibold mb-3">
Hover
</h1>
</div>
</div>
</body>
</html>
Output
Tailwind CSS
Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.
Contact Us