Mazwei Docs

Appearance

函数和指令 ​

一个关于 Tailwind 暴露给你的 CSS 的自定义函数和指令的参考。

指令 ​

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

@tailwind ​

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

css
/**
 * 这将注入 Tailwind 的基本样式和任何由插件注册的基本样式。
 */
@tailwind base;

/**
 * 这将注入 Tailwind 的组件类和任何由插件注册的组件类。
 */
@tailwind components;

/**
 * 这将注入 Tailwind 的实用程序类和任何由插件注册的实用程序类。
 */
@tailwind utilities;

/**
 * 使用该指令可控制 Tailwind 在何处注入每个类的悬停、焦点、响应、暗模式和其他变体。
 *
 * 如果省略，Tailwind 将默认把这些类附加到样式表的末尾。
 */
@tailwind variants;

@layer ​

使用 @layer 指令告诉 Tailwind 自定义样式属于哪个“桶”。有效的层包括 base 、 components 和 utilities 。

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 也使得可以使用这些规则的修饰符，比如 hover: 和 focus: 或响应式修饰符，比如 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;
}

如果您想修改现有的类并使其成为 !important ，只需在声明的末尾添加 !important ：

css
/* 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 的插值功能才能使其工作：

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

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

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

如果您尝试 @apply 在这些每个组件的 <style> 块中使用全局 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
<div>
  <slot></slot>
</div>

<style>
  div {
    /* 不会起作用，因为该文件和 main.css 是分开处理的  */
    @apply card;
  }
</style>

这是因为在幕后，像 Vue 和 Svelte 这样的框架正在独立处理每个 <style> 块，并针对每个块单独运行您的 PostCSS 插件链。

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

解决这个问题的方法是使用插件系统在组件中定义任何您想要的自定义样式，而不是在组件中使用 @apply 。

js
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;
css
@config "./tailwind.admin.config.js";

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

你提供给 @config 指令的路径是相对于该 CSS 文件的，并且会覆盖在你的 PostCSS 配置或 Tailwind CLI 中定义的路径。

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

✘ 不要在您的 `@import` 语句之前放置 `@config`

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

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

✓ 在 `@config` 指令之前放置您的 `@import` 语句

css
@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 配置值。

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

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

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

由于 Tailwind 使用嵌套对象语法来定义其默认颜色调色板，请确保使用点符号访问嵌套颜色。

[!CUATION] ✘ 不要使用破折号语法来访问嵌套的颜色值

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

✓ 使用点符号来访问嵌套的颜色值

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

要调整使用 theme 检索到的颜色的不透明度，请使用斜杠，然后加上您想要使用的不透明度值:

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

screen() ​

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

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

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

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

Released under the MIT License.

Copyright © 2019-present Mazwei