如何将SVG和文本集中在按钮内或使用尾风CSS链接
若要在按钮或链接内垂直居中图标和一些文本，请将以下类添加到按钮/链接中inline-flex items-center。注意：在SPAN中包装文本不是必需的，但我喜欢一致性。
示例截图
电码
<button
class="inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
<span>View article</span>
<svg class="ml-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
如何使用尾风CSS将div垂直地放在另一个div内
在另一个div中垂直对齐div是与前面的示例类似的问题。通常需要将卡片或其他内容垂直地放在页面的某个部分中。若要这样做，请添加flex items-center类到包装器div。如果内部内容也应以水平为中心，则添加justify-center同学们也一样。
示例截图
电码
<!-- Wrapper div with a height greater than the contents -->
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<!-- Card or contents that should be centered vertically -->
<div class="max-w-md px-10 py-12 bg-white rounded-lg shadow-lg">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
Getting Started with Tailwind CSS Custom Forms
</h2>
<p class="mt-2 text-lg">
In this tutorial, I show you how to install the Tailwind CSS Custom Forms
plugin and get started using it.
</p>
<a href="#" class="mt-6 inline-block text-blue-700">Read more</a>
</div>
</div>
如何使用尾风css和柔性盒创建类似引导带的响应列网格
一个棘手的事情，包括在引导，但“缺失”从尾风是一个响应的列/网格系统构建的挠性盒。注意：这里我不是在谈论CSS网格。
诀窍是用flex , flex-wrap，以及实现响应列的负边距。
从一个“容器”元素开始，它有一些填充和一个最大宽度/mx-自动(如果需要的话)。此处使用的填充应该正好是您所希望的列“差距”的一半。在下面的示例中，我使用px-4 .
接下来，添加“网格包装器”。它应该有一个负值，并且flex flex-wrap上课。负边距应该与容器上的填充量相匹配，因此下面我使用-mx-4。如果负边距大于容器上的填充，则可能会在某些屏幕大小上得到水平滚动条，这是不可取的。这在某种程度上相当于row全班学生。
接下来，您可以构建“列”。在这里，您将需要添加相同的填充量，即“减去”负差，所以我使用p-4下面。在这里，您还将设置列宽。而不是像这样的类col-4 col-md-3用于引导，我们将简单地使用内置的尾风宽度类。下面，我用w-full sm:w-1/2 lg:w-1/3使柱子在移动上全宽，在小屏幕上半宽，在大屏幕上使三分之一宽。
在每个“列”中，你可以添加任何你想要的内容。下面，我添加了一些卡片作为我的内容。
现在，您应该有一个功能良好、响应迅速的网格系统。如果希望增加每个网格列之间的空间数量，请增加“容器”上的填充、“网格包装器”上的负边距以及每个“网格列”上的填充。
示例截图
电码
<!-- Container -->
<div class="max-w-screen-xl mx-auto px-4">
<!-- Grid wrapper -->
<div class="-mx-4 flex flex-wrap">
<!-- Grid column -->
<div class="w-full p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div class="px-10 py-12 bg-white rounded-lg shadow-lg">
<!-- Card contents -->
</div>
</div>
<!-- Grid column -->
<div class="w-full p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div class="px-10 py-12 bg-white rounded-lg shadow-lg">
<!-- Card contents -->
</div>
</div>
<!-- Grid column -->
<div class="w-full p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div class="px-10 py-12 bg-white rounded-lg shadow-lg">
<!-- Card contents -->
</div>
</div>
</div>
</div>
如何使挠曲行中的所有div与尾风css等高
在上面的例子中，你可能注意到卡片的高度不一样。虽然在某些情况下，这是好的，但在另一些，它是更美观的每一个项目是相同的高度。
技巧是添加flex flex-col类添加到每个“网格列”元素中，并将flex-1类设置为每个“网格列”元素的内容。
示例截图
电码
<!-- Container -->
<div class="max-w-screen-xl mx-auto px-4">
<!-- Grid wrapper -->
<div class="-mx-4 flex flex-wrap">
<!-- Grid column -->
<div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div class="flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
<!-- Card contents -->
</div>
</div>
<!-- Grid column -->
<div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div class="flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
<!-- Card contents -->
</div>
</div>
<!-- Grid column -->
<div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div class="flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
<!-- Card contents -->
</div>
</div>
</div>
</div>
如何使用尾风css将按钮按到每张卡的底部
在上面的示例中进一步展开，如果在每张卡的底部都有一个按钮，您可能希望将该按钮固定在每张卡的底部。
确保您已经实现了前面的技巧，然后添加flex flex-col“列内容”元素。把所有的东西包起来
除
类的div中的按钮。flex-1现在应该把按钮推到卡片的底部。
示例截图
电码
<!-- Container -->
<div class="max-w-screen-xl mx-auto px-4">
<!-- Grid wrapper -->
<div class="-mx-4 flex flex-wrap">
<!-- Grid column -->
<div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div
class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"
>
<div class="flex-1">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
Tailwind v1.1.0
</h2>
<p class="mt-2 text-lg">
Tailwind v1.1.0 has been released with some cool new features and a
couple of bug fixes. This is the first feature release since the
v1.0 release, so let's dig into some of the updates.
</p>
</div>
<a
href="#"
class="mt-6 inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
View article
</a>
</div>
</div>
<!-- Grid column -->
<div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div
class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"
>
<div class="flex-1">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
Getting Started with Tailwind CSS Custom Forms
</h2>
<p class="mt-2 text-lg">
In this tutorial, I show you how to install the Tailwind CSS Custom
Forms plugin and get started using it.
</p>
</div>
<a
href="#"
class="mt-6 inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
View article
</a>
</div>
</div>
<!-- Grid column -->
<div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">
<!-- Column contents -->
<div
class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"
>
<div class="flex-1">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
11 Benefits of Tailwind CSS
</h2>
<p class="mt-2 text-lg">
I've been using Tailwind CSS professionally almost every day for
nearly two years. Here I share some of the benefits I've gained by
using Tailwind.
</p>
</div>
<a
href="#"
class="mt-6 inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
View article
</a>
</div>
</div>
</div>
</div>
如何使用尾风css和css网格创建类似引导带的响应列网格
如果您的站点不需要支持IE11，您可以使用这个简单得多的实现来实现与前面示例相同的结果。
只要加上grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3您的“容器”，您可以删除所有的“包装”，并插入您的卡直接在“容器”。
若要调整每列之间的间隙，请替换gap-4在容器上使用另一个gap-*尾风公司提供的公共设施。
电码
<!-- Container -->
<div
class="max-w-screen-xl mx-auto px-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
>
<!-- Grid column -->
<div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
<div class="flex-1">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
Tailwind v1.1.0
</h2>
<p class="mt-2 text-lg">
Tailwind v1.1.0 has been released with some cool new features and a
couple of bug fixes. This is the first feature release since the v1.0
release, so let's dig into some of the updates.
</p>
</div>
<a
href="#"
class="mt-6 inline-block px-6 py-3 text-center text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
View article
</a>
</div>
<!-- Grid column -->
<div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
<div class="flex-1">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
Getting Started with Tailwind CSS Custom Forms
</h2>
<p class="mt-2 text-lg">Shorter content for accentuation</p>
</div>
<a
href="#"
class="mt-6 inline-block px-6 py-3 text-center text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
View article
</a>
</div>
<!-- Grid column -->
<div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
<div class="flex-1">
<h2 class="text-gray-900 text-2xl font-bold leading-snug">
11 Benefits of Tailwind CSS
</h2>
<p class="mt-2 text-lg">
I've been using Tailwind CSS professionally almost every day for nearly
two years. Here I share some of the benefits I've gained by using
Tailwind.
</p>
</div>
<a
href="#"
class="mt-6 inline-block px-6 py-3 text-center text-white font-semibold bg-blue-700 rounded-md shadow-sm"
>
View article
</a>
</div>
</div>
