Tailwind CSS 函数与指令

函数与指令

Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。

@tailwind

使用 ​@tailwind​ 指令向您的 CSS 添加 Tailwind 的 ​base​, ​components​, ​utilities ​和 ​screens ​样式。

/**
 * 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 responsive
 * variations of each utility.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind screens;

@apply

使用 ​@apply​ 将任何现存的功能类内联到您的自定义 CSS 中。

当您在您的 HTML 里找到您想要提取到一个新组件的通用的功能模式时，这非常有用。

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

注意，类是根据其在原始 CSS 中的位置而不是根据在 ​@apply​ 指令之后列出它们的顺序来应用的。这是为了确保使用 ​@apply​ 提取类列表时得到的行为与直接在 HTML 中列出的类的行为相匹配。

/* Input */
.btn {
  @apply py-2 p-4;
}

/* Output */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

如果您要对功能类的应用顺序进行细粒度的控制，请使用多个 ​@apply​ 语句：

/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

您还可以将 ​@apply​ 声明与常规 CSS 声明混合使用：

/* Input */
.btn {
  transform: translateY(-1px);
  @apply bg-black;
}

/* Output */
.btn {
  background-color: #000;
  transform: translateY(-1px);
}

默认情况下，任何使用 ​@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};
}

@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 {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind会自动将 ​@layer​ 指令中的所有 CSS 移至与相应 ​@tailwind​ 规则相同的位置，因此您不必担心以特定顺序编写 CSS 来避免特定性问题。

在 ​@layer​ 指令中包装的任何自定义 CSS 也会告诉 Tailwind 在清除该层时考虑那些样式。阅读 关于生产优化的文档 来了解更多详情。

@variants

您可以通过在 ​@variants​ 指令中声明自己的功能类来生成他们的 ​responsive​, ​hover​, ​focus​, ​active ​及其它 变体。

@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}

这将生成以下 CSS：

.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}

请务必注意，变体是按照您指定的顺序生成的。

例如，如果您希望 focus 功能类优先于 hover 功能类，请确保列表中的 focus 应该在 hover 之后：

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

该 ​@variants​ 规则支持您配置文件中 ​variants ​部分支持的所有值，以及通过插件添加的 自定义变体。

@responsive

您可以通过在 ​@responsive​ 指令中声明他们的定义来生成您自己的类的响应式变体。

@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

这是 ​@variants responsive { ... }​ 的简写方式，同样起作用。

使用默认断点，这将生成以下类：

.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

响应式变体将在您的样式表的结尾被添加到 Tailwind 的已经存在的媒体查询中。这将确保那些带有响应式前缀的类优先级会高于同样 CSS 属性的非响应式的类。

@screen

​@screen​ 指令允许您创建通过名称引用断点的媒体查询，而不是在您的 CSS 中复制他们的值。

例如，假设有一个名为 ​sm​ 的 ​640px​ 的断点，您只需要写一些自定义的指向这个断点的 CSS。

而不是编写一个复制那些值的原始的媒体查询，如下所示：

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

您可以使用 ​@screen​ 指令，然后根据名称引用这个断点：

@screen sm {
  /* ... */
}

screen()

​screen ​函数接受像 ​md ​这样的屏幕名称并生成相应的媒体特征表达式：

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

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

当您将 Tailwind 与其他无法处理 ​@screen​ 指令的 CSS 工具一起使用时，这会很有用。例如 ​postcss-nesting​ 不理解 ​@screen​ 但理解 ​@media​，因此在 ​screen()​ 函数旁边使用 ​@media​ 会更正确。

theme()

使用 ​theme()​ 函数可以通过点符号来获取 Tailwind 配置的值。

当您想要引用一个您主题配置中的一部分声明的值时，这是一个 ​@apply​ 的有用的替代方式。

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