Tailwind CSS - 函数与指令

Tailwind CSS：函数与指令

尽管 Tailwind 的设计理念是工具类优先（utility-first），但有时你仍然需要编写自定义 CSS。Tailwind 提供了强大的指令和函数，供你在 CSS 文件中使用，使你能够将自己的样式无缝集成到 Tailwind 生态系统中。

先决条件：构建流程

要使用这些功能，你必须有一个构建步骤。它们是针对 Tailwind CSS 编译器的特殊指令，而非有效的标准 CSS。最小化设置包括 tailwindcss CLI、postcss 和一个 package.json 文件。

# 项目设置（如果尚未完成）
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 你的主 CSS 文件（例如 src/input.css）
/* ... 你的指令将在此处 ... */

# 构建命令
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

指令：@tailwind

@tailwind 指令是用于将 Tailwind 生成的样式注入到你的 CSS 中的主要入口点。它注入 base、components 和 utilities 层。

src/input.css

/* 注入 Tailwind 的基础样式（如 Preflight）和重置规则。 */
@tailwind base;

/* 注入 Tailwind 的组件类（例如，用于插件）。 */
@tailwind components;

/* 注入所有 Tailwind 的工具类。 */
@tailwind utilities;

指令：@layer

@layer 指令允许你告诉 Tailwind 你的自定义样式属于哪个“层”。这对于管理 CSS 特异性（specificity）以及确保你的自定义样式在需要时能被工具类覆盖至关重要。你还可以在层内对样式应用 hover: 和 md: 等变体。

示例：创建自定义卡片组件

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 在 'components' 层中定义自定义组件样式 */
@layer components {
  .card {
    background-color: white;
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.md');
  }
  /* 你甚至可以添加变体！ */
  .card:hover {
    box-shadow: theme('boxShadow.xl');
  }
}

通过将 .card 放置在 components 层中，它将比工具类具有更低的特异性，这意味着你仍然可以在 .card 元素上使用 p-8 或 bg-blue-100 等工具类来覆盖其基本样式。

指令：@apply

@apply 指令允许你将现有的工具类直接内联到你自己的自定义 CSS 规则中。这对于将重复的工具类模式抽象为一个单独的组件类非常有用。

示例：创建可复用按钮类

src/input.css

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

现在你可以使用 <button class="btn-primary">Click Me</button>，而无需每次都写一长串工具类了。

警告：@apply 的陷阱

尽管 @apply 很有吸引力，但如果过度使用，它可能会导致问题，尤其是在使用作用域样式（scoped styles）的现代 JavaScript 框架（如 Vue 或 Svelte）中。你不能在组件的作用域 <style> 块内 @apply 在全局 CSS 文件中定义的类。 这是因为文件是独立处理的。对于真正可复用、与框架无关的组件，通常最好使用 addComponents 创建插件。

函数：theme()

theme() 函数允许你在自定义 CSS 中直接从 tailwind.config.js 文件中访问值。这对于保持与你的设计系统的一致性至关重要。

示例：使用主题值

.content-area {
  /* 访问间距值 */
  padding: theme('spacing.8');

  /* 访问嵌套颜色值（使用点表示法） */
  background-color: theme('colors.gray.100');
  border: 1px solid theme('colors.gray.300');

  /* 访问不透明度修饰符 */
  color: theme('colors.blue.800 / 75%'); /* 75% opacity */
}

函数：screen()

screen() 函数允许你创建媒体查询，这些媒体查询引用 tailwind.config.js 文件中的项目断点，确保你的自定义 CSS 和工具类共享相同的响应式行为。

示例：自定义响应式样式

.hero-title {
  font-size: 2rem;
}

/* 使用 screen() 引用配置中的断点 */
@media screen(md) {
  .hero-title {
    font-size: 4rem;
  }
}

/* 这将编译为类似以下内容： */
/*
@media (min-width: 768px) {
  .hero-title {
    font-size: 4rem;
  }
}
*/

指令：@config (高级)

@config 指令允许你为特定的 CSS 入口点指定不同的 Tailwind 配置文件。这是一个高级功能，通常用于具有多个主题的复杂项目，例如具有不同设计系统的公共网站和管理面板。

/* 在 admin-styles.css 中 */

@config "./tailwind.admin.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;