TailwindCSS：功能与指令

<https://www.tailwindcss.cn/docs/functions-and-directives>

功能和指令

Tailwind 向您的 CSS 公开的自定义函数和指令的参考。

Directives

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

@tailwind

使用 @tailwind 指令将 Tailwind 的基础、组件、实用程序和变体样式插入到您的 CSS 中。

css

/**
* 这会注入 Tailwind 的基本样式以及插件。
*/
@tailwind base;
/**
* 这会注入 Tailwind 的组件类和任何组件类通过插件注册。
*/
@tailwind components;
/**
* 这会注入 Tailwind 的实用程序类和注册的任何实用程序类 通过插件
*/
@tailwind utilities;
/**
* 使用此指令来控制 Tailwind 在何处注入悬停、焦点、
* 响应式、深色模式以及每个类别的其他变体。
*
* 如果省略，Tailwind 会将这些类附加到
* 默认情况下您的样式表。
*/
@tailwind variants;

@layer

使用 @layer 指令告诉 Tailwind 一组自定义样式属于哪个“bucket”。有效层是基础层、组件层和实用程序层。

css

@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 还可以使用具有这些规则的修饰符，例如悬停：和焦点：或响应式修饰符，例如 md: 和 lg:。

@apply

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

当您需要编写自定义 CSS（例如覆盖第三方库中的样式）但仍希望使用您的设计标记并使用您在 HTML 中使用的相同语法时，这非常有用。

css

.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 以避免特殊性问题：

css

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

.bar {
  @apply foo;
}

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

.bar {
  color: blue;
}

如果您想 @apply 现有的类并使其成为 !important，只需将 !important 添加到声明的末尾即可：

css

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

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

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

将 @apply 与每个组件 CSS 一起使用

Vue 和 Svelte 等组件框架支持在每个组件文件中的 <style> 块中添加每个组件的样式。如果您尝试在这些每个组件 <style> 块之一中 @apply 在全局 CSS 中定义的自定义类，您将收到有关该类不存在的错误：

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);
  }
}

html

&lt;div>
  &lt;slot>&lt;/slot>
&lt;/div>

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

这是因为在底层，像 Vue 和 Svelte 这样的框架正在独立处理每个 <style> 块，并针对每个块单独运行 PostCSS 插件链。这意味着，如果您有 10 个组件，每个组件都有一个 <style> 块，则 Tailwind 将单独运行 10 次，并且每次运行对其他运行的了解为零。因此，当您尝试在 Card.svelte 中 @apply card 时，它会失败，因为 Tailwind 不知道该卡类存在，因为 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 指令指定 Tailwind 在编译 CSS 文件时应使用哪个配置文件。这对于需要为不同 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 中的任何其他规则之前文件。

Functions

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

theme()

使用 theme() 函数通过点表示法访问您的 Tailwind 配置值。

使用点表示法访问嵌套颜色值

css

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

要调整通过主题检索的颜色的不透明度，请使用斜杠，后跟要使用的不透明度值：

css

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

screen()

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

css

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

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

css

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

TailwindCSS：功能与指令 ​

功能和指令 ​

Directives ​

@tailwind ​

@layer ​

@apply ​

将 @apply 与每个组件 CSS 一起使用 ​

@config ​

Functions ​

theme() ​

screen() ​