后端开发教程 - Java、Spring Boot 实战 - msg200.com
4 个有用的 tailwindcss 代码片段
使用可重用组件避免代码重复
响应式网格
3- 彩色笔记
4-按钮
我决定写这篇文章，向你展示使用 tailwindcss 构建出色的 UI 组件是多么简单。无需自定义 CSS。
“但是，要使我的组件响应式，媒体查询怎么办呢？” 忘掉媒体查询吧。tailwindcss 有一套非常棒的响应式实用程序变体。
我将向您展示 4 个有用的代码片段，它们将帮助您在使用 Tailwind 构建界面时加快开发进程。
使用可重用组件避免代码重复
在某些情况下，你可能会想：“重复代码太多了”。但是，如果你正在使用任何现代 JS 框架，例如 Angular、React 或 Vue，你可以通过提取可复用组件来轻松减少重复代码。更多关于此主题的内容将在下一篇文章中介绍。
响应式网格
1-三列网格
<!-- Container -->
<div class="flex flex-wrap mt-2 mx-2">
<!-- Item -->
<div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
<div class="bg-yellow-500 p-4">
Your content here...
</div>
</div>
<!-- Item -->
<div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
<div class="bg-yellow-500 p-4">
Your content here...
</div>
</div>
...
</div>
我对每个网格元素使用以下实用程序：
w-full将应用宽度：100%md:w-1/2将应用宽度：中等及以上屏幕尺寸的 50%lg:w-1/3将应用宽度：33,33% 适用于大屏幕尺寸及以上
两列网格
假设我们只想每行显示两列。在这种情况下，我们需要对代码做一些小改动。本质上，我们需要删除该lg:w-1/3实用程序。这样，在中等及以上的屏幕尺寸下，每个项目都会应用 width:50% 。
2- 三列卡片网格
<!-- Container -->
<div class="flex flex-wrap mt-2 mx-2">
<!-- Item -->
<div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
<div class="shadow-md bg-white">
<img class="h-48 w-full object-cover" src="https://your-image-url.jpg" alt="">
<div class="flex flex-col p-4">
<p class="text-lg">Your title here...</p>
<p class="text-gray-600">Your description here...</p>
<button class="self-end mt-4">Show more...</button>
</div>
</div>
</div>
...
</div>
- 我正在使用
object-cover图像上的实用程序来调整元素内容的大小以覆盖其容器。 - 如果您需要更改容器内的图像位置，请查看对象位置实用程序
3- 彩色笔记
<!-- Orange note -->
<div class="bg-orange-100 text-orange-500 border-l-8 border-orange-500 p-4 mb-2">
<p class="font-bold">Note</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
4-按钮
<!-- Simple button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
<!-- Outline button -->
<button class="hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mb-2">Button</button>
<!-- Simple button with icon -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
<span>Button</span>
</button>
- 我正在使用
hover:bg-blue-700不同的背景颜色来悬停状态
你试过 tailwindcss 吗？使用体验如何？
鏂囩珷鏉ユ簮锛�https://dev.to/mauro_codes/4-useful-snippets-for-tailwindcss-2115