Tailwind CSS的基本用法

2024年7月8日[Tailwind CSS快速指南]

在上一篇文章中 Tailwind CSS框架入门，我们已经建立起我们的Tailwind CSS开发环境，我们还创建了一个Hero Image页面。好，现在让我详细的介绍它是如何工作的。同时，你也可以参考官网文档： https://tailwindcss.com/docs/。

这是我们创建Hero Image页面的代码：

 8
 9
10
11
12
13
14
15
16
17
18
19
20
<body class="bg-gray-50">
  <div class="container mx-auto">
    <section class="w-full mt-5 flex flex-col items-center">
      <img src="glider.png" class="w-96">
      <div class="text-center">
        <h1 class="p-5 text-3xl font-bold">Build Your Website</h1>
        <p class="text-gray-900">Easy to build your website with Hugo, a static site generator.</p>
        <a href="#" class="mt-5 px-3 py-1 border bg-orange-600 rounded-md font-semibold text-white">Get Started</a>
        <a href="#" class="mt-5 px-3 py-1 border border-gray-900 rounded-md ml-8 font-semibold text-gray-900">Demo</a>
      </div>
    </section >
  </div>
</body>

背景颜色

样式bg-gray-50 （第8行）用于设置body的背景颜色为灰色rgb(250 250 249)。其它可用的背景颜色样式有： bg-red-50, bg-red-100, bg-red-200,…, bg-red-900, bg-red-950等等。

居中部件

样式container （第9行）设置一个元素的最大宽度max-width为当前显示屏幕分界点的最小宽度min-width.

举个例子，当前屏幕宽度为1000px，预定义的分界点md和lg的屏幕宽度分别为768px和1024px，section的最大宽度将为768px，而不是当前的全屏宽度1000px。

样式mx-auto（第9行）设置了左右的边距为auto。container和mx-auo这两个样式的组合使得section居中显示。

边距（Margins）

还有如下样式可以用于边距的设置：

mx-4：设置横向边距为16px或1rem
my-6：设置纵向边距为24px或1.5rem
ml-5：设置左边距
mr-5：设置右边距
mt-3：设置上边距
mb-2：设置下边距

填充（Paddings）

和边距的设置相类似，我们也有各种Padding的设置样式，例如： px-3、py-2、pl-1、pr-3、pt-5和pb-2。

宽度和高度

样式w-full设置一个元素的宽度使其占据整个容器的宽度。

相似的用法还有：

w-12：设置宽度为48px或3rem
h-5：设置高度为20px或1.24rem
w-[100px]：设置宽度为一个定制的值100px
max-w-96：设置最大宽度max-width为384px或24rem
min-w-48：设置最小宽度min-width为192px或12rem

Flex元素

应用flex flex-col items-center这些样式（第10行）纵向排列各部件并横向居中显示。

下面我们使用flex样式创建一个横向导航条：

<nav class="flex items-center bg-teal-500">
  <a href="#" class="flex-none inline-block px-3 py-1 ml-1 text-white">首页</a>
  <a href="#" class="flex-none inline-block px-3 py-1 ml-1 text-white">关于</a>
  <a href="#" class="grow inline-block px-3 py-1 ml-1 text-white">项目</a>
  <a href="#" class="flex-none inline-block px-3 py-1 mr-3 text-white font-semibold">下载</a>
</nav>

默认情况下，flex元素是横向排列的。这不同于上述例子，这里的items-center使得元素纵向居中。样式flex-none使得元素不伸展也不缩小，而样式grow使元素尽可能扩张以占据所有剩余的空间，使得下载链接被推到导航条的最右端。

预览:

文本样式

text-center （第12行）：设置text-align为center
其它可用的样式: text-left、text-right和text-justify等。
text-3xl （第13行）：设置font-size为30px， line-height为36px
font-bold （第13行）：设置font-weight为700
其它可用的样式： font-thin、font-light、font-normal和font-semibold等。
text-gray-900（第14行）：设置color为灰色

边框

border：设置border-width为1px
border-0：移除边框
border-x-2：设置border-left-width和border-right-width为2px
border-y：设置border-top-width和border-bottom-width to 1px
border-t：设置border-top-width和1px
border-b：设置border-bottom-width为1px
rounded-md(第15行）：设置border-radius为6px
border-gray-900（第15行）：设置border-color为灰色