使用 Tailwind CSS 的实用页面布局
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
既然你来到这里，想必已经对Tailwind CSS这款强大的CSS工具有所了解。使用 Tailwind 的默认基类，你可以快速创建出非常漂亮的页面布局。
我用 Bootstrap 做过很多布局，现在想深入了解 Tailwind，所以觉得一些实践操作会很有帮助。这些响应式布局示例都使用了 Tailwind 的Flexbox 类。
带侧边栏的双栏布局
这是一个使用 Tailwind 构建的超基础双栏页面布局。左侧是侧边栏，右侧是可滚动的主内容区域。页面底部还有一个固定的页脚，无论内容高度如何变化，它始终位于页面底部。由于我想在侧边栏中放置导航菜单，所以我将侧边栏设置为固定，这样当页面垂直滚动时，它始终显示在左侧。整个布局使用 `<div>` 标签包含并居中。container mx-auto
<div class="container mx-auto">
<div class="flex flex-row flex-wrap py-4">
<aside class="w-full sm:w-1/3 md:w-1/4 px-2">
<div class="sticky top-0 p-4 w-full">
<!-- navigation -->
<ul class="flex flex-col overflow-hidden">
...
</ul>
</div>
</aside>
<main role="main" class="w-full sm:w-2/3 md:w-3/4 pt-1 px-2">
<!-- content area -->
</main>
</div>
</div>
<footer class="mt-auto">
...
</footer>
圣杯布局
这或许是互联网泡沫时代网页设计师最著名的布局，这里展示的是用 Tailwind 实现的经典三栏布局。这种布局具有响应式设计，可以在较小的移动设备屏幕上垂直堆叠显示。这种固定/流式/固定布局非常适合内容丰富的页面！
<div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
<!-- fixed-width -->
<div class="w-fixed w-full flex-shrink flex-grow-0 px-4">
<div class="sticky top-0 p-4 w-full h-full">
<!-- nav goes here -->
</div>
</div>
<main role="main" class="w-full flex-grow pt-1 px-3">
<!-- fluid-width: main content goes here -->
</main>
<div class="w-fixed w-full flex-shrink flex-grow-0 px-2">
<!-- fixed-width -->
<div class="flex sm:flex-col px-2">
<!-- sidebar goes here -->
</div>
</div>
</div>
<footer class="bg-black mt-auto">
...
</footer>
这种布局还需要一些额外的 CSS 代码来固定侧边栏的宽度……
@media (min-width: 640px) {
.w-fixed {
flex: 0 1 230px;
min-width: 230px;
}
}
固定宽度仅在 Tailwind 的较小断点以上应用，640px以便在移动设备上实现垂直堆叠布局。
全屏背景图片
这是一个非常流行的全屏背景图片布局，非常适合用于落地页。您可以轻松地将中间的叠加内容更改为注册或行动号召卡片。
此布局具有响应式设计，因此居中内容区域在移动设备上为全宽，在小型设备上为 50% 宽度，在大型设备上为 33% 宽度。
<div class="w-full p-4">
<main role="main" class="w-full flex flex-col h-screen content-center justify-center">
<div class="w-full sm:w-1/2 lg:w-1/3 bg-gray-50 rounded-xl m-auto">
<div class="bg-white rounded shadow px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<!-- centered card -->
</div>
</div>
</main>
</div>
带侧边栏的全屏应用布局
这种单页“应用”式布局包含侧边栏、主内容区和页脚。这种全高布局的高度始终不超过视口高度。内容区可根据需要独立滚动。本示例使用了 Tailwind CSS 实用框架。Tailwind 的默认类中包含 Flexbox 类，这使得这种布局的实现非常简单！
此外，此布局具有响应式设计。当屏幕宽度减小到 640 像素（Tailwind 的最小断点）时，布局会垂直堆叠。侧边栏方向由垂直变为水平（flex-col sm:flex-row），主内容区域则填充页脚上方剩余的高度。
<div class="w-full flex flex-col sm:flex-row flex-grow overflow-hidden">
<div class="sm:w-1/3 md:1/4 w-full flex-shrink flex-grow-0 p-4">
<div class="sticky top-0 p-4 w-full">
<ul class="flex sm:flex-col overflow-hidden content-center justify-between">
<!-- nav goes here -->
</ul>
</div>
</div>
<main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
<!-- content area -->
</main>
</div>
<footer class="mt-auto">
...
</footer>
重要提示！如果您要使用 Tailwind CSS，请记住最好将其集成到 JS 构建过程中，这样您就可以选择所需的组件。这些示例中引用的 Tailwind CSS 文件来自 CDN，大小高达 2.7MB 😲！
感谢阅读，希望这些示例能帮助您快速启动下一个 Tailwind 项目！在 Codeply 上体验 Tailwind
文章来源：https://dev.to/codeply/helpful-page-layouts-using-tailwind-css-1a3k