tailwindcss的样式

Tailwind CSS 提供了大量的工具类，用于快速构建 UI。这些工具类覆盖了多种常见的样式需求，包括布局、间距、颜色、字体、边框、阴影、尺寸、响应式设计等。下面是一些常见的工具类类别及其含义和使用方法：

布局类：

• • container：创建一个最大宽度的容器，用于页面布局。
  • mx-auto：使元素水平居中。（给盒子设置宽高，不然没用）

间距类（Margin 和 Padding）：

• • m-4：为元素添加 1rem 的外边距。
  • p-2：为元素添加 0.5rem 的内边距。

宽度和高度：

• • w-full：宽度为 100%。
  • h-screen：高度为屏幕高度。
  • w-{size}：设置元素的宽度。
  • h-{size}：设置元素的高度。
  • 示例：

<!-- 设置宽度为 100% -->
<div class="w-full">Full width div</div>

<!-- 设置宽度为 50% -->
<div class="w-1/2">Half width div</div>

<!-- 设置宽度为 200px -->
<div class="w-20">200px width div</div>

<!-- 设置高度为 100px -->
<div class="h-20">100px height div</div>

<!-- 设置高度为视口高度的一半 -->
<div class="h-1/2">Half viewport height div</div>

<!-- 设置最大宽度为 700px -->
<div class="w-max">Max width div</div>

自定义尺寸

还可以在 Tailwind CSS 的配置文件（tailwind.config.js）中自定义尺寸关键词，以适应你的设计需求。

module.exports = {
  theme: {
    extend: {
      width: {
        'custom-size': '50rem',
      },
      height: {
        'custom-height': '30vh',
      },
    },
  },
};

然后在HTML中使用这些自定义尺寸：

<div class="w-custom-size">Custom width div</div>
<div class="h-custom-height">Custom height div</div>

字体大小：

• • xs：小尺寸字体
  • sm：较小尺寸字体
  • base：基础尺寸字体（默认字体大小）
  • lg：较大尺寸字体
  • xl：大尺寸字体
  • 2xl：非常大尺寸字体
  • 3xl：极大的尺寸字体
  • 4xl：最大尺寸字体
  • text-xl：字体大小为大号。
  • 示例：

<!-- 设置字体大小为小尺寸 -->
<p class="text-xs">Extra small text</p>

<!-- 设置字体大小为较大尺寸 -->
<p class="text-lg">Large text</p>

<!-- 设置字体大小为极大尺寸 -->
<h1 class="text-3xl">Heading</h1>

<!-- 你还可以结合其他文本样式 -->
<p class="text-xl font-bold">Bold large text</p>

自定义字体大小：

可以在 tailwind.config.js 文件中通过 theme.extend 对象进行设置

1. module.exports = {
     theme: {
       extend: {
         fontSize: {
           'custom-size': '1.25rem', // 20px
           'custom-size-two': '2rem', // 32px
         }
       }
     }
   }

然后在HTML中使用

<p class="text-custom-size">Custom size text</p>
<h1 class="text-custom-size-two">Custom size heading</h1>

响应式字体大小

Tailwind CSS 也支持响应式字体大小。你可以通过在类名前添加断点关键字来设置不同屏

<p class="text-sm md:text-lg lg:text-xl">Responsive text</p>

在这个例子中，文本的字体大小在小屏幕上是 text-sm，在中等屏幕上是 text-lg，在大屏幕上是 text-xl。

颜色：

• • text-red-500：文本颜色为红色调的 500。数字越大颜色越深

边框：

• • border：添加默认边框宽度的边框。
  • border-gray-300：边框颜色为灰色调的 300。

边框方向

• • border-{side}：为特定方向（如 top、right、bottom、left）添加边框。

边框宽度

• • border-0：没有边框。
  • border-2：较细边框。
  • border-4：默认边框宽度。
  • border-8：较粗边框。

边框样式

• • border-solid：实线边框（默认）。
  • border-dashed：虚线边框。
  • border-dotted：点状边框。
  • border-double：双线边框。

边框半径

• • rounded：默认圆角。
  • rounded-lg：较大圆角。
  • rounded-xl：更大圆角。
  • rounded-tr：仅顶部右侧圆角。
  • rounded-bl：仅底部左侧圆角。

自定义边框

• • 如果你想要自定义边框的宽度、样式或颜色，可以在 tailwind.config.js 文件中通过 theme.extend 对象进行设置：

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        'custom': '2px',
      },
      borderStyle: {
        'custom': 'dotted',
      },
      colors: {
        'custom-border-color': '#f00',
      }
    }
  }
}

然后在你的 HTML 中使用这些自定义边框：

<div class="border border-custom border-custom-border-color p-2">自定义边框</div>

响应式边框

• • Tailwind CSS 还支持响应式边框。你可以通过在类名前添加断点关键字来设置不同屏幕大小下的边框：

<div class="border md:border-dashed lg:border-0 p-2">响应式边框</div>

在这个例子中，该元素在小屏幕上有边框，在中等屏幕上是虚线边框，在大屏幕上没有边框。

阴影：

• • 在 Tailwind CSS 中，阴影可以通过 shadow-{size} 样式类来添加到元素上。这些类会生成一个 box-shadow 属性，其中 {size} 是一个指定阴影大小的关键字。
  • shadow：添加阴影效果。

预设阴影大小：

• • shadow-xs：极小阴影。
  • shadow-sm：小阴影。
  • shadow：默认阴影。
  • shadow-md：中等阴影。
  • shadow-lg：大阴影。
  • shadow-xl：特大阴影。
  • shadow-2xl：超特大阴影。
  • shadow-inner：内部阴影。

示例：

<div class="p-4 shadow-md">这个 div 有一个中等大小的阴影。</div>

自定义阴影：

• • 如果你想要自定义阴影的大小或其他属性，可以在 tailwind.config.js 文件中通过 theme.extend 对象进行设置：

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 2px 4px rgba(0, 0, 0, 0.1)',
        'custom-lg': '0 10px 15px rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

• • 然后在你的 HTML 中使用这些自定义阴影：

响应式阴影：

• • Tailwind CSS 还支持响应式阴影。你可以通过在类名前添加断点关键字来设置不同屏幕大小下的阴影：

<div class="shadow-md md:shadow-lg">响应式阴影的 div</div>

背景：

• • bg-gray-200：背景颜色为灰色调的 200。

文本对齐：

• • text-center：文本水平居中。

列表：

• • list-decimal：将列表项标记为数字。

响应式设计：

• • 在 Tailwind CSS 中，响应式设计是通过断点（breakpoints）来实现的。默认情况下，Tailwind 提供了几个预设的断点，你可以根据这些断点来设置不同屏幕大小下的样式。以下是 Tailwind 默认的断点：
  • sm：小屏幕，最小宽度为 640px。
  • md：中等屏幕，最小宽度为 768px。
  • lg：大屏幕，最小宽度为 1024px。
  • xl：特大屏幕，最小宽度为 1280px。
  • 2xl：超特大屏幕，最小宽度为 1536px。
  • 你可以通过在类名前添加断点关键字来实现响应式样式。例如，要设置元素在小屏幕上有边框，在中等屏幕上是虚线边框，在大屏幕上没有边框，你可以这样写：

<div class="border border-dashed md:border-0 p-2">
  响应式边框的 div
</div>

在这个例子中：

• • border：在小屏幕（sm）上应用默认边框。
  • border-dashed：在中等屏幕（md）上将边框样式设置为虚线。
  • md:border-0：在大屏幕（lg）上移除边框。

自定义断点：

如果你需要自定义断点，可以在 tailwind.config.js 文件中通过 screens 对象进行设置：

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',  // 自定义小屏幕断点
      'laptop': '1024px', // 自定义中等屏幕断点
      // 你可以根据需要添加更多的断点
    }
  }
}

然后，你可以使用这些自定义断点来设置响应式样式：

<div class="border border-dashed laptop:border-0 p-2">
  使用自定义断点的响应式边框 div
</div>

在这个例子中，laptop 是我们自定义的中等屏幕断点。

交互状态：

• • hover:、focus:、active:、group-hover:：用于添加悬停、焦点、激活和组悬停状态的样式。

自定义组件：

• • btn、card：用于创建自定义的按钮和卡片组件。
  • 在 Tailwind CSS 中，自定义组件可以让你扩展框架的功能，创建自己的实用类。这在你需要一些 Tailwind 默认没有包含的特定样式时非常有用。以下是如何创建自定义组件的步骤：

自定义组件：

• • 在 tailwind.config.js 文件中，你可以使用 theme 和 extend 选项来定义自定义组件。例如，如果你想创建一个自定义的按钮样式，你可以这样做：

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: '"Open Sans", sans-serif',
      },
      // 自定义颜色
      colors: {
        'custom-color': '#eb4d4b',
      },
      // 自定义边框
      borderWidths: {
        'custom': '4px',
      },
      // 自定义按钮样式
      backgroundColor: {
        'custom': '#34d399',
      },
      textColor: {
        'custom': '#f9fafb',
      },
      // 自定义边框半径
      borderRadius: {
        'custom': '0.5rem',
      },
    }
  },
  variants: {
    // 如果需要，可以在这里添加组件的变体
  },
  plugins: [
    // 如果需要，可以在这里添加插件
  ],
}

使用自定义组件

• • 一旦你定义了自定义组件，你就可以在项目中使用它们了。例如，使用上面定义的自定义按钮样式：

<button class="px-4 py-2 font-sans text-sm text-custom rounded-custom border border-custom custom-color bg-custom custom-color">
  自定义按钮
</button>

伪类：

• • before:、after:：用于在元素前后添加伪元素。

组合工具类：

• • flex items-center justify-center：创建一个弹性盒子，并使子元素水平和垂直居中。
  • justify-start 使元素在最左边，justify-end 使元素在最右边