前言
Tailwind-css 是一款流行的 CSS 框架，它通过提供一组预定义的 CSS 类，使得开发者可以更快速、更方便地编写出漂亮的界面。本文将为您呈现一份漂亮的 Tailwind-css 案例集，旨在帮助读者更好地掌握 Tailwind-css 的使用方法，并提供一些实用的技巧和指导。
案例一：响应式导航栏
这是一个简单而美观的响应式导航栏，它可以随着屏幕大小的变化而自动调整布局。代码如下：
// www.javascriptcn.com code example
<nav class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8" src="/img/logo.svg" alt="Workflow">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: menu -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Heroicon name: x -->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
</nav>案例二：漂亮的按钮
这是一组漂亮的按钮，它们具有不同的颜色和样式。代码如下：
// www.javascriptcn.com code example
<div class="flex space-x-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Primary
</button>
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Secondary
</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Success
</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Danger
</button>
</div>案例三：响应式卡片布局
这是一个响应式卡片布局，它可以自动调整卡片的大小和排列方式。代码如下：
// www.javascriptcn.com code example
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-white overflow-hidden shadow rounded-lg">
<img class="w-full h-48 object-cover" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-4 py-2">
<h3 class="text-gray-800 font-bold text-xl mb-2">Sunset in the mountains</h3>
<p class="text-gray-600 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod, mauris ut ullamcorper dapibus, nibh nibh fringilla metus, in auctor elit lorem eu elit.</p>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<img class="w-full h-48 object-cover" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-4 py-2">
<h3 class="text-gray-800 font-bold text-xl mb-2">Sunset in the mountains</h3>
<p class="text-gray-600 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod, mauris ut ullamcorper dapibus, nibh nibh fringilla metus, in auctor elit lorem eu elit.</p>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<img class="w-full h-48 object-cover" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-4 py-2">
<h3 class="text-gray-800 font-bold text-xl mb-2">Sunset in the mountains</h3>
<p class="text-gray-600 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod, mauris ut ullamcorper dapibus, nibh nibh fringilla metus, in auctor elit lorem eu elit.</p>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<img class="w-full h-48 object-cover" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-4 py-2">
<h3 class="text-gray-800 font-bold text-xl mb-2">Sunset in the mountains</h3>
<p class="text-gray-600 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod, mauris ut ullamcorper dapibus, nibh nibh fringilla metus, in auctor elit lorem eu elit.</p>
</div>
</div>
</div>案例四：自适应表格布局
这是一个自适应的表格布局，它可以自动调整列的宽度和行的高度。代码如下：
// www.javascriptcn.com code example
<div class="overflow-x-auto">
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Title</th>
<th class="px-4 py-2">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">John Doe</td>
<td class="border px-4 py-2">CEO</td>
<td class="border px-4 py-2"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
<tr>
<td class="border px-4 py-2">Jane Doe</td>
<td class="border px-4 py-2">CTO</td>
<td class="border px-4 py-2"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
</tr>
<tr>
<td class="border px-4 py-2">Bob Johnson</td>
<td class="border px-4 py-2">Manager</td>
<td class="border px-4 py-2"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
</tbody>
</table>
</div>案例五：响应式图片布局
这是一个响应式的图片布局，它可以自动调整图片的大小和排列方式。代码如下：
// www.javascriptcn.com code example
<div class="flex flex-wrap -mx-2">
<div class="w-full md:w-1/2 lg:w-1/3 px-2">
<img class="w-full h-64 object-cover object-center" src="/img/pic1.jpg" alt="Pic 1">
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-2">
<img class="w-full h-64 object-cover object-center" src="/img/pic2.jpg" alt="Pic 2">
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-2">
<img class="w-full h-64 object-cover object-center" src="/img/pic3.jpg" alt="Pic 3">
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-2">
<img class="w-full h-64 object-cover object-center" src="/img/pic4.jpg" alt="Pic 4">
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-2">
<img class="w-full h-64 object-cover object-center" src="/img/pic5.jpg" alt="Pic 5">
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-2">
<img class="w-full h-64 object-cover object-center" src="/img/pic6.jpg" alt="Pic 6">
</div>
</div>结语
以上就是一份漂亮的 Tailwind-css 案例集，希望读者能够从中学习到一些实用的技巧和指导。当然，这只是冰山一角，如果您想更深入地了解 Tailwind-css，建议您查阅官方文档并多写一些实践代码，相信您一定会得到更多的收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d90868a941bf71340745db