🛠️ Tailwind CSS 指令与函数（Directives & Functions）

在 Tailwind CSS 中，指令（Directives）和函数（Functions）是用来扩展和自定义样式的重要工具。通过使用这些指令和函数，你可以更加灵活和高效地定制项目的样式。下面是 Tailwind 中常用的指令和函数。

🎯 1. Tailwind CSS 指令（Directives）

1.1 @apply

@apply 是 Tailwind 中最常用的指令之一，它允许你将多个 Tailwind 工具类组合到一个自定义的 CSS 类中。通过 @apply，你可以把工具类封装成一个简洁的类，然后在 HTML 中复用这个类。

✅ 示例：

/* 在 CSS 文件中使用 `@apply` */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
}

✅ 在 HTML 中使用：

<button class="btn">
  点击我
</button>

@apply 可以组合多个 Tailwind 工具类，简化 HTML 中的样式书写。

1.2 @layer

@layer 允许你定义样式的不同层次，例如：base、components 和 utilities。通过这些层级，你可以在 Tailwind CSS 中组织和管理你的样式。

✅ 示例：

/* 定义组件样式 */
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
}

/* 定义工具类样式 */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
  }
}

✅ 在 HTML 中使用：

<button class="btn">
  自定义按钮
</button>
<p class="text-shadow">
  带阴影的文字
</p>

@layer 用来管理和定义不同类型的样式层次，使得你的样式更清晰和有条理。

1.3 @variants

@variants 用来创建响应式和状态前缀的样式，例如：hover、focus 等。你可以为自定义样式添加不同的变体（variants）。

✅ 示例：

/* 定义响应式和状态变体 */
@variants hover, focus {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
}

✅ 使用：

<button class="btn hover:bg-blue-700">
  鼠标悬停时会改变颜色
</button>

@variants 允许你为自定义类定义不同的状态（如 hover、focus 等），并且能够使用响应式设计来调整样式。

1.4 @screen

@screen 使你能够为不同的断点定义响应式样式。你可以在 tailwind.config.js 中自定义断点，然后使用 @screen 来应用不同的样式。

✅ 示例：

/* 自定义断点下的样式 */
@screen md {
  .btn {
    @apply px-6 py-3 bg-green-500;
  }
}

✅ 使用：

<button class="btn">
  在小屏幕上为绿色按钮
</button>

@screen 允许你根据设备的屏幕宽度来为不同的设备提供样式，使得你的页面更具响应式。

1.5 @import

@import 允许你将其他 CSS 文件导入到当前文件中。这对于项目中模块化的 CSS 管理是很有用的。

✅ 示例：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 使得你可以把不同的样式拆分成多个文件进行管理，提升代码的可维护性。

🎯 2. Tailwind CSS 函数（Functions）

Tailwind 提供了很多 内置的函数，可以帮助你在 CSS 中动态生成和计算值。常见的 Tailwind 函数包括颜色函数、间距函数等。

2.1 theme()

theme() 函数可以让你访问 Tailwind 的配置中定义的值，如颜色、间距、字体等。这可以帮助你在自定义 CSS 中动态引用这些值。

✅ 示例：

/* 在 CSS 文件中使用 `theme()` 函数 */
.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.4');
}

theme() 使你能够使用 Tailwind 配置中的值，而无需硬编码。

2.2 screen()

screen() 函数用于生成响应式断点的值。它可以动态获取 tailwind.config.js 中的屏幕断点。

✅ 示例：

/* 动态生成响应式样式 */
.card {
  @apply p-4 bg-gray-200;

  @media (min-width: theme('screens.md')) {
    @apply p-8 bg-blue-500;
  }
}

screen() 可以使你根据屏幕尺寸动态生成响应式的样式。

2.3 color()

color() 函数用于获取或操作颜色。你可以用它来动态获取颜色值并进行处理。

✅ 示例：

/* 使用 `color()` 函数设置背景色 */
.btn {
  background-color: color(theme('colors.blue.500'));
}

color() 函数帮助你更方便地管理和使用颜色值，尤其是在自定义样式时。

2.4 rgba()

rgba() 函数允许你使用透明度值来定义颜色，它可以在 Tailwind 的 color 系统中进行扩展。

✅ 示例：

/* 使用 `rgba()` 生成带透明度的颜色 */
.bg-custom {
  background-color: rgba(theme('colors.blue.500'), 0.5);
}

rgba() 可以帮助你生成带透明度的颜色，用于创建阴影、背景等效果。

🎯 总结：

通过这些指令和函数，你可以更加灵活地使用 Tailwind CSS，并将其扩展到更复杂的应用场景中。