用tailwindcss写了一个基础的card layout：

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

legs+ · 发表于 3 天前| 字数 4,655

其实，tailwindcss还是蛮简单的，直接把源代码奉上：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Card Gallery</title>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl font-bold text-center mb-8">Card Gallery</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=1" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 1</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=2" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 2</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=3" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 3</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=4" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 4</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=5" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 5</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/400/300?random=6" alt="Random image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Card Title 6</h2>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">Read More</button>
</div>
</div>
</div>
</div>
</body>
</html>

复制代码

legs+ · 发表于 3 天前| 字数 31

要善于找规律，tailwind同bootstrap还是有点类似

legs+ · 发表于 3 天前| 字数 81

bootstrap：使用的是预定义组件

tailwind：使用原子类

学习曲线：
bootstrap：学习组件名和修饰符

tailwind：学习工具类和组合，自由的组合类