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>
<div class="text-center">
<h1 class="text-4xl text-blue-500">欢迎来到Tailwind CSS世界</h1>
<p class="text-2xl">这是一个简单的示例,展示如何使用Tailwind CSS构建页面。</p>
</div>
</body>
</html>
这个HTML代码示例展示了如何在一个HTML页面中引入Tailwind CSS。通过给元素添加Tailwind CSS提供的类,我们可以快速地设置元素的样式,而不用写大量的CSS代码。在这个例子中,我们设置了标题的字体大小为4XL,颜色为蓝色500,并且文本内容居中。同时,我们还对段落文本设置了更大的字体和颜色。这个简单的示例展示了Tailwind CSS的基本用法。
评论已关闭