函数和指令

Tailwind 暴露给 CSS 的自定义函数和指令的参考。

指令

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

@tailwind

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

  1. /**
  2.  * 这将注入Tailwind 的基础样式和插件注册的任何基础样式。
  3.  */
  4. @tailwind base;
  6. /**
  7.  * 这将注入 Tailwind 的组件类和插件注册的任何组件类。
  8.  */
  9. @tailwind components;
  11. /**
  12.  * 这将注入 Tailwind 的实用程序类和插件注册的任何实用程序类。
  13.  */
  14. @tailwind utilities;
  16. /**
  17.  * 使用此指令控制 Tailwind 在哪里注入悬停、聚焦、响应式、暗黑模式和其他每个类的变体。
  18.  *
  19.  * 如果省略，Tailwind 将默认将这些类追加到样式表的末尾。
  20.  */
  21. @tailwind variants;

@layer

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

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  5. @layer base {
  6.   h1 {
  7.     @apply text-2xl;
  8.   }
  9.   h2 {
  10.     @apply text-xl;
  11.   }
  12. }
  14. @layer components {
  15.   .btn-blue {
  16.     @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  17.   }
  18. }
  20. @layer utilities {
  21.   .filter-none {
  22.     filter: none;
  23.   }
  24.   .filter-grayscale {
  25.     filter: grayscale(100%);
  26.   }
  27. }

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

添加到层的任何自定义 CSS 只有在 HTML 中实际使用时才会包含在最终构建中，就像所有默认构建到 Tailwind 中的类一样。

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

@apply