Tailwind CSS is one of the most popular CSS Framework.
Unlike Bootstrap, Tailwind CSS is a utility-first framework, i.e. it provides a set of pre-defined utility classes like flex, pt-4, text-center and rotate-90 that you may use to build your own user interfaces.
Let's see a simple "Hello World!" example to get started.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS Hello, World!</title>
</head>
<body>
<div class="bg-blue-500 text-white p-4">
<h1 class="text-4xl font-bold">Example Tailwind CSS - Code2care</h1>
<p class="text-lg mt-4">Hello World! Tailwind CSS.</p>
</div>
</body>
</html>
What's amazing is all you need to do is add <script src="https://cdn.tailwindcss.com"></script> and start using Tailwind CSS classes in your HTML code.
Provide Feedback For This Article
We take your feedback seriously and use it to improve our content. Thank you for helping us serve you better!
😊 Thanks for your time, your feedback has been registered!
Comments & Discussion
Facing issues? Have questions? Post them here! We're happy to help!