Get started with Tailwind CSS (Using CDN)
Hello Developers,
The tutorial will show you to simply add a CDN of TailwindCSS and work around it. This is a simple task that you may see a lot. If you are not familiar with TailwindCSS, this tutorial is for you.
Simply open an HTML file and add the CDN to import TailwindCSS
<script src="https://cdn.tailwindcss.com"></script>
Then copy and paste the below code into the index.html file. Here we show three different fonts to show some static value.
/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<div>
<h1 class="font-sans">
This is the title tag
</h1>
<h2 class="font-serif">
This is the sub-title tag
</h2>
<p class="font-mono">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</body>
</html>
I hope this might help you in the journey of development.
Read More: How to set up TailwindCSS for a project (Using CLI)?
K. M. Shawkat Zamil
Senior Software Engineer
I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.