Tailwind CSS是一个基于实用的CSS框架，使你有可能在不写任何一行CSS的情况下创建Web页面。它充满了实用类，使你可以直接从你的标记中建立任何设计。
目前访问你的网页的互联网消费者会有不同的屏幕和窗口尺寸，从大型台式机到小型手机或平板电脑。作为一个开发者，我们需要使网站在每一种情况下都看起来不错。
从历史上看，这一直是CSS的一个挑战。创建响应式组件需要添加媒体查询和布局方法（如Flexbox和Grid），检查每个部分以确保它看起来不错，然后相应地调整代码。
好消息是，Tailwind可以减轻你对CSS的挣扎，甚至帮助你比以往更快地建立用户界面，只需在你的HTML代码中添加类名。在这篇文章中，我将解释如何用Tailwind建立一个响应式导航条，向你展示在不碰触任何一行CSS的情况下，创建功能性、响应式组件是多么容易。
Tailwind CSS中的断点
我们可以用Tailwind相当快地创建响应式设计，但是要瞄准一个特定的断点，我们需要采用一个现有的Tailwind实用类，并在它前面加上断点的名称，然后再加上一个列。是的，就是这样!
比如说。
<h1 class="text-black md:text-gray-500">Medium breakpoint</h1>
在这里，h1 ，最小尺寸及以上将是黑色，但当我们遇到中等断点（640px及以上）时，其颜色将变为灰色。
你可以看到下面的断点和它们对应的屏幕尺寸。这些尺寸是基于移动优先的方法，因为它们是在CSS中使用min-width 。
| 断点前缀 | 最小宽度 | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2倍大 | 1536px | @media (min-width: 1536px) { ... } |
开始使用Codepen
在本教程中，我们将创建一个响应式的导航条。你可以使用Codepen进行学习。
要与Tailwind一起工作，进入设置→CSS→添加外部样式表/笔，输入 tailwindcss，然后保存并关闭。我们将只使用HTML，并且我们将使用Javascript来切换该按钮。
你可以在我的Codepen上叉开这个演示。
让我们开始吧。进入HTML标签，然后像这样添加一个body,header 和nav 标签。
<body>
<header>
<nav>
<!-- Code goes here -->
</nav>
</header>
</body>
我们将在我们的nav 标签内创建导航条。我添加了一些启动代码，使它看起来更好。
<body
class="
antialiased
bg-gradient-to-r
from-pink-300
via-purple-300
to-indigo-400
"
>
<header>
<nav
class="
flex flex-wrap
items-center
justify-between
w-full
py-4
md:py-0
px-4
text-lg text-gray-700
bg-white
"
>
<!-- Code goes here -->
</nav>
</header>
</body>
对于body 元素，我们通过bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 有一个梯度背景，通过antialiased 有一个字体平滑效果。
nav 元素通过flex 设置了其显示属性。这样就可以沿着导航的X轴放置灵活的项目，并通过justify-between ，在每个项目之间给予它们等量的空间。然后，为了在必要时包裹子元素，我们有一个flex-wrap 实用类。
我们通过w-full 给予100%的宽度，并通过py-4 给予1rem的顶部和底部填充（垂直方向）。1rem的顶部和底部填充只能在最小的屏幕尺寸到某一点上发挥作用。我们需要在中等尺寸的断点之后对上下的填充进行调整：768px及以上。我们用md:py-0 类删除padding。
对于右边和左边的padding，我们用px-4 ，有1rem的水平padding。
对于文本大小，我们添加了text-lg ，这将使字体大小为1.125rem，行高为1.75rem。
最后，我们用text-gray-700 ，添加了一个深灰色的文本颜色。
放置标志
在nav 标签内，我们将嵌套一个带有链接元素的div ，以及一个用于放置我们的标志的svg 标签。你可以在这里放置任何你想要的标志。
<div>
<a href="#">
<svg
xmlns="<http://www.w3.org/2000/svg>"
width="150"
height="32.125"
viewBox="0 0 150 32.125"
>
<g
id="Group_330"
data-name="Group 330"
transform="translate(-251.1 457.654)"
>
<g
id="Group_329"
data-name="Group 329"
transform="translate(251.1 -457.654)"
>
<path
id="Path_121"
data-name="Path 121"
d="M257.887-454.034a12.084,12.084,0,0,1,3.505-3.62,11.811,11.811,0,0,1,3.46,3.549,17.887,17.887,0,0,1,3.362,11.216c.73.589,1.482,1.154,2.2,1.754a3.969,3.969,0,0,1,1.266,3.659c-.347,1.672-.679,3.347-1.045,5.015a1.393,1.393,0,0,1-2.12.7c-1.178-.946-2.326-1.925-3.5-2.872a5.373,5.373,0,0,1-3.316,1.44,5.365,5.365,0,0,1-3.882-1.4c-.844.621-1.628,1.367-2.453,2.033a6.315,6.315,0,0,1-1.2.924,1.393,1.393,0,0,1-1.839-.9c-.377-1.631-.771-3.257-1.136-4.89a3.96,3.96,0,0,1,1.335-3.81c.641-.517,1.29-1.025,1.943-1.527.182-.092.091-.3.1-.46a17.915,17.915,0,0,1,3.326-10.806m1.156,5.049a2.748,2.748,0,0,0,.24,3.641,3.024,3.024,0,0,0,4.134.085,2.75,2.75,0,0,0,.729-3.021,2.924,2.924,0,0,0-2.454-1.825,2.984,2.984,0,0,0-2.65,1.119"
transform="translate(-251.1 457.654)"
fill="#764abc"
/>
<path
id="Path_122"
data-name="Path 122"
d="M260.3-419.746a.693.693,0,0,1,1.027-.557,6.628,6.628,0,0,0,5.77,0,.7.7,0,0,1,1.029.516q.008,1.532,0,3.064a.691.691,0,0,1-1.079.5c-.306-.26-.582-.552-.876-.825-.467.874-.905,1.76-1.375,2.631a.7.7,0,0,1-1.161.007c-.472-.873-.908-1.764-1.384-2.637-.29.275-.566.566-.873.825a.692.692,0,0,1-1.078-.506c-.008-1.007,0-2.015,0-3.022"
transform="translate(-253.92 446.225)"
fill="#764abc"
/>
<path
id="Path_123"
data-name="Path 123"
d="M265.28-441.9a1.4,1.4,0,0,0,1.432-1.376,1.4,1.4,0,0,0-1.432-1.377,1.4,1.4,0,0,0-1.431,1.377,1.4,1.4,0,0,0,1.431,1.376"
transform="translate(-255.01 453.668)"
fill="#764abc"
/>
<path
id="Path_124"
data-name="Path 124"
d="M288.561-448.233H290.8v15.127h9.357v2.036h-11.6Zm13.563,11.211a5.99,5.99,0,0,1,.546-2.557,6.4,6.4,0,0,1,1.479-2.037,6.769,6.769,0,0,1,4.751-1.818,6.592,6.592,0,0,1,4.666,1.733,5.891,5.891,0,0,1,1.891,4.521,5.9,5.9,0,0,1-2.024,4.544,6.767,6.767,0,0,1-4.751,1.807A6.582,6.582,0,0,1,304-432.549a5.832,5.832,0,0,1-1.879-4.472m2.3-.133a4.517,4.517,0,0,0,.339,1.757A4.36,4.36,0,0,0,305.7-434a4.381,4.381,0,0,0,3.2,1.235,4.1,4.1,0,0,0,3.03-1.235,4.107,4.107,0,0,0,1.224-3.043,4.325,4.325,0,0,0-1.273-3.188,4.335,4.335,0,0,0-3.2-1.26,4.074,4.074,0,0,0-3.03,1.249,4.213,4.213,0,0,0-1.224,3.091m16.677,1.078a2.077,2.077,0,0,0-.582,1.3.918.918,0,0,0,.413.849,3.845,3.845,0,0,0,1.1.413q.692.157,1.564.266t1.794.218q.909.121,1.782.315a6.957,6.957,0,0,1,1.575.509,2.345,2.345,0,0,1,1.516,2.158,4.306,4.306,0,0,1-1.9,3.563,6.821,6.821,0,0,1-4.157,1.321,7.745,7.745,0,0,1-3.806-.873,3.147,3.147,0,0,1-1.831-2.861,3.762,3.762,0,0,1,.9-2.315,5.143,5.143,0,0,1,.558-.606,2.3,2.3,0,0,1-1.758-2.17,4.315,4.315,0,0,1,1.6-3.321,3.385,3.385,0,0,1-.557-1.878,3.7,3.7,0,0,1,.424-1.806,4.118,4.118,0,0,1,1.152-1.321,5.62,5.62,0,0,1,3.5-1.115,5.436,5.436,0,0,1,3.466,1.115,4.661,4.661,0,0,1,2.5-1.043,6.619,6.619,0,0,1,.945-.072l-.1,1.879a6.307,6.307,0,0,0-2.218.569,3.709,3.709,0,0,1,.412,1.721,3.4,3.4,0,0,1-.436,1.7,4.025,4.025,0,0,1-1.14,1.31,5.554,5.554,0,0,1-3.405,1.091,5.887,5.887,0,0,1-3.309-.91m.582-4.253a2.143,2.143,0,0,0-.231,1.017,2.221,2.221,0,0,0,.231,1.031,2.275,2.275,0,0,0,.654.739,3.493,3.493,0,0,0,2.085.582,2.688,2.688,0,0,0,2.594-1.285,2.074,2.074,0,0,0,.231-1.006,2.135,2.135,0,0,0-.243-1.03,2.124,2.124,0,0,0-.642-.751,3.446,3.446,0,0,0-2.085-.594,2.682,2.682,0,0,0-2.594,1.3m.024,8.944a3.151,3.151,0,0,0-.837,2.194,1.783,1.783,0,0,0,1.2,1.611,4.619,4.619,0,0,0,1.975.473,7.943,7.943,0,0,0,1.6-.134,3.885,3.885,0,0,0,1.139-.4,1.942,1.942,0,0,0,1.176-1.769q0-1.079-2.085-1.443-.9-.157-2.194-.279t-1.975-.254m27.052-11.563a5.27,5.27,0,0,1-3.515,5.273l3.261,6.606H345.9l-2.945-5.976a16.725,16.725,0,0,1-2.509.182h-4.461v5.793h-2.241v-17.163h7.042a12.082,12.082,0,0,1,5.684,1.042,4.451,4.451,0,0,1,2.291,4.242m-8.012,4.048a8.338,8.338,0,0,0,4.024-.752,3.344,3.344,0,0,0,1.612-3.151q0-2.885-3.733-3.273a19.936,19.936,0,0,0-2.218-.121h-4.449v7.3Zm10.7,1.879a5.99,5.99,0,0,1,.546-2.557,6.4,6.4,0,0,1,1.479-2.037,6.77,6.77,0,0,1,4.751-1.818A6.591,6.591,0,0,1,362.9-441.7a5.894,5.894,0,0,1,1.891,4.521,5.9,5.9,0,0,1-2.024,4.544,6.767,6.767,0,0,1-4.751,1.807,6.582,6.582,0,0,1-4.678-1.721,5.831,5.831,0,0,1-1.879-4.472m2.3-.133a4.517,4.517,0,0,0,.34,1.757,4.37,4.37,0,0,0,.933,1.394,4.383,4.383,0,0,0,3.2,1.235,4.1,4.1,0,0,0,3.03-1.235,4.107,4.107,0,0,0,1.224-3.043,4.325,4.325,0,0,0-1.273-3.188,4.336,4.336,0,0,0-3.2-1.26,4.073,4.073,0,0,0-3.03,1.249,4.214,4.214,0,0,0-1.224,3.091m23.344,3.491.424,1.709a7.408,7.408,0,0,1-4.46,1.127,5.729,5.729,0,0,1-4.412-1.721,6.409,6.409,0,0,1-1.563-4.557,6.234,6.234,0,0,1,1.757-4.509,5.974,5.974,0,0,1,4.448-1.818,6.431,6.431,0,0,1,3.9,1.1l-.8,1.805a5.411,5.411,0,0,0-3.321-1.017,3.3,3.3,0,0,0-2.7,1.284,4.622,4.622,0,0,0-.982,3.006,4.82,4.82,0,0,0,1.03,3.175,3.638,3.638,0,0,0,2.969,1.309,8.3,8.3,0,0,0,3.708-.9m3.066-16.326h2.3v12.133l5.442-5.333h2.69l-5.7,5.575,3.394,3.66a3.824,3.824,0,0,0,2.569,1.249l-.352,1.636a3.724,3.724,0,0,1-2.981-.678,6.8,6.8,0,0,1-.691-.667l-4.375-4.728v6.073h-2.3Zm22.108,7.866a4.441,4.441,0,0,1,1.006,1.624,5.626,5.626,0,0,1,.376,2.049,15.688,15.688,0,0,1-.243,2.533h-8.436a4.022,4.022,0,0,0,1.188,2.315,3.741,3.741,0,0,0,2.606.836,10.169,10.169,0,0,0,4.133-.824l.388,1.733a8.96,8.96,0,0,1-3.564.958,15.618,15.618,0,0,1-1.672.073,6.288,6.288,0,0,1-2.158-.412,4.692,4.692,0,0,1-1.866-1.212,6.631,6.631,0,0,1-1.466-4.654,6.234,6.234,0,0,1,1.757-4.509,5.974,5.974,0,0,1,4.448-1.818,4.733,4.733,0,0,1,3.5,1.309m-.812,4.425.049-.655a2.885,2.885,0,0,0-1.66-2.945,3.332,3.332,0,0,0-1.334-.242,3.368,3.368,0,0,0-1.43.3,3.514,3.514,0,0,0-1.114.825,4.376,4.376,0,0,0-1.091,2.715Zm5.358-3.624h-1.3v-1.5l2.982-2.242h.618v1.879h3.466v1.866h-3.466v4.9a5.311,5.311,0,0,0,.521,2.812,2.747,2.747,0,0,0,2.036.91l-.351,1.636q-3.636.46-4.3-2.873a10.568,10.568,0,0,1-.206-2.144Z"
transform="translate(-262.589 455.303)"
fill="#764abc"
/>
</g>
</g>
</svg>
</a>
</div>
添加一个用于移动的汉堡包图标
在标志之后，让我们为汉堡包图标添加另一个svg（你可以从HeroIcons获得该svg）。这将在移动屏幕上切换菜单。
让我们分析一下它的类别。
<svg class="h-6 w-6 cursor-pointer md:hidden block"> </svg>
这个图标将默认出现，所以即使是最小的屏幕尺寸也能看到它。但是当我们碰到768px的中等断点时，这个图标将消失，并显示桌面版的导航。发生这种情况是因为我们添加了md:hidden block 类。
我们还用h-6 和w-6 将图标的高度和宽度增加到1.5rem。
最后，我们有cursor-pointer. 当我们将鼠标悬停在它上面时，我们会看到鼠标指针变成了一个指向性的手。
我们还有一个menu-button 的id ，我们将用它来做JavaScript的切换。
<!-- Hamburger Icon -->
<svg
xmlns="<http://www.w3.org/2000/svg>"
id="menu-button"
class="h-6 w-6 cursor-pointer md:hidden block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
创建导航项目
最后，我们将在nav 元素中添加我们的导航项。
<div class="hidden w-full md:flex md:items-center md:w-auto " id="menu">
<ul
class="
text-base text-gray-700
pt-4
md:flex
md:justify-between
md:pt-0"
>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#"
>Features</a
>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#"
>Pricing</a
>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#"
>Customers</a
>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#"
>Blog</a
>
</li>
<li>
<a
class="md:p-4 py-2 block hover:text-purple-400 text-purple-500"
href="#"
>Sign Up</a
>
</li>
</ul>
</div>
对于父元素div ，我们有一个id ，属性为menu 。同样，我们将使用这个ID，用JavaScript切换菜单项。
让我们分析一下它的Tailwind实用类。
<div class="hidden w-full md:flex md:items-center md:justify-between md:w-auto " id="menu"></div>
默认情况下，我们的菜单项将通过hidden 类隐藏起来，并有一个全宽的w-full 类。只有在用户拨动汉堡包图标后，我们才会显示菜单项。
然而，在648px的中断点之后，我们将通过md:flex ，将菜单项显示为flex ，然后用md:items-center ，将子项沿着div's y轴的中心对齐。它还将宽度设置为auto 与md:w-auto 。这将取消全宽的设置，浏览器将计算出元素的大小。
让我们转到ul 。
<ul class="text-base text-gray-700 pt-4 md:flex md:justify-between md:pt-0"></ul>
Text-base 将设置字体大小为1rem，行高为1.5rem。我们用text-gray-700 ，给ul's 子元素的文字颜色为深灰色，用pt-4 类为顶部添加1rem的填充。不要忘记，这些都是针对小屏幕的；Tailwind使用的是移动优先的方法。
对于中等断点及以后，我们将有一个flex ，以显示彼此相邻的柔性项目。沿着容器的X轴，用md:justify-between ，给子元素留出相等的空间，用 删除顶部的填充。pt-0.
现在让我们转向列表项。Li's 与链接标签嵌套；让我们检查它们的类别。
<li>
<a class="py-2 block md:p-4 hover:text-purple-400" href="#" >Features</a>
</li>
在这里，我们通过py-2 ，将顶部和底部的padding设置为0.5rem，并在移动屏幕上显示为block 。在中断点之后，我们通过md:p-4 ，将padding设置为1rem。还有一个通过hover:text-purple-400 的悬停效果，这将使列表项的颜色变成浅紫色。
用JavaScript切换菜单
现在我们已经完成了导航，让我们用JavaScript添加菜单切换的实现。
进入Codepen的JS标签，在那里我们将得到我们的菜单（或汉堡包）图标和容纳我们列表项的菜单。
通过点击事件监听器，当用户点击菜单时，我们就会切换菜单的隐藏类。
const button = document.querySelector('#menu-button'); // Hamburger Icon
const menu = document.querySelector('#menu'); // Menu
button.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
在页面中添加文本
在导航条之后，我们可以显示一些文本。我们有两个嵌套的divs与一个h1 标签。
<div class="px-4">
<div
class="
flex
justify-center
items-center
bg-white
mx-auto
max-w-2xl
rounded-lg
my-16
p-16
"
>
<h1 class="text-2xl font-medium">Responsive Navbar with TailwindCSS</h1>
</div>
</div>
第一个div ，有一个1rem的右边和左边的padding。当屏幕很小时，这将给我们一些空间。
第二个div 有一个flex 显示，并且在水平和垂直方向上都将h1 居中。它有一个白色的背景，左边和右边的边距通过mx-auto ，有一个auto 。
对于最大宽度，它可以通过max-width-2xl ，增长到42rem。我们也有一个0.5rem的边框半径，通过rounded-lg 。
my-16 将顶部和底部的边距设置为4rem，p-16 在所有边上设置了填充。
最后，h1 ，字体大小为1.5rem，行高为1.75rem，字体重量为500，通过font-medium 。
继续构建!
我希望这个教程能帮助你了解Tailwind CSS在创建响应式导航条时的能力。如果你想不使用Codepen而从头开始创建项目，你需要遵循一些安装指南，你可以在Tailwind CSS官方网站上找到。另外，如果你遇到了问题，你可以很容易地在他们的网站上搜索解决方案。
The postHow to build a responsive navbar in Tailwind CSSappeared first onLogRocket Blog.
