Integrating Tailwind CSS into your HTML project using a CDN (Content Delivery Network) is straightforward and doesn't require any complex build tools. This approach is excellent for quick prototypes or small projects. Here's how you can do it.
Get the CDN link
First, you need the CDN link for Tailwind CSS. You can get the latest link from https://tailwindcss.com/docs/installation/play-cdn the Tailwind CSS official website.
Add the CDN link to your HTML file
Inside the <head> tag of your HTML file, add the link to the Tailwind CSS CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 3 CDN</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Your content here -->
</body>
</html>
Start using Tailwind CSS in your HTML
Now, you can start using Tailwind CSS classes within your HTML content. Here’s a very basic example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 CDN</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="text-center py-5">
<h1 class="text-5xl text-blue-700">Welcome to My Website</h1>
<p class="text-lg text-gray-800">
This is a paragraph with some text. Isn't it grand?
</p>
</div>
</body>
</html>
tailwind cdn
Customizing Colors using Tailwind CSS CDN
You can further enhance your design by customizing colors and giving them unique names using the Tailwind CSS CDN. Here's an example of customizing text color names.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 CDN</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: "#2563eb",
secondary: "#475569",
success: "#16a34a",
danger: "#dc2626",
warning: "#eab308",
secondary: "#475569",
},
},
},
};
</script>
</head>
<body>
<div class="text-center py-5">
<h1 class="text-3xl text-primary">text primary</h1>
<h1 class="text-3xl text-secondary">text secondary</h1>
<h1 class="text-3xl text-success">text success</h1>
<h1 class="text-3xl text-danger">text danger</h1>
<h1 class="text-3xl text-warning">text warning</h1>
</div>
</body>
</html>
tailwind css cdn color
Use Official plugins in Tailwind CSS Via CDN
You can also use official plugins (forms,typography,aspect-ratio,line-clamp) in Tailwind CSS Via Tailwind CSS CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 CDN</title>
<script src="https://cdn.tailwindcss.com/?plugins=forms,typography"></script>
</head>
<body>
<article class="prose lg:prose-xl">
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</article>
<div class="flex flex-col gap-4">
<input type="email" />
<input type="checkbox" class="form-checkbox rounded text-pink-500" />
<label class="block">
<span class="text-gray-700">Full name</span>
<input type="text" class="mt-1 block w-full rounded-full" placeholder="" />
</label>
</div>
</body>
</html>
tailwind css plugins cdn
Note: Avoid using a CDN for critical assets like Tailwind CSS in production environments, as it imposes performance drawbacks and risks, such as extensive load times for unused CSS and potential unavailability. Instead, opt for a local installation coupled with a proper build process to optimize your stylesheet's efficiency and reliability.
