1. 什么是 Tailwind CSS？

Tailwind CSS 是一个功能类优先的 CSS 框架。与传统的 CSS 框架不同，Tailwind 提供了大量的实用类，使得我们可以直接在 HTML 中编写样式，无需编写自定义的 CSS 代码。

2. 基本概念

Tailwind CSS 主要由以下几个部分组成：

• Utility Classes：小而原子的类，用于设置特定的 CSS 属性。

• Responsive Design：使用断点（如 sm, md, lg, xl）来设置不同屏幕大小下的样式。

• Configuration：通过 tailwind.config.js 文件定制 Tailwind 的默认配置。

3. 常用类

颜色类

Tailwind 提供了丰富的颜色类来设置文本颜色、背景颜色、边框颜色等。

<!-- 文本颜色 -->
<p class="text-blue-500">这是蓝色文本。</p>

<!-- 背景颜色 -->
<div class="bg-red-500">这是红色背景。</div>

<!-- 边框颜色 -->
<div class="border border-green-500">这是绿色边框。</div>

间距类

用于设置元素的内边距和外边距。

<!-- 内边距 -->
<div class="p-4">所有方向的内边距为 1rem (16px)。</div>
<div class="px-4">水平内边距为 1rem (16px)。</div>
<div class="py-4">垂直内边距为 1rem (16px)。</div>

<!-- 外边距 -->
<div class="m-4">所有方向的外边距为 1rem (16px)。</div>
<div class="mx-4">水平外边距为 1rem (16px)。</div>
<div class="my-4">垂直外边距为 1rem (16px)。</div>

布局类

用于设置元素的布局属性，如宽度、高度、显示类型等。

<!-- 宽度和高度 -->
<div class="w-1/2">宽度为 50%。</div>
<div class="h-64">高度为 16rem (256px)。</div>

<!-- 显示类型 -->
<div class="block">显示为块级元素。</div>
<div class="inline-block">显示为行内块级元素。</div>
<div class="flex">显示为弹性盒子。</div>

<!-- Flex 布局 -->
<div class="flex flex-col">Flex 列布局。</div>
<div class="flex flex-row">Flex 行布局。</div>
<div class="flex justify-center">水平居中。</div>
<div class="flex items-center">垂直居中。</div>

排版类

用于设置文本的排版属性，如字体大小、行高、文本对齐等。

<!-- 字体大小 -->
<p class="text-xl">额外大的文本。</p>
<p class="text-2xl">2xl 大小的文本。</p>

<!-- 行高 -->
<p class="leading-normal">正常行高。</p>
<p class="leading-loose">宽松行高。</p>

<!-- 文本对齐 -->
<p class="text-left">左对齐文本。</p>
<p class="text-center">居中文本。</p>
<p class="text-right">右对齐文本。</p>

4. 响应式设计

Tailwind 使用断点类来设置不同屏幕大小下的样式。常用的断点有 sm (640px), md (768px), lg (1024px), xl (1280px)。

<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  响应式文本大小。
</div>
<div class="p-4 sm:p-8 md:p-12 lg:p-16 xl:p-20">
  响应式内边距。
</div>

案例

下面是一个简单的例子，展示如何使用 Tailwind CSS 创建一个响应式的卡片组件。

<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="image.jpg" alt="A sample image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">案例研究</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">寻找新业务的客户</a>
      <p class="mt-2 text-gray-500">启动新业务需要很多努力。这里有五个可以用来找到你的第一批客户的想法。</p>
    </div>
  </div>
</div>

效果图