TailwindCSS 提供了一些强大的 CSS 函数 和 指令，帮助开发者灵活高效地管理样式。主要包括以下内容：

指令

  1. @apply - 将实用工具类应用到自定义的 CSS 样式中。
  2. @layer - 定义自定义样式的层次结构，例如基础层（base）、组件层（components）、工具层（utilities）。
  3. @variants - 创建自定义状态变体。
  4. @config - 访问自定义 Tailwind 配置。

函数

  1. theme() - 在样式中动态访问 Tailwind 的配置值。
  2. screen() - 处理响应式断点。

中文参考
https://tailwind.org.cn/docs/functions-and-directives

@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;

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

​在组件框架使用

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

如果你尝试在这些按组件的 <style> 块之一中 @apply 你在全局 CSS 中定义的自定义类，你将收到有关该类不存在的错误

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

Card.svelte

<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 的自定义样式

tailwind.config.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 功能来做这样的事情，你将获得更好的体验。

@layer 定义样式层次

什么是 @layer？

TailwindCSS 的样式分为 基础层 (base)、组件层 (components) 和 工具层 (utilities)。通过 @layer，我们可以向这些层次中添加自定义样式：

  • base：用于定义全局的基础样式（类似浏览器的默认样式）。
  • components：用于定义复用的组件样式。

  • utilities：用于定义自定义的工具类。

    示例：自定义层次样式

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

/* 添加到 base 层 */
@layer base {
  h1 {
    @apply text-3xl font-bold;
  }
}

/* 添加到 components 层 */
@layer components {
  .card {
    @apply bg-white p-4 rounded-lg shadow;
  }
}

/* 添加到 utilities 层 */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

HTML 使用方式：

<h1>标题</h1>
<div class="card">卡片内容</div>
<p class="text-shadow">带有阴影的文字</p>

注意事项：

  • @layer 定义的样式会被 Tailwind 的树摇（tree-shaking）处理，仅输出实际使用的样式。
  • 层次规范有助于维护清晰的样式结构。

@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 语句位于文件中的任何其他规则之前。

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

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

theme() 动态访问配置值

什么是 theme()？

theme() 用于访问 TailwindCSS 配置文件中的值（tailwind.config.js）。它可以获取颜色、间距、字体大小等配置数据。

示例：使用 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) {
  /* ... */
}

标签: CSS, TailwindCSS

评论已关闭