如何使用 TailwindCSS 在 div 中创建全高元素 [重复]
Posted
技术标签:
【中文标题】如何使用 TailwindCSS 在 div 中创建全高元素 [重复]【英文标题】：How to create full height elements in a div using TailwindCSS [duplicate] 【发布时间】：2020-02-03 10:42:26 【问题描述】：我遇到了麻烦，因为我是 CSS 和 flexbox 的新手。
我正在尝试使用令人惊叹的 TailwindCSS 创建一个导航栏，但我需要垂直居中的链接和导航栏中的 background-color 全高。
我做错了什么？
https://codesandbox.io/s/tailwindcss-navbar-sgpie
我为父母尝试了items-center，为物品尝试了self-center，但问题仍然存在。
【问题讨论】：
【参考方案1】：请尝试在<nav> 中使用您的课程bg-green-400 而不是bg-white 并从<a> 中删除bg-green-400 以获得更多理解，请参阅下面的sn-p。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="./index.css" rel="stylesheet" />
</head>
<body class="bg-blue-600">
<nav class="bg-green-400">
<div class="container flex">
<a class="bg-red-400 text-3xl p-4">Project name</a>
<div class="flex items-center">
<a class="p-2">Link</a>
<a class="p-2">Link</a>
<a class="p-2">Link</a>
<a class="p-2">Link</a>
</div>
</div>
</nav>
</body>
</html>谢谢...
【讨论】：
哦，亲爱的。感谢您的回答，但我使用白色是因为我想要白色！以上是关于如何使用 TailwindCSS 在 div 中创建全高元素 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在tailwindcss中使用2个按钮取消和保存右对齐的页脚