Tailwind CSS 学习02
本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
暗黑模式
练习任务： 为之前做的登录页面添加完整的暗黑模式支持。
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html class="dark">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
};
</script>
</head>
<body class="bg-white dark:bg-gray-900 min-h-screen">
<div class="max-w-2xl mx-auto p-6">
<h1 class="text-3xl font-bold text-center text-gray-900 dark:text-white">
暗黑模式示例
</h1>
<p class="text-gray-600 dark:text-gray-300 mt-4">
这段文字在亮色和暗色模式下会自动调整颜色
</p>
<!-- 切换按钮 -->
<button
onclick="document.documentElement.classList.toggle('dark')"
class="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
>
切换暗黑模式
</button>
</div>
</body>
</html>自定义配置和主题
练习任务： 为你的项目定义一套品牌色系并在所有组件中使用。
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html class="dark">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: "#f0f9ff",
500: "#0ea5e9",
900: "#0c4a6e",
},
},
fontFamily: {
custom: ["Inter", "system-ui", "sans-serif"],
},
spacing: {
128: "32rem",
},
},
},
};
</script>
</head>
<body>
<!-- 使用自定义配置 -->
<div class="font-custom bg-brand-50 text-brand-900 p-8">
<h1 class="text-3xl font-bold">使用自定义主题</h1>
<div class="w-128 h-32 bg-brand-500 mt-4"></div>
</div>
</body>
</html>登录页面 - 带暗色模式
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>登录页面 - 带暗色模式</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
animation: {
"fade-in": "fadeIn 0.5s ease-in-out",
"slide-up": "slideUp 0.5s ease-out",
},
keyframes: {
fadeIn: {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
slideUp: {
"0%": { transform: "translateY(20px)", opacity: "0" },
"100%": { transform: "translateY(0)", opacity: "1" },
},
},
},
},
};
</script>
<style>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
.dark ::-webkit-scrollbar-track {
background: #374151;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
background: #6b7280;
}
</style>
</head>
<body class="bg-white dark:bg-gray-900 transition-colors duration-300">
<!-- 暗色模式切换按钮 -->
<button
id="themeToggle"
class="fixed top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-md z-10 transition-all duration-300 hover:scale-110"
>
<svg
id="sunIcon"
class="w-6 h-6 hidden"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
></path>
</svg>
<svg
id="moonIcon"
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
></path>
</svg>
</button>
<!-- 主内容区域 -->
<div
class="min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center p-4 transition-all duration-500"
>
<div
class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 max-w-md w-full animate-slide-up"
>
<!-- 标题区域 -->
<div class="text-center mb-8">
<h2
class="text-3xl font-bold text-gray-800 dark:text-white mb-2 animate-fade-in"
>
欢迎回来
</h2>
<p
class="text-gray-600 dark:text-gray-300 animate-fade-in"
style="animation-delay: 0.1s"
>
请登录您的账户
</p>
</div>
<!-- 登录表单 -->
<form class="space-y-6">
<!-- 邮箱输入框 -->
<div class="animate-fade-in" style="animation-delay: 0.2s">
<label
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
邮箱地址
</label>
<input
type="email"
required
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-all duration-300"
placeholder="请输入您的邮箱"
/>
</div>
<!-- 密码输入框 -->
<div class="animate-fade-in" style="animation-delay: 0.3s">
<label
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
密码
</label>
<input
type="password"
required
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-all duration-300"
placeholder="请输入您的密码"
/>
</div>
<!-- 记住我和忘记密码 -->
<div
class="flex items-center justify-between animate-fade-in"
style="animation-delay: 0.4s"
>
<div class="flex items-center">
<input
id="remember-me"
type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label
for="remember-me"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300"
>
记住我
</label>
</div>
<a
href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300"
>
忘记密码？
</a>
</div>
<!-- 登录按钮 -->
<button
type="submit"
class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 animate-fade-in"
style="animation-delay: 0.5s"
>
登录
</button>
</form>
<!-- 注册链接 -->
<div
class="text-center mt-6 animate-fade-in"
style="animation-delay: 0.6s"
>
<p class="text-sm text-gray-600 dark:text-gray-400">
还没有账户？
<a
href="#"
class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-300"
>
立即注册
</a>
</p>
</div>
</div>
</div>
<script>
// 暗色模式切换功能
const themeToggle = document.getElementById("themeToggle");
const sunIcon = document.getElementById("sunIcon");
const moonIcon = document.getElementById("moonIcon");
// 检查本地存储的主题偏好
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
sunIcon.classList.remove("hidden");
moonIcon.classList.add("hidden");
} else {
document.documentElement.classList.remove("dark");
sunIcon.classList.add("hidden");
moonIcon.classList.remove("hidden");
}
// 切换主题
themeToggle.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
if (document.documentElement.classList.contains("dark")) {
localStorage.theme = "dark";
sunIcon.classList.remove("hidden");
moonIcon.classList.add("hidden");
} else {
localStorage.theme = "light";
sunIcon.classList.add("hidden");
moonIcon.classList.remove("hidden");
}
});
// 监听系统主题变化
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => {
if (!("theme" in localStorage)) {
if (e.matches) {
document.documentElement.classList.add("dark");
sunIcon.classList.remove("hidden");
moonIcon.classList.add("hidden");
} else {
document.documentElement.classList.remove("dark");
sunIcon.classList.add("hidden");
moonIcon.classList.remove("hidden");
}
}
});
</script>
</body>
</html>后台管理
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>后台管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<style>
.sidebar-link.active {
background-color: #3b82f6;
color: white;
}
.sidebar-link:hover:not(.active) {
background-color: #f3f4f6;
}
.table-row:hover {
background-color: #f9fafb;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex min-h-screen">
<!-- 侧边栏 -->
<div class="w-64 bg-white shadow-lg fixed h-full">
<div class="p-6 border-b">
<h1 class="text-xl font-bold text-blue-600 flex items-center">
<i class="fas fa-chart-line mr-2"></i> 管理系统
</h1>
</div>
<nav class="mt-6">
<a
href="#"
class="sidebar-link active block py-3 px-6 text-blue-600 font-medium"
>
<i class="fas fa-tachometer-alt mr-3"></i> 仪表盘
</a>
<a
href="#"
class="sidebar-link block py-3 px-6 text-gray-600 hover:text-blue-600"
>
<i class="fas fa-chart-bar mr-3"></i> 数据分析
</a>
<a
href="#"
class="sidebar-link block py-3 px-6 text-gray-600 hover:text-blue-600"
>
<i class="fas fa-users mr-3"></i> 用户管理
</a>
<a
href="#"
class="sidebar-link block py-3 px-6 text-gray-600 hover:text-blue-600"
>
<i class="fas fa-shopping-cart mr-3"></i> 订单管理
</a>
<a
href="#"
class="sidebar-link block py-3 px-6 text-gray-600 hover:text-blue-600"
>
<i class="fas fa-cog mr-3"></i> 系统设置
</a>
</nav>
</div>
<!-- 主内容区 -->
<div class="ml-64 flex-1">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm border-b">
<div class="flex justify-between items-center px-8 py-4">
<div>
<h1 class="text-2xl font-semibold">仪表盘</h1>
<p class="text-gray-500 text-sm mt-1">欢迎回来，管理员！</p>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button
class="p-2 rounded-full hover:bg-gray-100 text-gray-600"
>
<i class="fas fa-bell"></i>
</button>
<span
class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>3</span
>
</div>
<div class="flex items-center space-x-2">
<img
src="../../header.jpg"
class="w-10 h-10 rounded-full object-cover"
/>
<div>
<p class="text-sm font-medium">管理员</p>
<p class="text-xs text-gray-500">超级管理员</p>
</div>
</div>
</div>
</div>
</header>
<!-- 数据卡片 -->
<main class="p-8">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"
>
<div
class="bg-white p-6 rounded-lg shadow border-l-4 border-blue-500"
>
<div class="flex justify-between items-center">
<div>
<h3 class="text-gray-500 text-sm">总用户数</h3>
<p class="text-3xl font-bold mt-2">12,584</p>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-users text-blue-500 text-xl"></i>
</div>
</div>
<p class="text-green-500 text-sm mt-2">
<i class="fas fa-arrow-up"></i> 5.2% 较上月
</p>
</div>
<div
class="bg-white p-6 rounded-lg shadow border-l-4 border-green-500"
>
<div class="flex justify-between items-center">
<div>
<h3 class="text-gray-500 text-sm">订单数量</h3>
<p class="text-3xl font-bold mt-2">3,247</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-shopping-cart text-green-500 text-xl"></i>
</div>
</div>
<p class="text-green-500 text-sm mt-2">
<i class="fas fa-arrow-up"></i> 12.4% 较上月
</p>
</div>
<div
class="bg-white p-6 rounded-lg shadow border-l-4 border-purple-500"
>
<div class="flex justify-between items-center">
<div>
<h3 class="text-gray-500 text-sm">总收入</h3>
<p class="text-3xl font-bold mt-2">¥245,680</p>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fas fa-dollar-sign text-purple-500 text-xl"></i>
</div>
</div>
<p class="text-green-500 text-sm mt-2">
<i class="fas fa-arrow-up"></i> 8.7% 较上月
</p>
</div>
<div
class="bg-white p-6 rounded-lg shadow border-l-4 border-red-500"
>
<div class="flex justify-between items-center">
<div>
<h3 class="text-gray-500 text-sm">待处理</h3>
<p class="text-3xl font-bold mt-2">42</p>
</div>
<div class="bg-red-100 p-3 rounded-full">
<i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
</div>
</div>
<p class="text-red-500 text-sm mt-2">
<i class="fas fa-arrow-down"></i> 3.1% 较上月
</p>
</div>
</div>
<!-- 表格区域 -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="px-6 py-4 border-b flex justify-between items-center">
<h2 class="text-lg font-semibold">最近用户</h2>
<button
class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-600 flex items-center"
>
<i class="fas fa-plus mr-2"></i> 添加用户
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
用户
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
邮箱
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
状态
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
注册时间
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
操作
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img
class="h-10 w-10 rounded-full"
src="../../header.jpg"
alt=""
/>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
张三
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">
zhangsan@example.com
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
>活跃</span
>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
2023-05-15
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"
>编辑</a
>
<a href="#" class="text-red-600 hover:text-red-900"
>删除</a
>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img
class="h-10 w-10 rounded-full"
src="../../header.jpg"
alt=""
/>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
李四
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">lisi@example.com</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
>活跃</span
>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
2023-06-22
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"
>编辑</a
>
<a href="#" class="text-red-600 hover:text-red-900"
>删除</a
>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img
class="h-10 w-10 rounded-full"
src="../../header.jpg"
alt=""
/>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
王五
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">
wangwu@example.com
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"
>未激活</span
>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
2023-07-10
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"
>编辑</a
>
<a href="#" class="text-red-600 hover:text-red-900"
>删除</a
>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img
class="h-10 w-10 rounded-full"
src="../../header.jpg"
alt=""
/>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
赵六
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">
zhaoliu@example.com
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
>禁用</span
>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
2023-04-05
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"
>编辑</a
>
<a href="#" class="text-red-600 hover:text-red-900"
>删除</a
>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="px-6 py-4 border-t bg-gray-50 flex items-center justify-between"
>
<div class="text-sm text-gray-700">
显示 <span class="font-medium">1</span> 到
<span class="font-medium">4</span> 条，共
<span class="font-medium">124</span> 条记录
</div>
<div class="flex space-x-2">
<button
class="px-3 py-1 rounded border bg-white text-sm text-gray-700 hover:bg-gray-50"
>
上一页
</button>
<button
class="px-3 py-1 rounded border bg-blue-500 text-white text-sm"
>
1
</button>
<button
class="px-3 py-1 rounded border bg-white text-sm text-gray-700 hover:bg-gray-50"
>
2
</button>
<button
class="px-3 py-1 rounded border bg-white text-sm text-gray-700 hover:bg-gray-50"
>
3
</button>
<button
class="px-3 py-1 rounded border bg-white text-sm text-gray-700 hover:bg-gray-50"
>
下一页
</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// 简单的交互效果
document.addEventListener("DOMContentLoaded", function () {
// 侧边栏链接点击效果
const sidebarLinks = document.querySelectorAll(".sidebar-link");
sidebarLinks.forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();
sidebarLinks.forEach((l) =>
l.classList.remove("active", "text-blue-600")
);
sidebarLinks.forEach((l) => l.classList.add("text-gray-600"));
this.classList.add("active", "text-blue-600");
this.classList.remove("text-gray-600");
});
});
});
</script>
</body>
</html>