TailwindCSS 是一个功能类优先的 CSS 框架，它提供了大量的低级工具类来构建自定义设计， 而不是像其他框架那样提供预制的组件。
不再编写自定义 CSS，而是通过组合小的、单一用途的工具类来构建复杂的组件。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
按钮
</button>
内置响应式修饰符，让你轻松创建适配所有屏幕尺寸的设计。
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
</div>
/* CSS 文件 */
.card {
background-color: white;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.card-content {
color: #6b7280;
}
<div class="card">
<h3 class="card-title">标题</h3>
<p class="card-content">内容</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-md mb-4">
<h3 class="text-xl font-semibold text-gray-900 mb-2">标题</h3>
<p class="text-gray-600">内容</p>
</div>
优势：
<script src="https://cdn.tailwindcss.com"></script>
最简单的方式，适合快速原型和学习。
npm install -D tailwindcss
npx tailwindcss init
完整功能，支持自定义配置和优化。
可以使用 Tailwind Play、CodePen 等在线编辑器快速试验。
预定义的设计系统帮助你做出更好的设计决策。
默认为小屏幕设计，然后向上扩展到更大的屏幕。
工具类可以轻松提取为可重用的组件。