tailwind css

作者：花折亦无情发布日期:2026-08-02 浏览:80

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Example</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-800">

    <!-- A simple card component -->
    <div class="container mx-auto p-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white p-6">
            <h2 class="text-xl font-bold mb-2">Hello Tailwind CSS</h2>
            <p class="text-gray-700 text-base">
                This is a simple card component created using Tailwind CSS.
            </p>
            <a href="#" class="block mt-4 text-blue-500 hover:underline">Learn More</a>
        </div>
    </div>

</body>
</html>

解释说明：

HTML 结构：此代码创建了一个简单的 HTML 页面，包含一个卡片组件。
Tailwind CSS：通过 CDN 引入了 Tailwind CSS 的样式库。
卡片组件：
- container 和 mx-auto 类用于居中容器并设置最大宽度。
- rounded 和 shadow-lg 类为卡片添加圆角和阴影效果。
- bg-white 和 p-6 分别设置背景颜色和内边距。
- text-xl 和 font-bold 设置标题的字体大小和粗细。
- text-gray-700 和 text-base 设置段落文本的颜色和大小。
- text-blue-500 和 hover:underline 为链接设置了默认颜色和悬停时的下划线效果。

这个示例展示了如何使用 Tailwind CSS 创建响应式、美观的 UI 组件。

上一篇：css超出显示...

下一篇：css选择器