您的第一个 Tailwind 页面
仅使用 Tailwind 实用程序 class 构建一个简单的主视觉区域，熟悉基于 class 的工作流程。
您的第一个 Tailwind 页面 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Planning a Hero Section
A hero section is the first thing visitors see: a headline, subheadline, and a button or two. You will build a full one using only Tailwind utilities.
Setting Up the HTML Shell
Start with an HTML shell and link your compiled CSS. Add min-h-screen so the body fills the viewport and bg-gray-50 for a soft canvas to build on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./dist/output.css" rel="stylesheet" />
<title>My First Tailwind Page</title>
</head>
<body class="min-h-screen bg-gray-50">
<!-- content goes here -->
</body>
</html>Creating the Navigation Bar
Build a navbar with flex items-center justify-between to push the logo left and links right. Add bg-white shadow-sm and some padding for a clean, lifted look.
<nav class="bg-white shadow-sm px-8 py-4 flex items-center justify-between">
<span class="text-xl font-bold text-indigo-600">MyBrand</span>
<div class="flex gap-6">
<a href="#" class="text-gray-600 hover:text-indigo-600">Home</a>
<a href="#" class="text-gray-600 hover:text-indigo-600">About</a>
<a href="#" class="text-gray-600 hover:text-indigo-600">Contact</a>
</div>
</nav>Building the Hero Container
Center the hero container with max-w-4xl mx-auto so it stays readable on big screens, then add px-6 py-24 for space and text-center to line everything up.
<section class="px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<!-- headline, subheadline, buttons -->
</div>
</section>Writing the Headline
Write a bold headline: text-5xl font-extrabold for size and weight, text-gray-900 for strong contrast, and tracking-tight so big letters feel cohesive.
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
Build beautiful UIs
<span class="text-indigo-600">faster than ever</span>
</h1>Adding the Subheadline
Add a subheadline below it: text-xl text-gray-500 keeps it quiet and supporting, max-w-2xl mx-auto holds a comfy line length, and mb-10 spaces the buttons.
<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
Tailwind CSS lets you design any component directly in your HTML
without writing a single line of custom CSS.
</p>Creating Call-to-Action Buttons
Add two CTA buttons: a filled primary with bg-indigo-600 text-white and an outline secondary. Wrap them in a flex container with a gap to sit side by side.
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</a>
<a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
Learn More
</a>
</div>Adding a Background Gradient
Give the hero depth with a gradient. Use bg-gradient-to-* for direction plus from-* and to-* for colors — a soft from-white to-indigo-50 adds a subtle lift.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<!-- hero content -->
</section>Putting the Hero Together
Here is the full hero with everything combined. Notice the whole design lives in the class names — read them top to bottom and you can picture it exactly.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
Build beautiful UIs
<span class="text-indigo-600">faster than ever</span>
</h1>
<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
Tailwind CSS lets you design any component directly in your HTML.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</a>
<a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
Learn More
</a>
</div>
</div>
</section>Adding a Features Row
Below the hero, add a features row. Use grid grid-cols-1 md:grid-cols-3 gap-8 so cards stack on mobile and sit side by side on larger screens.
<section class="max-w-5xl mx-auto px-6 py-16">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="text-4xl mb-4">⚡</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm">JIT compilation generates only what you use.</p>
</div>
<!-- repeat for other features -->
</div>
</section>Finishing With a Footer
Finish with a footer: bg-gray-800 text-gray-400 for a dark contrast and text-center py-8 to keep it compact. That is a full page, built only with utilities.
<footer class="bg-gray-800 text-gray-400 text-center py-8">
<p class="text-sm">© 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>Quick Check
Quick check! See how your first page came together. 🎨
Lesson Recap
You built a real page! A hero blends layout, type, and color, gradients use from-* and to-*, and flex and grid handle columns. Next up: Tailwind vs CSS.
常见问题解答
「您的第一个 Tailwind 页面」课时是免费的吗？
是的 — 「您的第一个 Tailwind 页面」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「您的第一个 Tailwind 页面」这节课中我会学到什么？
仅使用 Tailwind 实用程序 class 构建一个简单的主视觉区域，熟悉基于 class 的工作流程。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「您的第一个 Tailwind 页面」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 实用程序优先 CSS 详解
- 安装与配置 Tailwind
- 您的第一个 Tailwind 页面
- Tailwind 与传统 CSS