Tailwind CSS CDN Quick Setup Without Build Tools
The Tailwind CSS CDN lets you start using utility classes instantly no npm, no build tools, no configuration. Just add a single script tag to your HTML file and begin prototyping with the full power of Tailwind CSS.
💡 Quick Answer
Tailwind CSS CDN setup: Add <script src="https://cdn.tailwindcss.com"></script> to your HTML <head> tag. All Tailwind CSS utility classes are immediately available. No installation or build step required.
Basic CDN Setup
Copy this complete HTML template to start using Tailwind CSS via CDN immediately.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS Project</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-950 text-white min-h-screen">
<div class="max-w-4xl mx-auto px-6 py-16">
<h1 class="text-4xl font-bold text-cyan-400 mb-4">
Hello, Tailwind CSS!
</h1>
<p class="text-lg text-gray-400 mb-8">
This page is styled entirely with Tailwind CSS utility classes.
</p>
<button class="bg-cyan-500 hover:bg-cyan-600 text-white font-semibold px-6 py-3 rounded-lg transition-colors">
Get Started
</button>
</div>
</body>
</html>CDN with Custom Configuration
Customize colors, fonts, and other design tokens by adding an inline config script after the CDN tag.
html
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: '#06b6d4',
'brand-dark': '#0891b2',
},
fontFamily: {
display: ['Inter', 'sans-serif'],
},
},
},
}
</script>CDN vs Build Tool: When to Use Each
| Criteria | CDN | Build Tool (Vite/PostCSS) |
|---|---|---|
| Setup Time | 30 seconds | 2-3 minutes |
| Production Ready | ✗ No | ✓ Yes |
| File Size | ~400KB | ~10KB |
| Tree Shaking | ✗ No | ✓ Automatic |
| Custom Plugins | Limited | ✓ Full support |
| Best For | Prototyping, learning, demos | Production websites |
⚠️ Important
The Tailwind CSS CDN is designed for prototyping only. For production websites, always use a proper build setup with Vite or PostCSS to get automatic tree-shaking and optimal file sizes.
Frequently Asked Questions
The Tailwind CSS CDN script can be added to any HTML file using: <script src="https://cdn.tailwindcss.com"></script>. Place this in your <head> tag to instantly access all Tailwind CSS utility classes without any build step or npm installation. The CDN always serves the latest stable version.
The Tailwind CSS CDN is not recommended for production websites. It cannot tree-shake unused styles, resulting in a much larger file size than a properly built Tailwind CSS bundle. The CDN also adds JavaScript processing overhead on each page load. Use it only for prototyping, learning, and quick demos.
Yes, you can customize Tailwind CSS when using the CDN by adding a tailwind.config inline script. Use <script> tailwind.config = { theme: { extend: { colors: { brand: "#06b6d4" } } } } </script> after the CDN script tag. This supports most configuration options including custom colors, fonts, and spacing.
The Tailwind CSS CDN bundle is approximately 350-400KB (compressed) because it includes every utility class. In comparison, a properly built Tailwind CSS v4 production bundle typically weighs 8-15KB because tree-shaking removes all unused classes. This 20-40x size difference makes the CDN unsuitable for production.
Yes, the Tailwind CSS CDN fully supports dark mode. You can use the dark: prefix on any utility class just like the installed version. Both media query-based and class-based dark mode strategies work with the CDN version of Tailwind CSS.
Ready for a production setup? Follow the Tailwind CSS + Vite guide or the complete installation guide.