Tailwind CSS快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 快速入门</title>
<!-- 引入Tailwind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-4xl text-blue-700 font-semibold">欢迎来到Tailwind CSS的世界</h1>
<p class="text-gray-500">这是一个使用Tailwind CSS的简单示例。</p>
<!-- 添加Tailwind CSS的CDN -->
<script src="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.js"></script>
</body>
</html>这段代码展示了如何在HTML文件中引入Tailwind CSS并使用其样式类来增强HTML元素的展示效果。text-4xl 和 text-blue-700 类分别设置了字体大小和颜色，而 text-gray-500 类设置了字体颜色。这些样式类都是Tailwind CSS预定义的实用工具类，可以快速应用于HTML元素。
评论已关闭