学习：Tailwind CSS v4 （4）
您可以在theme: {extend: {colors: {// 自定义颜色// 自定义品牌色'brand': {},// 自定义渐变},},Tailwind CSS 的背景颜色系统非常强大，提供了从基础颜色到复杂渐变的完整解决方案您可以在theme: {extend: {// 自定义边框宽度},// 自定义圆角},},},Tailwind CSS 的边框系统提供了丰富的工具来创建各种视觉效果，从
·
Tailwind CSS 背景颜色
1. 基础背景颜色类
<!-- 基础背景颜色 -->
<div class="bg-white">白色背景</div>
<div class="bg-black">黑色背景</div>
<div class="bg-transparent">透明背景</div>
<div class="bg-current">当前颜色背景</div>
<!-- 灰色系背景 -->
<div class="bg-gray-50">浅灰色背景</div>
<div class="bg-gray-100">浅灰色背景</div>
<div class="bg-gray-200">浅灰色背景</div>
<div class="bg-gray-300">中灰色背景</div>
<div class="bg-gray-400">中灰色背景</div>
<div class="bg-gray-500">标准灰色背景</div>
<div class="bg-gray-600">深灰色背景</div>
<div class="bg-gray-700">深灰色背景</div>
<div class="bg-gray-800">深灰色背景</div>
<div class="bg-gray-900">最深灰色背景</div>
2. 彩色背景颜色
<!-- 红色系 -->
<div class="bg-red-50">浅红色背景</div>
<div class="bg-red-100">浅红色背景</div>
<div class="bg-red-200">浅红色背景</div>
<div class="bg-red-300">中红色背景</div>
<div class="bg-red-400">中红色背景</div>
<div class="bg-red-500">标准红色背景</div>
<div class="bg-red-600">深红色背景</div>
<div class="bg-red-700">深红色背景</div>
<div class="bg-red-800">深红色背景</div>
<div class="bg-red-900">最深红色背景</div>
<!-- 蓝色系 -->
<div class="bg-blue-50">浅蓝色背景</div>
<div class="bg-blue-100">浅蓝色背景</div>
<div class="bg-blue-200">浅蓝色背景</div>
<div class="bg-blue-300">中蓝色背景</div>
<div class="bg-blue-400">中蓝色背景</div>
<div class="bg-blue-500">标准蓝色背景</div>
<div class="bg-blue-600">深蓝色背景</div>
<div class="bg-blue-700">深蓝色背景</div>
<div class="bg-blue-800">深蓝色背景</div>
<div class="bg-blue-900">最深蓝色背景</div>
<!-- 其他颜色系 -->
<div class="bg-green-500">绿色背景</div>
<div class="bg-yellow-500">黄色背景</div>
<div class="bg-purple-500">紫色背景</div>
<div class="bg-pink-500">粉色背景</div>
<div class="bg-indigo-500">靛蓝色背景</div>
<div class="bg-teal-500">蓝绿色背景</div>
<div class="bg-orange-500">橙色背景</div>
3. 背景颜色透明度
<!-- 背景透明度控制 -->
<div class="bg-black/0">完全透明黑色背景</div>
<div class="bg-black/25">25% 透明度黑色背景</div>
<div class="bg-black/50">50% 透明度黑色背景</div>
<div class="bg-black/75">75% 透明度黑色背景</div>
<div class="bg-black/100">完全不透明黑色背景</div>
<!-- 彩色背景透明度 -->
<div class="bg-blue-500/50">半透明蓝色背景</div>
<div class="bg-red-500/25">25% 透明度红色背景</div>
4. 渐变色背景
<!-- 线性渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
从左到右的蓝色到紫色渐变
</div>
<div class="bg-gradient-to-l from-red-500 to-yellow-500">
从右到左的红色到黄色渐变
</div>
<div class="bg-gradient-to-t from-green-500 to-blue-500">
从上到下的绿色到蓝色渐变
</div>
<div class="bg-gradient-to-b from-purple-500 to-pink-500">
从下到上的紫色到粉色渐变
</div>
<!-- 对角线渐变 -->
<div class="bg-gradient-to-tr from-indigo-500 to-teal-500">
从左上到右下的渐变
</div>
<div class="bg-gradient-to-br from-orange-500 to-red-500">
从左下到右上的渐变
</div>
<!-- 多色渐变 -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">
紫色-粉色-红色三色渐变
</div>
5. 背景图片与颜色叠加
<!-- 背景图片 + 颜色叠加 -->
<div class="h-100 w-100 bg-cover bg-center bg-gray-900/50 "
style="background-image: url('image.jpg')">
<div class="bg-black/40 p-8">
背景图片上的半透明黑色覆盖层
</div>
</div>
6. 悬停和焦点状态
<!-- 悬停状态背景颜色 -->
<button class="bg-blue-500 hover:bg-blue-600 focus:bg-blue-700">
悬停和焦点状态变化
</button>
<!-- 激活状态 -->
<button class="bg-green-500 active:bg-green-600">
激活状态变化
</button>
<!-- 禁用状态 -->
<button class="bg-gray-300 disabled:bg-gray-200" disabled>
禁用状态
</button>
7. 响应式背景颜色
<!-- 响应式背景颜色 -->
<div class="bg-white md:bg-gray-100 lg:bg-gray-200">
在不同屏幕尺寸下显示不同背景颜色
</div>
<!-- 响应式渐变 -->
<div class="bg-gradient-to-r from-blue-400 to-blue-600
md:from-purple-400 md:to-purple-600
lg:from-green-400 lg:to-green-600">
响应式渐变背景
</div>
8. 深色模式背景颜色
<!-- 深色模式支持 -->
<div class="bg-white dark:bg-gray-800">
浅色模式白色背景，深色模式深灰色背景
</div>
<div class="bg-blue-100 dark:bg-blue-900">
浅色模式浅蓝色，深色模式深蓝色
</div>
<!-- 深色模式渐变 -->
<div class="bg-gradient-to-r from-blue-400 to-purple-400
dark:from-blue-700 dark:to-purple-700">
深色模式下的渐变调整
</div>
9. 背景颜色与文本颜色的搭配
<!-- 背景与文本颜色搭配 -->
<div class="bg-blue-600 text-white">
深蓝色背景配白色文字（高对比度）
</div>
<div class="bg-yellow-100 text-yellow-800">
浅黄色背景配深黄色文字（和谐搭配）
</div>
<div class="bg-gray-900 text-gray-100">
深灰色背景配浅灰色文字（专业感）
</div>
<div class="bg-red-500 text-white font-bold">
红色背景配粗体白色文字（强调）
</div>
10. 完整的背景颜色示例
<!-- 卡片布局示例 -->
<div class="max-w-4xl mx-auto space-y-6 p-6">
<!-- 渐变卡片 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600
rounded-lg shadow-lg p-8 text-white">
<h2 class="text-2xl font-bold mb-4">渐变背景卡片</h2>
<p class="text-blue-100">这是一个使用渐变背景的卡片示例</p>
</div>
<!-- 彩色卡片组 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-red-100 border-l-4 border-red-500 p-6 rounded">
<h3 class="text-red-800 font-semibold">红色主题</h3>
<p class="text-red-600 mt-2">用于警告或重要信息</p>
</div>
<div class="bg-green-100 border-l-4 border-green-500 p-6 rounded">
<h3 class="text-green-800 font-semibold">绿色主题</h3>
<p class="text-green-600 mt-2">用于成功或确认信息</p>
</div>
<div class="bg-blue-100 border-l-4 border-blue-500 p-6 rounded">
<h3 class="text-blue-800 font-semibold">蓝色主题</h3>
<p class="text-blue-600 mt-2">用于信息或提示内容</p>
</div>
</div>
<!-- 半透明背景示例 -->
<div class="relative bg-cover bg-center h-64 rounded-lg overflow-hidden"
style="background-image: url('https://picsum.photos/seed/tailwind-demo/800/400.jpg')">
<div class="absolute inset-0 bg-black/40"></div>
<div class="relative z-10 p-8 text-white">
<h2 class="text-3xl font-bold">图片背景上的半透明覆盖</h2>
<p class="mt-2 text-gray-200">背景图片上的文字内容</p>
</div>
</div>
<!-- 交互式按钮 -->
<div class="bg-white rounded-lg shadow p-6">
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
text-white font-medium py-2 px-4 rounded
transition-colors duration-200">
悬停和点击效果
</button>
<button class="bg-green-500 hover:bg-green-600
text-white font-medium py-2 px-4 rounded
ml-4 transition-colors duration-200">
另一个按钮
</button>
</div>
</div>
11. 自定义背景颜色配置
您可以在 tailwind.config.js 中自定义颜色：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// 自定义颜色
'primary': '#3B82F6',
'secondary': '#10B981',
'accent': '#F59E0B',
// 自定义品牌色
'brand': {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
900: '#0c4a6e',
}
},
backgroundImage: {
// 自定义渐变
'custom-gradient': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
'hero-pattern': "url('/img/hero-pattern.svg')",
}
},
},
}
Tailwind CSS 的背景颜色系统非常强大，提供了从基础颜色到复杂渐变的完整解决方案
Tailwind CSS 边框
1. 基础边框样式
<!-- 边框宽度 -->
<div class="border">默认边框 (1px)</div>
<div class="border-0">无边框</div>
<div class="border-2">2px 边框</div>
<div class="border-4">4px 边框</div>
<div class="border-8">8px 边框</div>
<!-- 单边边框 -->
<div class="border-t">上边框</div>
<div class="border-r">右边框</div>
<div class="border-b">下边框</div>
<div class="border-l">左边框</div>
<!-- 组合边框 -->
<div class="border-x">左右边框</div>
<div class="border-y">上下边框</div>
2. 边框颜色
<!-- 基础边框颜色 -->
<div class="border border-gray-200">浅灰色边框</div>
<div class="border border-gray-300">灰色边框</div>
<div class="border border-gray-400">中灰色边框</div>
<div class="border border-gray-500">标准灰色边框</div>
<div class="border border-gray-600">深灰色边框</div>
<!-- 彩色边框 -->
<div class="border border-red-500">红色边框</div>
<div class="border border-blue-500">蓝色边框</div>
<div class="border border-green-500">绿色边框</div>
<div class="border border-yellow-500">黄色边框</div>
<div class="border border-purple-500">紫色边框</div>
<!-- 透明边框 -->
<div class="border border-transparent">透明边框</div>
<div class="border border-current">当前颜色边框</div>
3. 边框样式
<!-- 边框样式 -->
<div class="m-2 border-2 border-solid">实线边框</div>
<div class="m-2 border-2 border-dashed">虚线边框</div>
<div class="m-2 border-2 border-dotted">点线边框</div>
<div class="m-2 border-2 border-double">双线边框</div>
<div class="m-2 border-2 border-none">无边框</div>
<!-- 边框样式组合 -->
<div class="m-2 border-2 border-dashed border-red-500">
2px 红色虚线边框
</div>
<div class="m-2 border-4 border-dotted border-blue-500">
4px 蓝色点线边框
</div>
4. 圆角边框
<!-- 基础圆角 -->
<div class="m-2 border-2 rounded">默认圆角 (0.25rem)</div>
<div class="m-2 border-2 rounded-none">无圆角</div>
<div class="m-2 border-2 rounded-sm">小圆角 (0.125rem)</div>
<div class="m-2 border-2 rounded-md">中等圆角 (0.375rem)</div>
<div class="m-2 border-2 rounded-lg">大圆角 (0.5rem)</div>
<div class="m-2 border-2 rounded-xl">超大圆角 (0.75rem)</div>
<div class="m-2 border-2 rounded-2xl">2倍圆角 (1rem)</div>
<div class="m-2 border-2 rounded-3xl">3倍圆角 (1.5rem)</div>
<div class="m-2 border-2 rounded-full">完全圆角</div>
<!-- 单边圆角 -->
<div class="m-2 border-2 rounded-t">上边圆角</div>
<div class="m-2 border-2 rounded-r">右边圆角</div>
<div class="m-2 border-2 rounded-b">下边圆角</div>
<div class="m-2 border-2 rounded-l">左边圆角</div>
<!-- 组合圆角 -->
<div class="m-2 border-2 rounded-tl">左上圆角</div>
<div class="m-2 border-2 rounded-tr">右上圆角</div>
<div class="m-2 border-2 rounded-br">右下圆角</div>
<div class="m-2 border-2 rounded-bl">左下圆角</div>
5. 边框宽度与位置组合
<!-- 不同宽度的单边边框 -->
<div class="border-t-4 border-blue-500">4px 蓝色上边框</div>
<div class="border-r-2 border-red-500">2px 红色右边框</div>
<div class="border-b-8 border-green-500">8px 绿色下边框</div>
<div class="border-l-1 border-purple-500">1px 紫色左边框</div>
<!-- 不对称边框 -->
<div class="border-t-4 border-b-2 border-l-8 border-r-1">
不对称边框组合
</div>
6. 边框与背景的组合
<!-- 边框与背景色 -->
<div class="bg-white border border-gray-200">
白色背景配浅灰色边框
</div>
<div class="bg-blue-50 border-l-4 border-blue-500">
浅蓝色背景配蓝色左边框
</div>
<!-- 卡片效果 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm">
基础卡片样式
</div>
<div class="bg-white border-2 border-blue-500 rounded-xl shadow-lg">
强调卡片样式
</div>
7. 交互式边框效果
<!-- 悬停效果 -->
<button class="border border-gray-300 hover:border-blue-500
transition-colors duration-200">
悬停时边框变蓝
</button>
<div class="border-2 border-transparent hover:border-green-500
transition-all duration-300">
悬停时显示绿色边框
</button>
<!-- 焦点状态 -->
<input class="border border-gray-300 focus:border-blue-500
focus:ring-2 focus:ring-blue-200"
placeholder="焦点时边框变化">
<!-- 激活状态 -->
<button class="border border-blue-500 active:border-blue-700
active:shadow-inner">
激活时边框加深
</button>
8. 响应式边框
<!-- 响应式边框宽度 -->
<div class="border-0 md:border-2 lg:border-4">
在小屏幕上无边框，中等屏幕2px，大屏幕4px
</div>
<!-- 响应式圆角 -->
<div class="rounded-none md:rounded-lg lg:rounded-xl">
响应式圆角变化
</div>
<!-- 响应式边框颜色 -->
<div class="border-gray-200 md:border-gray-300 lg:border-gray-400">
响应式边框颜色
</div>
9. 深色模式边框
<!-- 深色模式边框 -->
<div class="border border-gray-200 dark:border-gray-700">
浅色模式浅灰边框，深色模式深灰边框
</div>
<div class="border-2 border-blue-500 dark:border-pink-400">
深色模式下调整边框颜色
</div>
10. 边框实用技巧
<!-- 头像边框 -->
<div class="w-16 h-16 rounded-full border-4 border-white
shadow-lg overflow-hidden">
<img src="avatar.jpg" alt="头像" class="w-full h-full object-cover">
</div>
<!-- 进度条边框 -->
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full border-2 border-white"
style="width: 65%"></div>
</div>
<!-- 标签样式 -->
<span class="border border-green-500 text-green-600
px-2 py-1 rounded-full text-sm">
标签
</span>
<!-- 输入框组 -->
<div class="border border-gray-300 rounded-lg overflow-hidden">
<input class="w-full px-4 py-2 border-0 focus:outline-none"
placeholder="无边框输入框">
<div class="border-t border-gray-200"></div>
<button class="w-full bg-blue-500 text-white py-2">提交</button>
</div>
11. 完整的边框设计示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 边框示例</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- 卡片组 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 基础卡片 -->
<div class="bg-white border border-gray-200 rounded-lg
shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-900">基础卡片</h3>
<p class="text-gray-600 mt-2">简单的边框和阴影效果</p>
</div>
<!-- 强调卡片 -->
<div class="bg-white border-2 border-blue-500 rounded-lg
shadow-md p-6">
<h3 class="text-lg font-semibold text-blue-900">强调卡片</h3>
<p class="text-blue-700 mt-2">蓝色边框强调重要内容</p>
</div>
<!-- 成功卡片 -->
<div class="bg-green-50 border-l-4 border-green-500
rounded-r-lg p-6">
<h3 class="text-lg font-semibold text-green-900">成功状态</h3>
<p class="text-green-700 mt-2">左侧绿色边框表示成功</p>
</div>
</div>
<!-- 按钮组 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">按钮边框效果</h3>
<div class="flex flex-wrap gap-4">
<button class="border border-gray-300 rounded px-4 py-2
hover:border-gray-400 transition-colors">
基础按钮
</button>
<button class="border-2 border-blue-500 rounded-lg px-4 py-2
text-blue-600 hover:bg-blue-50
transition-colors">
轮廓按钮
</button>
<button class="border border-transparent bg-green-500
text-white rounded-full px-6 py-2
hover:bg-green-600 transition-colors">
圆角按钮
</button>
</div>
</div>
<!-- 输入框组 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">表单边框效果</h3>
<div class="space-y-4">
<input type="text"
class="w-full border border-gray-300 rounded px-3 py-2
focus:border-blue-500 focus:ring-2
focus:ring-blue-200 outline-none
transition-all"
placeholder="焦点时边框变化">
<textarea
class="w-full border border-gray-300 rounded-lg px-3 py-2
focus:border-green-500 focus:ring-2
focus:ring-green-200 outline-none
transition-all"
rows="3"
placeholder="文本区域边框效果"></textarea>
</div>
</div>
<!-- 头像和徽章 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">头像和徽章边框</h3>
<div class="flex items-center space-x-4">
<!-- 头像 -->
<div class="relative">
<div class="w-16 h-16 bg-gray-300 rounded-full
border-4 border-white shadow-lg"></div>
<div class="absolute -top-1 -right-1 w-6 h-6
bg-green-500 border-2 border-white
rounded-full"></div>
</div>
<!-- 徽章 -->
<div class="flex space-x-2">
<span class="border border-blue-200 bg-blue-50
text-blue-700 px-3 py-1 rounded-full
text-sm font-medium">
标签1
</span>
<span class="border border-green-200 bg-green-50
text-green-700 px-3 py-1 rounded-full
text-sm font-medium">
标签2
</span>
</div>
</div>
</div>
<!-- 分隔线和进度条 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">分隔线和进度条</h3>
<!-- 分隔线 -->
<div class="border-t border-gray-200 my-4"></div>
<!-- 进度条 -->
<div class="space-y-2">
<div class="text-sm text-gray-600">进度: 65%</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-blue-500 h-3 rounded-full border-2
border-white" style="width: 65%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
13. 自定义边框配置
您可以在 tailwind.config.js 中自定义边框设置：
// tailwind.config.js
module.exports = {
theme: {
extend: {
// 自定义边框宽度
borderWidth: {
'1': '1px',
'3': '3px',
'6': '6px',
'10': '10px',
},
// 自定义圆角
borderRadius: {
'4xl': '2rem',
'5xl': '2.5rem',
},
},
},
}
Tailwind CSS 的边框系统提供了丰富的工具来创建各种视觉效果，从简单的分隔线到复杂的卡片设计，都能轻松实现。
Tailwind CSS 阴影
1. 基础阴影类
<!-- 基础阴影大小 -->
<div class="shadow-sm">小阴影 - 轻微提升效果</div>
<div class="shadow">默认阴影 - 标准卡片阴影</div>
<div class="shadow-md">中等阴影 - 明显提升效果</div>
<div class="shadow-lg">大阴影 - 显著深度感</div>
<div class="shadow-xl">超大阴影 - 强烈立体感</div>
<div class="shadow-2xl">2倍阴影 - 非常突出的效果</div>
<!-- 无阴影 -->
<div class="shadow-none">完全无阴影</div>
2. 内阴影效果
<!-- 内阴影 -->
<div class="m-2 shadow-inner shadow-blue-500">内阴影 - 凹陷效果</div>
<!-- 内阴影组合 -->
<div class="m-2 shadow-lg shadow-inner shadow-blue-500">外阴影+内阴影组合</div>
<div class="m-2 shadow-inner shadow-blue-500 bg-gray-100">内阴影配浅色背景</div>
3. 阴影颜色控制
<!-- 阴影颜色透明度 -->
<div class="m-2 shadow-lg shadow-black/10">黑色10%透明度阴影</div>
<div class="m-2 shadow-lg shadow-black/25">黑色25%透明度阴影</div>
<div class="m-2 shadow-lg shadow-black/50">黑色50%透明度阴影</div>
<div class="m-2 shadow-lg shadow-black/75">黑色75%透明度阴影</div>
<!-- 彩色阴影 -->
<div class="m-2 shadow-lg shadow-red-500/20">红色20%透明度阴影</div>
<div class="m-2 shadow-lg shadow-blue-500/30">蓝色30%透明度阴影</div>
<div class="m-2 shadow-lg shadow-green-500/40">绿色40%透明度阴影</div>
<div class="m-2 shadow-lg shadow-purple-500/50">紫色50%透明度阴影</div>
<!-- 深色模式阴影颜色 -->
<div class="m-2 shadow-lg shadow-gray-800/50 dark:shadow-gray-200/20">
深色模式阴影适配
</div>
4. 阴影与边框的组合
<!-- 阴影 + 边框 -->
<div class="m-2 border border-gray-200 shadow-sm shadow-black/75">
轻微阴影配边框
</div>
<div class="m-2 border-2 border-blue-500 shadow-md shadow-black/75">
蓝色边框配中等阴影
</div>
<div class="m-2 border border-gray-300 shadow-lg shadow-black/75 rounded-lg">
圆角边框配大阴影
</div>
<!-- 无边框纯阴影 -->
<div class="m-2 shadow-xl shadow-black/75 rounded-xl">
纯阴影效果，无边框
</div>
5. 悬停和交互阴影效果
<!-- 悬停阴影变化 -->
<button class="shadow-sm hover:shadow-md transition-shadow">
悬停时阴影变大
</button>
<div class="shadow hover:shadow-lg transition-all duration-300">
悬停时阴影显著增强
</div>
<!-- 焦点状态阴影 -->
<input class="shadow-sm focus:shadow-md focus:ring-2 focus:ring-blue-200">
焦点时阴影变化
</input>
<!-- 激活状态阴影 -->
<button class="shadow-md active:shadow-sm active:scale-95">
点击时阴影变小
</button>
<!-- 禁用状态 -->
<button class="shadow-sm disabled:shadow-none" disabled>
禁用时无阴影
</button>
6. 响应式阴影
<!-- 响应式阴影大小 -->
<div class="shadow-none md:shadow lg:shadow-lg">
小屏幕无阴影，中等屏幕默认阴影，大屏幕大阴影
</div>
<!-- 响应式阴影颜色 -->
<div class="shadow-gray-200 md:shadow-gray-300 lg:shadow-gray-400">
响应式阴影颜色变化
</div>
<!-- 移动端优化 -->
<div class="shadow-sm md:shadow-lg">
移动端小阴影，桌面端大阴影
</div>
7. 阴影与背景的组合
<!-- 浅色背景阴影 -->
<div class="bg-white shadow-lg">白色背景配大阴影</div>
<div class="bg-gray-50 shadow-md">浅灰背景配中等阴影</div>
<!-- 深色背景阴影 -->
<div class="bg-gray-800 text-white shadow-xl">
深色背景配白色文字和阴影
</div>
<!-- 渐变背景阴影 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600
shadow-2xl text-white">
渐变背景配强阴影
</div>
<!-- 透明背景阴影 -->
<div class="bg-white/80 backdrop-blur shadow-lg">
半透明背景配模糊效果和阴影
</div>
8. 卡片阴影设计模式
<!-- 基础卡片阴影 -->
<div class="bg-white rounded-lg shadow-sm p-6">
轻微阴影卡片 - 适合内容区块
</div>
<div class="bg-white rounded-xl shadow-md p-6">
中等阴影卡片 - 标准卡片设计
</div>
<div class="bg-white rounded-2xl shadow-lg p-8">
大阴影卡片 - 突出显示内容
</div>
<!-- 浮动卡片效果 -->
<div class="bg-white rounded-lg shadow-xl hover:shadow-2xl
transition-shadow duration-300 p-6">
悬停浮动卡片效果
</div>
<!-- 堆叠阴影效果 -->
<div class="relative">
<div class="bg-white rounded-lg shadow-lg p-6 z-10">
主卡片
</div>
<div class="absolute -bottom-2 -right-2 w-full h-full
bg-gray-200 rounded-lg shadow-sm z-0">
背景阴影层
</div>
</div>
9. 按钮阴影效果
<!-- 扁平按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded
shadow-blue-500 shadow-sm hover:shadow-md">
扁平按钮阴影
</button>
<!-- 凸起按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg
shadow-blue-500 shadow-md hover:shadow-lg active:shadow-sm ">
凸起按钮效果
</button>
<!-- 浮动按钮 -->
<button class="bg-green-500 text-white px-6 py-3 rounded-full
shadow-lg hover:shadow-xl hover:scale-105
transition-all">
浮动按钮效果
</button>
<!-- 轮廓按钮阴影 -->
<button class="border-2 border-blue-500 text-blue-600
px-4 py-2 rounded shadow-sm hover:shadow-md">
轮廓按钮阴影
</button>
10. 图像和媒体阴影
<!-- 图片阴影 -->
<img src="photo.jpg" alt="图片"
class="rounded-lg shadow-md hover:shadow-lg
transition-shadow">
<!-- 头像阴影 -->
<div class="w-24 h-24 rounded-full shadow-lg overflow-hidden">
<img src="avatar.jpg" alt="头像" class="w-full h-full object-cover">
</div>
<!-- 视频容器阴影 -->
<div class="bg-black rounded-xl shadow-2xl overflow-hidden">
<video class="w-full" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
<!-- 图标阴影 -->
<div class="w-12 h-12 bg-blue-500 rounded-full shadow-lg
flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
</svg>
</div>
11. 文本阴影效果
<!-- 文本阴影（需要自定义） -->
<h1 class="text-4xl font-bold [text-shadow:2px_2px_4px_rgba(0,0,0,0.3)]">
带阴影的标题
</h1>
<p class="text-lg [text-shadow:1px_1px_2px_rgba(0,0,0,0.2)]">
带阴影的正文文本
</p>
<!-- 深色背景文本阴影 -->
<div class="bg-gray-900 p-6">
<h2 class="text-2xl text-white
[text-shadow:2px_2px_4px_rgba(0,0,0,0.5)]">
深色背景上的文本阴影
</h2>
</div>
12. 高级阴影技巧
<!-- 多层阴影 -->
<div class="shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_10px_15px_-3px_rgba(0,0,0,0.1)]">
多层阴影效果
</div>
<!-- 不对称阴影 -->
<div class="shadow-[4px_4px_12px_rgba(0,0,0,0.15)]">
自定义不对称阴影
</div>
<!-- 发光效果 -->
<div class="shadow-[0_0_20px_rgba(59,130,246,0.5)]
border border-blue-300">
蓝色发光效果
</div>
<!-- 长阴影效果 -->
<div class="relative">
<div class="bg-white p-6 rounded-lg z-10 relative">
主要内容
</div>
<div class="absolute inset-0 bg-gray-300 rounded-lg
translate-x-2 translate-y-2 -z-10">
长阴影效果
</div>
</div>
13. 完整的阴影设计示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 阴影示例</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen p-8">
<div class="max-w-6xl mx-auto space-y-8">
<!-- 阴影大小展示 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold">小阴影 (shadow-sm)</h3>
<p class="text-gray-600 mt-2">轻微提升效果，适合内容区块</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-semibold">默认阴影 (shadow)</h3>
<p class="text-gray-600 mt-2">标准卡片阴影效果</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold">中等阴影 (shadow-md)</h3>
<p class="text-gray-600 mt-2">明显的深度感</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold">大阴影 (shadow-lg)</h3>
<p class="text-gray-600 mt-2">显著的立体效果</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-xl">
<h3 class="text-lg font-semibold">超大阴影 (shadow-xl)</h3>
<p class="text-gray-600 mt-2">强烈的深度感</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-2xl">
<h3 class="text-lg font-semibold">2倍阴影 (shadow-2xl)</h3>
<p class="text-gray-600 mt-2">非常突出的效果</p>
</div>
</div>
<!-- 交互式阴影效果 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">交互式阴影效果</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- 悬停效果 -->
<div class="bg-blue-50 p-6 rounded-lg shadow-sm
hover:shadow-lg transition-shadow duration-300
cursor-pointer">
<h3 class="text-lg font-semibold text-blue-800">悬停效果</h3>
<p class="text-blue-600">鼠标悬停时阴影变大</p>
</div>
<!-- 点击效果 -->
<div class="bg-green-50 p-6 rounded-lg shadow-md
active:shadow-sm active:scale-95
transition-all duration-200 cursor-pointer">
<h3 class="text-lg font-semibold text-green-800">点击效果</h3>
<p class="text-green-600">点击时阴影变小并缩放</p>
</div>
</div>
</div>
<!-- 按钮阴影示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">按钮阴影效果</h2>
<div class="flex flex-wrap gap-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded
shadow-sm hover:shadow-md transition-shadow">
基础按钮
</button>
<button class="bg-green-500 text-white px-6 py-3 rounded-lg
shadow-md hover:shadow-lg hover:scale-105
transition-all">
凸起按钮
</button>
<button class="border-2 border-purple-500 text-purple-600
px-4 py-2 rounded shadow-sm hover:shadow-md
transition-shadow">
轮廓按钮
</button>
<button class="bg-gradient-to-r from-red-500 to-pink-500
text-white px-6 py-3 rounded-full
shadow-lg hover:shadow-xl transition-shadow">
渐变按钮
</button>
</div>
</div>
<!-- 卡片设计示例 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- 用户卡片 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden
hover:shadow-2xl transition-shadow duration-300">
<div class="h-32 bg-gradient-to-r from-blue-500 to-purple-600"></div>
<div class="p-6 -mt-16">
<div class="w-24 h-24 mx-auto rounded-full border-4
border-white shadow-lg bg-gray-200
overflow-hidden">
<!-- 头像占位 -->
</div>
<h3 class="text-xl font-bold text-center mt-4">张三</h3>
<p class="text-gray-600 text-center">前端开发者</p>
<div class="mt-4 flex justify-center space-x-2">
<span class="bg-blue-100 text-blue-800 px-3 py-1
rounded-full text-sm shadow-sm">
React
</span>
<span class="bg-green-100 text-green-800 px-3 py-1
rounded-full text-sm shadow-sm">
Tailwind
</span>
</div>
</div>
</div>
<!-- 特性卡片 -->
<div class="bg-gradient-to-br from-purple-500 to-pink-500
rounded-2xl shadow-2xl text-white p-8">
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center
justify-center shadow-lg mb-6">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">高级特性</h3>
<p class="text-purple-100 mb-6">体验最先进的阴影效果设计</p>
<button class="bg-white text-purple-600 px-6 py-2 rounded-full
shadow-lg hover:shadow-xl transition-shadow">
了解更多
</button>
</div>
</div>
<!-- 内阴影示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">内阴影效果</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-100 p-6 rounded-lg shadow-inner">
<h3 class="text-lg font-semibold">凹陷效果</h3>
<p class="text-gray-600">内阴影创建的凹陷视觉</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-inner
shadow-white/10 text-white">
<h3 class="text-lg font-semibold">深色内阴影</h3>
<p class="text-gray-300">深色背景上的内阴影效果</p>
</div>
</div>
</div>
<!-- 响应式阴影 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">响应式阴影</h2>
<div class="bg-blue-50 p-6 rounded-lg
shadow-sm md:shadow-lg lg:shadow-xl
transition-shadow duration-300">
<h3 class="text-lg font-semibold text-blue-800">
响应式阴影演示
</h3>
<p class="text-blue-600">
在小屏幕上显示小阴影，中等屏幕中等阴影，大屏幕大阴影
</p>
</div>
</div>
</div>
</body>
</html>
14. 自定义阴影配置
您可以在 tailwind.config.js 中自定义阴影设置：
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
// 自定义阴影
'custom': '0 10px 30px -5px rgba(0, 0, 0, 0.3)',
'custom-lg': '0 20px 40px -10px rgba(0, 0, 0, 0.25)',
// 内阴影
'inner-custom': 'inset 0 4px 8px -2px rgba(0, 0, 0, 0.1)',
// 发光效果
'glow': '0 0 20px rgba(59, 130, 246, 0.5)',
'glow-lg': '0 0 40px rgba(59, 130, 246, 0.3)',
// 多层阴影
'multi': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)',
}
},
},
}
Tailwind CSS 的阴影系统非常强大，通过合理的阴影使用可以：
- 创建视觉层次和深度感
- 突出重要内容和交互元素
- 增强用户体验和界面美观度
- 实现现代化的设计效果
Tailwind CSS 交互状态与动画
1. 交互状态类
悬停状态 (Hover)
<!-- 背景颜色变化 -->
<button class="bg-blue-500 hover:bg-blue-600">悬停变深色</button>
<!-- 文本颜色变化 -->
<a href="#" class="text-gray-600 hover:text-blue-500">悬停链接</a>
<!-- 边框变化 -->
<div class="border border-gray-300 hover:border-blue-500">悬停边框</div>
<!-- 阴影变化 -->
<div class="shadow-sm hover:shadow-md">悬停阴影</div>
<!-- 透明度变化 -->
<div class="opacity-90 hover:opacity-100">悬停不透明</div>
焦点状态 (Focus)
<!-- 输入框焦点 -->
<input class="border border-gray-300 focus:border-blue-500
focus:ring-2 focus:ring-blue-200"
placeholder="焦点时边框和光环">
<!-- 按钮焦点 -->
<button class="bg-blue-500 focus:bg-blue-600 focus:outline-none
focus:ring-2 focus:ring-blue-300">
焦点按钮
</button>
<!-- 自定义焦点样式 -->
<a href="#" class="focus:outline-none focus:ring-2 focus:ring-green-500
focus:ring-offset-2">
自定义焦点环
</a>
激活状态 (Active)
<!-- 按钮激活 -->
<button class="bg-blue-500 active:bg-blue-700">点击时变深色</button>
<!-- 缩放效果 -->
<button class="active:scale-95">点击时缩小</button>
<!-- 阴影变化 -->
<button class="shadow-md active:shadow-sm">点击时阴影变小</button>
其他状态
<!-- 禁用状态 -->
<button class="bg-gray-300 disabled:bg-gray-200" disabled>禁用按钮</button>
<!-- 选中状态 -->
<input type="checkbox" class="checked:bg-blue-500">选中状态</input>
<!-- 无效状态 -->
<input type="email" class="invalid:border-red-500" required>
<!-- 只读状态 -->
<input type="text" readonly class="read-only:bg-gray-100">
2. 过渡动画 (Transitions)
基础过渡
<!-- 颜色过渡 -->
<button class="bg-blue-500 hover:bg-blue-600 transition-colors">
颜色平滑过渡
</button>
<!-- 所有属性过渡 -->
<div class="hover:scale-105 transition-all">所有属性过渡</div>
<!-- 指定属性过渡 -->
<div class="hover:opacity-75 transition-opacity">仅透明度过渡</div>
过渡持续时间
<!-- 快速过渡 -->
<button class="transition-colors duration-150">快速过渡 (150ms)</button>
<!-- 标准过渡 -->
<button class="transition-colors duration-300">标准过渡 (300ms)</button>
<!-- 慢速过渡 -->
<button class="transition-colors duration-500">慢速过渡 (500ms)</button>
<!-- 极慢过渡 -->
<button class="transition-colors duration-700">极慢过渡 (700ms)</button>
<!-- 无过渡 -->
<button class="transition-none">无过渡效果</button>
过渡时序函数
<!-- 线性过渡 -->
<div class="transition-all duration-300 ease-linear">线性</div>
<!-- 缓入 -->
<div class="transition-all duration-300 ease-in">缓入</div>
<!-- 缓出 -->
<div class="transition-all duration-300 ease-out">缓出</div>
<!-- 缓入缓出 -->
<div class="transition-all duration-300 ease-in-out">缓入缓出</div>
<!-- 自定义贝塞尔曲线 -->
<div class="transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]">
自定义曲线
</div>
过渡延迟
<!-- 延迟过渡 -->
<button class="transition-colors duration-300 delay-100">
延迟100ms过渡
</button>
<div class="transition-all duration-500 delay-200">
延迟200ms过渡
</div>
3. 变换动画 (Transforms)
缩放变换
<!-- 悬停缩放 -->
<div class="hover:scale-105 transition-transform">悬停放大5%</div>
<div class="hover:scale-110 transition-transform">悬停放大10%</div>
<div class="hover:scale-125 transition-transform">悬停放大25%</div>
<!-- 点击缩放 -->
<button class="active:scale-95 transition-transform">点击缩小</button>
<!-- 不同轴缩放 -->
<div class="hover:scale-x-105">水平缩放</div>
<div class="hover:scale-y-110">垂直缩放</div>
平移变换
<!-- 悬停平移 -->
<div class="hover:translate-y-1 transition-transform">向下平移</div>
<div class="hover:-translate-y-1 transition-transform">向上平移</div>
<div class="hover:translate-x-2 transition-transform">向右平移</div>
<div class="hover:-translate-x-2 transition-transform">向左平移</div>
<!-- 组合平移 -->
<div class="hover:translate-x-2 hover:translate-y-2">对角线平移</div>
旋转变换
<!-- 悬停旋转 -->
<div class="hover:rotate-12 transition-transform">旋转12度</div>
<div class="hover:rotate-45 transition-transform">旋转45度</div>
<div class="hover:rotate-90 transition-transform">旋转90度</div>
<div class="hover:rotate-180 transition-transform">旋转180度</div>
<!-- 持续旋转 -->
<div class="animate-spin">持续旋转</div>
倾斜变换
<!-- 悬停倾斜 -->
<div class="hover:skew-x-3 transition-transform">水平倾斜</div>
<div class="hover:skew-y-3 transition-transform">垂直倾斜</div>
<div class="hover:skew-x-6 hover:skew-y-3">组合倾斜</div>
4. 关键帧动画 (Animations)
预设动画
<!-- 旋转动画 -->
<div class="animate-spin">持续旋转</div>
<div class="animate-spin-slow">慢速旋转</div>
<!-- 脉冲动画 -->
<div class="animate-pulse">脉冲效果（加载中）</div>
<!-- 弹跳动画 -->
<div class="animate-bounce">弹跳效果</div>
<!-- 淡入淡出 -->
<div class="animate-ping">淡入淡出（通知）</div>
自定义动画
<!-- 自定义关键帧 -->
<style>
@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.animate-slide-in {
animation: slide-in 0.5s ease-out;
}
</style>
<div class="animate-slide-in">自定义滑动动画</div>
5. 悬停和焦点组
组悬停效果
<!-- 父级悬停影响子级 -->
<div class="group">
<div class="group-hover:bg-blue-500">父级悬停时变色</div>
<div class="group-hover:scale-105">父级悬停时缩放</div>
</div>
<!-- 兄弟元素影响 -->
<div class="peer">
<input class="peer">
<div class="peer-focus:visible peer-focus:opacity-100">
兄弟元素焦点时显示
</div>
</div>
6. 响应式交互
<!-- 移动端优化交互 -->
<button class="active:scale-95 md:hover:scale-105">
移动端点击缩放，桌面端悬停缩放
</button>
<!-- 触摸设备优化 -->
<div class="hover:shadow-lg md:hover:shadow-xl touch:active:shadow-md">
触摸设备特殊处理
</div>
<!-- 响应式动画速度 -->
<div class="hover:scale-105 transition-transform duration-300
md:duration-500 lg:duration-700">
响应式过渡速度
</div>
7. 深色模式交互
<!-- 深色模式交互状态 -->
<button class="bg-blue-500 hover:bg-blue-600
dark:bg-blue-700 dark:hover:bg-blue-800">
深色模式适配
</button>
<div class="border border-gray-300 hover:border-blue-500
dark:border-gray-600 dark:hover:border-blue-400">
深色模式边框变化
</div>
8. 实用交互模式
加载状态
<!-- 加载按钮 -->
<button class="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300
transition-colors" disabled>
<div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent
rounded-full"></div>
加载中...
</button>
<!-- 骨架屏 -->
<div class="animate-pulse">
<div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
通知效果
<!-- 淡入通知 -->
<div class="animate-fade-in duration-300">
新消息通知
</div>
<!-- 震动效果 -->
<div class="hover:animate-shake">悬停震动</div>
页面过渡
<!-- 页面进入动画 -->
<div class="animate-fade-in-up duration-500">
页面内容
</div>
<!-- 路由切换动画 -->
<div class="transition-opacity duration-300 opacity-0
[&.active]:opacity-100">
路由内容
</div>
9. 完整的交互动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 交互状态与动画示例</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-up {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.animate-slide-in {
animation: slide-in 0.5s ease-out;
}
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out;
}
.animate-shake {
animation: shake 0.5s ease-in-out;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- 按钮交互示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">按钮交互效果</h2>
<div class="flex flex-wrap gap-4">
<!-- 基础悬停按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded
hover:bg-blue-600 active:bg-blue-700
transition-colors duration-200">
悬停+点击效果
</button>
<!-- 缩放按钮 -->
<button class="bg-green-500 text-white px-4 py-2 rounded-lg
hover:scale-105 active:scale-95
transition-all duration-200">
缩放效果
</button>
<!-- 阴影按钮 -->
<button class="bg-purple-500 text-white px-4 py-2 rounded
shadow-md hover:shadow-lg active:shadow-sm
transition-all duration-300">
阴影变化
</button>
<!-- 轮廓按钮 -->
<button class="border-2 border-red-500 text-red-600
px-4 py-2 rounded hover:bg-red-50
active:bg-red-100 transition-colors">
轮廓按钮
</button>
</div>
</div>
<!-- 卡片交互示例 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- 悬停卡片 -->
<div class="bg-white rounded-xl shadow-sm p-6
hover:shadow-xl hover:scale-105
transition-all duration-300 cursor-pointer">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center
justify-center mb-4 transition-colors group-hover:bg-blue-200">
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">悬停效果卡片</h3>
<p class="text-gray-600">鼠标悬停时会有缩放和阴影变化</p>
</div>
<!-- 焦点卡片 -->
<div class="bg-white rounded-xl shadow-sm p-6
focus-within:shadow-lg focus-within:ring-2
focus-within:ring-blue-300 transition-all">
<h3 class="text-lg font-semibold mb-4">焦点状态卡片</h3>
<input type="text"
class="w-full border border-gray-300 rounded px-3 py-2
focus:outline-none focus:border-blue-500
transition-colors"
placeholder="点击输入框查看焦点效果">
</div>
</div>
<!-- 加载状态示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">加载状态动画</h2>
<div class="flex flex-wrap gap-4 items-center">
<!-- 加载按钮 -->
<button class="bg-blue-500 text-white px-6 py-3 rounded
flex items-center gap-2 hover:bg-blue-600
disabled:bg-blue-300 transition-colors"
disabled>
<div class="animate-spin h-5 w-5 border-2 border-white
border-t-transparent rounded-full"></div>
加载中...
</button>
<!-- 脉冲加载 -->
<div class="animate-pulse flex space-x-4">
<div class="rounded-full bg-gray-300 h-12 w-12"></div>
<div class="flex-1 space-y-2">
<div class="h-4 bg-gray-300 rounded w-3/4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2"></div>
</div>
</div>
</div>
</div>
<!-- 动画示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">预设动画效果</h2>
<div class="flex flex-wrap gap-6 items-center">
<!-- 旋转动画 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-blue-500 rounded-full
animate-spin flex items-center justify-center">
<div class="w-8 h-8 bg-white rounded-full"></div>
</div>
<span class="mt-2 text-sm">旋转</span>
</div>
<!-- 弹跳动画 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-green-500 rounded-full
animate-bounce flex items-center justify-center">
<div class="w-8 h-8 bg-white rounded-full"></div>
</div>
<span class="mt-2 text-sm">弹跳</span>
</div>
<!-- 脉冲动画 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-purple-500 rounded-full
animate-pulse flex items-center justify-center">
<div class="w-8 h-8 bg-white rounded-full"></div>
</div>
<span class="mt-2 text-sm">脉冲</span>
</div>
<!-- 淡入淡出 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-red-500 rounded-full
animate-ping flex items-center justify-center">
<div class="w-8 h-8 bg-white rounded-full"></div>
</div>
<span class="mt-2 text-sm">淡入淡出</span>
</div>
</div>
</div>
<!-- 自定义动画示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">自定义动画</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- 滑动进入 -->
<div class="bg-blue-100 p-4 rounded animate-slide-in">
<h3 class="font-semibold">滑动进入</h3>
<p>页面加载时从左侧滑入</p>
</div>
<!-- 淡入上升 -->
<div class="bg-green-100 p-4 rounded animate-fade-in-up">
<h3 class="font-semibold">淡入上升</h3>
<p>从下方淡入并上升</p>
</div>
<!-- 震动效果 -->
<div class="bg-yellow-100 p-4 rounded hover:animate-shake
cursor-pointer transition-all">
<h3 class="font-semibold">悬停震动</h3>
<p>鼠标悬停时震动</p>
</div>
</div>
</div>
<!-- 表单交互示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">表单交互状态</h2>
<div class="space-y-4 max-w-md">
<!-- 文本输入 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
用户名
</label>
<input type="text"
class="w-full border border-gray-300 rounded px-3 py-2
focus:outline-none focus:border-blue-500
focus:ring-2 focus:ring-blue-200
invalid:border-red-500 invalid:ring-red-200
transition-all duration-200"
placeholder="输入用户名"
required>
</div>
<!-- 邮箱输入 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
邮箱地址
</label>
<input type="email"
class="w-full border border-gray-300 rounded px-3 py-2
focus:outline-none focus:border-green-500
focus:ring-2 focus:ring-green-200
invalid:border-red-500 invalid:ring-red-200
transition-all duration-200"
placeholder="输入有效邮箱"
required>
</div>
<!-- 选择框 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
选项
</label>
<select class="w-full border border-gray-300 rounded px-3 py-2
focus:outline-none focus:border-purple-500
focus:ring-2 focus:ring-purple-200
transition-all duration-200">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
</div>
</div>
</div>
<!-- 组交互示例 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">组交互效果</h2>
<div class="group p-4 bg-gray-50 rounded-lg cursor-pointer
hover:bg-blue-50 transition-colors duration-300">
<h3 class="text-lg font-semibold group-hover:text-blue-600
transition-colors">组悬停标题</h3>
<p class="text-gray-600 group-hover:text-gray-800
transition-colors">
当鼠标悬停在父元素上时，所有子元素都会响应
</p>
<button class="mt-2 bg-gray-200 group-hover:bg-blue-500
group-hover:text-white px-3 py-1 rounded
transition-colors">
组内按钮
</button>
</div>
</div>
</div>
</body>
</html>
10. 自定义配置
您可以在 tailwind.config.js 中自定义交互和动画设置：
// tailwind.config.js
module.exports = {
theme: {
extend: {
// 自定义过渡时间
transitionDuration: {
'2000': '2000ms',
'3000': '3000ms',
},
// 自定义动画
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-down': 'slideDown 0.3s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideDown: {
'0%': { transform: 'translateY(-10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
},
// 自定义变换
scale: {
'102': '1.02',
'98': '0.98',
},
},
},
}
Tailwind CSS 的交互状态与动画系统提供了丰富的工具来创建动态、响应式的用户界面。通过合理使用这些功能，可以显著提升用户体验和界面美观度。记住，好的动画应该是微妙而有效的，避免过度使用导致界面混乱。
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献5条内容
所有评论(0)