Part 4: Installing Tailwind CSS via CLI and Play CDN
If you are not using Node.js or a JavaScript bundler (e.g. working on a simple HTML page, Python Django, Go, or PHP project), Tailwind offers two great options: the Standalone CLI and the Play CDN.
1. The Play CDN (Fastest Prototyping)
For quick prototypes, bug reproductions, or interactive documentation, you can load Tailwind directly via a script tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwind CDN Demo</title>
<!-- Load Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom CDN Configuration -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: '#2563eb',
}
}
}
}
</script>
</head>
<body class="bg-gray-50 p-10">
<h1 class="text-3xl font-bold text-brand">Hello Tailwind CDN!</h1>
</body>
</html>
⚠️ IMPORTANT: The Play CDN is meant for development and prototyping only. It compiles CSS on the fly in the client's browser, which causes a performance hit in production.
2. The Standalone Tailwind CLI (No Node.js Required!)
If you do not have Node.js installed (or are using Python, Go, or Rust backends), Tailwind provides standalone binary executables for macOS, Linux, and Windows:
# Example for Windows:
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe
rename tailwindcss-windows-x64.exe tailwindcss.exe
# Start the build watcher:
./tailwindcss.exe -i ./src/input.css -o ./dist/output.css --watch
Key Takeaways
- Use Play CDN (
<script src="https://cdn.tailwindcss.com">) for rapid prototyping. - Use the Standalone CLI for backend-first stacks without Node.js dependencies.
In Part 5, we will discover how the Just-in-Time (JIT) Engine works under the hood!