Setting Up Tailwind CSS via CDN: A Quick Start Guide
Learn how to set up Tailwind CSS using a CDN. Follow this step-by-step guide to link the script to your HTML, verify the installation, and start styling.
Previously in this course, we explored The Utility-First Philosophy: A Modern Approach to CSS, where we shifted our mindset from writing custom block-level CSS to composing styles with pre-defined, single-purpose classes. Now that you understand the "why," it’s time to get your hands dirty with the "how."
The fastest way to start prototyping or experimenting with Tailwind CSS is by using the official Content Delivery Network (CDN) script. It requires zero build tools, making it perfect for learning the syntax before we dive into the professional CLI workflow in the next lesson.
Understanding the Tailwind CDN Setup
When you load the Tailwind CSS CDN script, it injects the entire Tailwind framework directly into your browser. This allows you to start using utility classes—like text-blue-500 or p-4—immediately in your HTML file without needing to install Node.js or configure a build pipeline.
While this method is excellent for rapid prototyping and learning, keep in mind that it is not optimized for large-scale production sites, as it doesn't allow for custom theme configuration or the automatic purging of unused CSS. For now, it’s our best tool to get up and running in seconds.
Working Example: Connecting Tailwind to HTML
To get started, create a new file named index.html in your project folder. We need to include the Tailwind script inside the <head> of your document.
Copy this boilerplate into your file:
HTML<!DOCTYPE html> style="color:#808080"><style="color:#4EC9B0">html lang="en"> style="color:#808080"><style="color:#4EC9B0">head> style="color:#808080"><style="color:#4EC9B0">meta charset="UTF-8"> style="color:#808080"><style="color:#4EC9B0">meta name="viewport" content="width=device-width, initial-scale=1.0"> style="color:#808080"><style="color:#4EC9B0">title>My Tailwind Projectstyle="color:#808080"></style="color:#4EC9B0">title> <!-- The Tailwind CDN Script --> style="color:#808080"><style="color:#4EC9B0">script src="https://cdn.tailwindcss.com">style="color:#808080"></style="color:#4EC9B0">script> style="color:#808080"></style="color:#4EC9B0">head> style="color:#808080"><style="color:#4EC9B0">body> style="color:#808080"><style="color:#4EC9B0">h1 class="text-3xl font-bold text-blue-600"> Hello, Tailwind! style="color:#808080"></style="color:#4EC9B0">h1> style="color:#808080"></style="color:#4EC9B0">body> style="color:#808080"></style="color:#4EC9B0">html>
Verifying the Installation
Once you save the file, open it in your browser. If you see the text "Hello, Tailwind!" rendered in a large, bold, blue font, the setup was successful.
If the text appears as standard, unstyled black text, Tailwind failed to load. Check your internet connection or verify that the <script> tag is exactly as written above. Because the script loads asynchronously, you might see a "flash of unstyled content" (FOUC) for a split second on slow connections—this is normal when using a CDN.
Hands-on Exercise
Now that you have the environment ready, let’s practice applying utilities.
- Add a new
<div>container below your<h1>. - Give the
<div>a background color using the classbg-gray-100. - Add some internal spacing using
p-6(which adds padding). - Add a paragraph inside that div and use the class
text-gray-700to change its text color.
Your resulting code should look something like this:
HTMLstyle="color:#808080"><style="color:#4EC9B0">div class="bg-gray-100 p-6"> style="color:#808080"><style="color:#4EC9B0">p class="text-gray-700">This is my first styled component!style="color:#808080"></style="color:#4EC9B0">p> style="color:#808080"></style="color:#4EC9B0">div>
Common Pitfalls
Even with a simple CDN setup, beginners often run into a few common issues:
- Missing
viewportmeta tag: Without<meta name="viewport" content="width=device-width, initial-scale=1.0">, Tailwind’s responsive modifiers will not trigger correctly on mobile devices. Always include this. - Case sensitivity: Tailwind classes are case-sensitive.
text-blue-500works, butText-Blue-500will be ignored by the browser. - Script placement: Always place the
<script>tag in the<head>section. Putting it at the end of the<body>can sometimes cause visual glitches as the browser renders the page before the styles are applied.
Frequently Asked Questions
Q: Is the CDN method good for real-world production websites? A: Not quite. The CDN version loads a very large file containing every possible Tailwind class. For production, you should use the CLI method (coming up in our next lesson) to generate a small, optimized CSS file containing only the classes you actually use.
Q: Can I customize colors or fonts using the CDN?
A: Yes, you can add a <script> block before the Tailwind CDN script to configure the tailwind.config object, but it is less flexible than using a tailwind.config.js file.
Q: Why does my page look unstyled for a fraction of a second? A: This is the "Flash of Unstyled Content." It happens because the browser has to fetch and execute the JavaScript-based Tailwind engine before it can apply the styles to your HTML.
Recap
We’ve successfully linked the Tailwind CDN, verified our setup, and applied utility classes to style our initial layout. You now have a working sandbox to experiment with the utility-first workflow.
Up next: Understanding the Tailwind CLI, where we will move beyond the CDN and set up a professional build environment for your project.
Work with me
Next.js Full-Stack Web App Development
A fast, SEO-ready full-stack web app built with Next.js 16 — from idea to deployed product, by an engineer who ships to production.
Next.js Website & Landing Page Development
A blazing-fast, SEO-optimized website or landing page in Next.js — the kind that loads instantly and ranks. Design-to-code, done right.
