函数和指令

​指令

指令是自定义的 Tailwind 特定的 at-rules，您可以在 CSS 中使用它们，为 Tailwind CSS 项目提供特殊功能。

​@tailwind

使用 @tailwind 指令将 Tailwind 的 base、components、utilities 和 variants 样式插入到您的 CSS 中。

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind variants;

​@layer

使用 @layer 指令告诉 Tailwind 一组自定义样式属于哪个存储桶。有效层为 base、components 和 utilities。

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

Tailwind 会自动将任何 @layer 指令内的 CSS 移动到与相应的 @tailwind 规则相同的位置，因此您不必担心按照特定顺序编写 CSS 以避免特异性问题。

任何添加到层中的自定义 CSS 仅当该 CSS 实际用于 HTML 中时才会包含在最终构建中，就像默认情况下内置在 Tailwind 中的所有类一样。

使用 @layer 包装任何自定义 CSS 也可以使用具有这些规则的修饰符，如 hover: 和 focus: 或响应修饰符，如 md: 和 lg:。

​@apply

使用 @apply 将任何现有的实用程序类内联到您自己的自定义 CSS 中。

当您需要编写自定义 CSS（例如覆盖第三方库中的样式）但仍想使用设计令牌并使用您在 HTML 中习惯使用的相同语法时，这很有用。

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

任何与 @apply 内联的规则将默认删除 !important 以避免特异性问题：

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

如果您想要 @apply 一个现有类并将其设为 !important，只需在声明末尾添加 !important 即可：

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

请注意，如果您使用 Sass/SCSS，则需要使用 Sass 的插值功能才能使其正常工作：

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

​使用 @apply 和每个组件的 CSS

Vue 和 Svelte 等组件框架支持在每个组件文件中的 <style> 块内添加每个组件样式。

如果您尝试在每个组件的其中一个 <style> 块中 @apply 一个在全局 CSS 中定义的自定义类，则会收到有关该类不存在的错误：

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

@layer components {
  .card {
    background-color: theme(colors.white);
    border-radius: theme(borderRadius.lg);
    padding: theme(spacing.6);
    box-shadow: theme(boxShadow.xl);
  }
}

<div>
  <slot></slot>
</div>

<style>
  div {
    /* Won't work because this file and main.css are processed separately */
    @apply card;
  }
</style>

这是因为在底层，Vue 和 Svelte 等框架正在独立处理每一个 <style> 块，并针对每个块单独运行 PostCSS 插件链。

这意味着如果您有 10 个组件，每个组件都有一个 <style> 块，那么 Tailwind 将被单独运行 10 次，并且每次运行都对其他运行一无所知。因此，当您尝试在 Card.svelte 中 @apply card 时会失败，因为 Tailwind 不知道 card 类的存在，因为 Svelte 完全独立地处理 Card.svelte 和 main.css。

解决此问题的方法是使用 plugin system 来定义您想要在组件中使用 @apply 的任何自定义样式：

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}

这样，Tailwind 处理的任何使用此配置文件的文件都可以访问这些样式。

老实说，最好的解决方案就是根本不做这种奇怪的事情。按照预期的方式直接在标记中使用 Tailwind 的实用程序，不要滥用 @apply 功能来做这样的事情，这样您将获得更好的体验。

​@config

使用 @config 指令指定 Tailwind 在编译该 CSS 文件时应使用哪个配置文件。这对于需要为不同的 CSS 入口点使用不同配置文件的项目很有用。

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

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

您提供给 @config 指令的路径相对于该 CSS 文件，并且优先于 PostCSS 配置或 Tailwind CLI 中定义的路径。

请注意，如果您使用 postcss-import，则 @import 语句需要位于 @config 之前才能正常工作，因为 postcss-import 严格遵循 CSS 规范，该规范要求 @import 语句位于文件中的任何其他规则之前。

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

@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

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

​Functions

Tailwind 添加了一些自定义函数，您可以在 CSS 中使用这些函数来访问特定于 Tailwind 的值。这些函数在构建时进行评估，并在最终 CSS 中被静态值替换。

​theme()

使用 theme() 函数以点符号访问您的 Tailwind 配置值。

.content-area {
  height: calc(100vh - theme(spacing.12));
}

如果需要访问包含点的值（例如间距比例中的 2.5 值），则可以使用方括号表示法：

.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}

由于 Tailwind 使用 nested object syntax 来定义其默认调色板，因此请确保使用点符号来访问嵌套的颜色。

.btn-blue {
  background-color: theme(colors.blue-500);
}

.btn-blue {
  background-color: theme(colors.blue.500);
}

要调整使用 theme 检索的颜色的不透明度，请使用斜线后跟要使用的不透明度值：

.btn-blue {
  background-color: theme(colors.blue.500 / 75%);
}

​screen()

screen 函数允许您创建通过名称引用断点的媒体查询，而不是在您自己的 CSS 中复制它们的值。

@media screen(sm) {
  /* ... */
}

这将在构建时解析底层屏幕值，生成与指定断点匹配的常规媒体查询：

@media (min-width: 640px) {
  /* ... */
}