函数和指令

​指令

指令是 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 一组自定义样式属于哪个“bucket”。有效的层是 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};
}

​在按组件 CSS 中使用 @apply

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。

解决此问题的办法是使用 插件系统 在组件中定义任何你想要 @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 指令指定编译该 CSS 文件时 Tailwind 应使用哪个配置文件。这对于需要为不同的 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";

​函数

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 使用 嵌套对象语法 来定义其默认调色板，因此请务必使用点表示法来访问嵌套颜色。

.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) {
  /* ... */
}