<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Dark Mode Example</title>
<!-- 引入Tailwind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<!-- 在body上添加'dark'类用于激活深色模式 -->
<div class="dark">
<main class="text-gray-900 dark:text-gray-100">
<h1 class="text-4xl font-bold">欢迎来到深色模式示例</h1>
<p>在这里，我们使用Tailwind CSS来实现深色模式。</p>
<!-- 使用'dark:'前缀来为深色模式指定不同的类 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded dark:bg-blue-700 dark:hover:bg-blue-800">
点击切换深色模式
</button>
</main>
</div>
<script>
// 切换深色模式的JavaScript函数
function toggleDarkMode(e) {
e.preventDefault();
document.documentElement.classList.toggle('dark');
}
</script>
</body>
</html>
这个示例展示了如何在一个简单的HTML页面中使用Tailwind CSS来实现深色模式的切换。通过在body和其他元素上使用带前缀的类（如dark:bg-gray-100），Tailwind CSS可以在深色模式激活时自动应用这些类，实现不同模式下的样式切换。