Tailwind CSS 工具类(Utility-First)

Tailwind CSS 的工具类(Utility-First)是一种以实用为先的设计方法,它允许开发者直接在 HTML 元素上应用预定义的样式类,而无需编写传统的 CSS 代码。

Tailwind CSS 的核心理念是 工具类优先(Utility-First),这一设计思想意味着,你可以通过组合单一功能的 CSS 类来实现一个完整的样式,而不是依赖于复杂的自定义样式。

Tailwind CSS 提供了大量的工具类,每个类都执行一个简单的样式任务,例如,text-center 用来将文本居中,bg-blue-500 用来设置背景颜色,p-4 用来设置内边距等。

常见的工具类:

类别工具类示例描述
排版(Typography)text-center, text-lg, font-bold控制文本的对齐、字体大小、粗细等。
背景(Background)bg-blue-500, bg-opacity-50设置元素的背景颜色、背景图和透明度。
间距(Spacing)p-4, m-2, mt-8控制元素的内外边距(padding 和 margin)。
布局(Layout)flex, grid, block设置元素的显示类型和布局方式。
尺寸(Sizing)w-32, h-48设置元素的宽度和高度。
边框(Borders)border, border-2, rounded设置元素的边框、边框宽度和圆角。
阴影(Shadows)shadow, shadow-lg控制元素的阴影效果。
透明度(Opacity)opacity-50, opacity-100设置元素的透明度。
响应式(Responsive)sm:text-lg, md:bg-blue-300控制不同屏幕尺寸下的样式变化。
状态(State)hover:bg-blue-700, focus:ring-4设置元素在不同交互状态(如 hover、focus、active)下的样式。

工具类的优势

  • 简洁和高效:每个工具类只负责一个小的样式操作,开发者可以根据需要组合不同的类,快速完成页面布局和样式。
  • 灵活性:通过类的组合,几乎可以实现任何样式,无需编写复杂的 CSS 代码。
  • 响应式支持:Tailwind 提供了内建的响应式类,可以非常方便地根据屏幕尺寸调整布局和样式。
  • 避免命名冲突:由于每个类的作用非常明确且独立,使用工具类的方式避免了传统 CSS 中命名冲突和样式覆盖的问题。

工具类的具体应用

1、文本相关工具类

  • text-center:将文本对齐方式设置为居中。
  • text-lg:设置文本大小为 lg(大号字体)。
  • font-bold:将文本的字体加粗。
  • text-red-500:设置文本颜色为红色(500 是红色的一个具体深浅值)。

实例

<p class="text-center text-lg font-bold text-red-500">Hello, Tailwind!</p>

2、背景相关工具类

  • bg-blue-500:设置元素的背景颜色为蓝色。
  • bg-opacity-50:设置背景的透明度为 50%。
  • bg-cover:将背景图像的大小调整为完全覆盖元素。

实例

<div class="bg-blue-500 bg-opacity-50 p-4">
  <h1 class="text-white">Welcome to Tailwind</h1>
</div>

3、间距相关工具类

  • p-4:设置元素的内边距(padding)为 1rem
  • m-8:设置元素的外边距(margin)为 2rem
  • mt-4:设置元素的上外边距为 1rem

实例

<div class="m-8 p-4 mt-4">
  <p>This box has padding and margin.</p>
</div>

4、布局相关工具类

  • flex:将元素的布局模式设置为 flexbox。
  • grid:将元素的布局模式设置为 CSS Grid。
  • items-center:将 flexbox 容器中的子元素垂直居中。
  • justify-between:在 flexbox 容器中,子元素之间的空间均等分布。

实例

<div class="flex items-center justify-between">
  <div class="bg-blue-500 text-white p-4">Item 1</div>
  <div class="bg-blue-500 text-white p-4">Item 2</div>
</div>

5、边框和圆角相关工具类

  • border:添加边框。
  • border-2:设置边框宽度为 2px
  • rounded-lg:设置元素的圆角为 0.5rem

实例

<div class="border border-2 rounded-lg p-4">
  <p>This box has a border and rounded corners.</p>
</div>

6、阴影相关工具类

  • shadow:为元素添加默认阴影。
  • shadow-lg:添加更大的阴影。
  • shadow-none:移除阴影。

实例

<div class="shadow-lg p-6">
  <p>This box has a large shadow.</p>
</div>

7、响应式工具类

Tailwind 提供了响应式工具类,可以在不同的屏幕尺寸下应用不同的样式。常见的屏幕尺寸包括 sm(小屏幕)、md(中等屏幕)、lg(大屏幕)、xl(超大屏幕)。

  • sm::仅在屏幕宽度大于或等于 640px 时生效。
  • md::仅在屏幕宽度大于或等于 768px 时生效。
  • lg::仅在屏幕宽度大于或等于 1024px 时生效。
  • xl::仅在屏幕宽度大于或等于 1280px 时生效。

实例

<div class="bg-blue-500 sm:bg-green-500 lg:bg-red-500 p-4">
  <p>This background color changes based on the screen size.</p>
</div>

8、状态工具类

Tailwind 支持交互状态的工具类,如 hover:, focus:, active: 等。

  • hover:bg-blue-700:在元素被鼠标悬停时,背景色变为蓝色。
  • focus:outline-none:当元素获取焦点时,去除默认的边框轮廓。
  • active:bg-red-500:在元素处于激活状态时,背景色变为红色。

实例

<button class="hover:bg-blue-700 focus:outline-none active:bg-red-500">
  Hover or Focus Me!
</button>

实例

使用传统方法,自定定义 CSS 样式:

实例

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    align-items: center;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

尝试一下 »

接下来我们看下使用 Tailwind,在 HTML 中直接使用预先存在的类来设置元素的样式,而无需编写 CSS:

实例

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">
  <div class="shrink-0">
    <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

尝试一下 »

以下是对代码中每个类名的解析:

外层容器:<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">

类名 作用
p-6 设置元素的内边距(padding)为 1.5rem(24px)。
max-w-sm 设置元素的最大宽度为 sm,对应约 24rem(384px)。
mx-auto 设置水平外边距为 auto,使元素水平居中。
bg-white 设置元素的背景颜色为白色。
rounded-xl 设置圆角为 xl,即 0.75rem(12px)。
shadow-lg 添加较大的阴影效果,使容器看起来有浮动感。
flex 将元素的布局模式设置为 flexbox,便于子元素按行排列。
items-center 将子元素在垂直方向上居中对齐。
gap-x-4 设置 flex 容器中子元素之间的水平间距为 1rem(16px)。

左侧容器:<div class="shrink-0">

类名 作用
shrink-0 禁止该元素缩小,确保其大小不受 flex 容器中其他元素的影响。

图片:<img class="size-12" src="/img/logo.svg" alt="ChitChat Logo">

类名 作用
size-12 这不是 Tailwind 的原生类。可能是自定义类,用来设置图片大小。

右侧内容容器:<div>

无类名,作为子元素包含文本内容。

标题文本:<div class="text-xl font-medium text-black">ChitChat</div>

类名 作用
text-xl 设置文本大小为 xl,即 1.25rem(20px)。
font-medium 设置字体粗细为 medium,即 500。
text-black 设置文本颜色为黑色。

描述文本:<p class="text-slate-500">You have a new message!</p>

类名 作用
text-slate-500 设置文本颜色为 slate-500,即石板灰色(中等深浅值)。