Tailwind CSS - 函数与指令

在Tailwind CSS中，指令是用于在CSS中应用或自定义样式的命令。

指令是您在CSS中使用的Tailwind CSS命令，用于访问特殊功能并控制Tailwind CSS应用的样式。

@tailwind指令

@tailwind指令允许您将Tailwind的基础样式、组件、工具类和变体直接包含到您的CSS中。

示例

/**
 * 插入Tailwind的基础样式和插件中的任何额外基础样式。
 */
@tailwind base;

/**
 * 包含Tailwind的组件样式和插件中的任何额外组件样式。
 */
@tailwind components;

/**
 * 添加Tailwind的工具类和插件中的任何额外工具类。
 */
@tailwind utilities;

/**
 * 控制变体样式（如hover、focus和响应式）在CSS中的位置。
 * 如果未指定，这些变体默认会添加到样式表的末尾。
 */
@tailwind variants;

@layer指令

@layer指令让您可以指定您的自定义样式在Tailwind中应该属于哪个类别（base、components或utilities）。

示例

/**
 * 将Tailwind的基础样式、组件样式和工具类导入到您的CSS中。
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * 使用base层为HTML元素定义自定义基础样式。
 */
@layer base {
  h1 {
    @apply font-bold text-3xl; /* 为h1元素应用粗体和大号字体 */
  }
  h2 {
    @apply font-semibold text-2xl; /* 为h2元素应用半粗体和中号字体 */
  }
}

/**
 * 使用components层创建自定义组件样式。
 */
@layer components {
  .card {
    @apply bg-gray-100 border border-gray-300 p-4 rounded-lg shadow-md; /* 卡片组件的样式 */
  }
}

/**
 * 使用utilities层添加自定义工具类。
 */
@layer utilities {
  .no-opacity {
    opacity: 1; /* 将元素的透明度设置为完全不透明 */
  }
  .blurred {
    filter: blur(5px); /* 对元素应用模糊效果 */
  }
}

Tailwind会自动组织@layer指令中的CSS，以匹配@tailwind规则的顺序，因此您无需担心顺序问题来避免特异性冲突。

这些层中的自定义CSS只有在您的HTML中使用时才会包含在最终构建中，就像默认的Tailwind类一样。

此外，使用@layer可以让您将hover、focus和响应式断点如md:和lg:等修饰符应用到您的自定义样式中。

@apply指令

@apply允许您将现有的工具类直接包含到您的自定义CSS中。

如果您想在编写自己的CSS时使用Tailwind的样式，这很有帮助，使您更容易自定义或覆盖其他来源的样式。

示例

.custom-card {
    @apply rounded-lg shadow-lg;
}
.custom-input {
    @apply border border-gray-400 rounded-md;
}
.custom-header {
    @apply text-xl font-semibold text-gray-800;
}

当您使用@apply时，任何!important声明都会被默认移除，以防止与其他CSS规则冲突。以下是它的工作原理。

示例

/* 输入 */
/* 定义一个带有!important的类 */
.text-red {
  color: red !important;
}

/* 将.text-red类应用到另一个类 */
.alert {
  @apply text-red;
}
/* 输出 */
 
/* .text-red类保留!important声明 */
.text-red {
  color: red !important;
}

/* .alert类不包含!important */
.alert {
  color: red;
}

如果您想使用@apply来包含现有类的样式并确保它们是!important，您需要在自定义CSS中每个属性的末尾显式添加!important。

    /* 没有!important的.card类 */
.card {
  padding: 1rem;
  background-color: #edf2f7;
  border: 1px solid #cbd5e0;
  border-radius: .375rem;
}

/* 带有!important的.card-important类 */
.card-important {
  padding: 1rem !important;
  background-color: #edf2f7 !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: .375rem !important;
}

要使用@apply应用!important，请将!important添加到每个属性。对于Sass/SCSS，使用以下方法包含!important：

/* 使用Sass变量应用!important */
.card-important {
    @apply p-4 bg-gray-200 border border-gray-400 rounded;
    @apply #{$important}; /* 应用!important */
}

在组件CSS中使用@apply

在Vue和Svelte等框架中，您可以直接在每个组件文件内的<style>块中包含样式。

尝试在Vue或Svelte等框架中的<style>块中使用全局CSS中的自定义类会导致错误，因为它找不到该类。

示例：main.css

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

@layer components {
    .button {
      background-color: theme('colors.blue.500');
      border-radius: theme('borderRadius.md');
      padding: theme('spacing.4');
      color: theme('colors.white');
    }
}

示例：Card.svelte

    
<button>
    <slot></slot>
</button>

<style>
    button {
        /* 这不起作用，因为Button.svelte和main.css是单独处理的 */
        @apply button;
    }
</style>

在此示例中，.button在main.css中定义，但Button.svelte中的@apply不起作用，因为每个文件是单独处理的。Vue和Svelte独立处理它们的<style>块，因此它们不能直接使用全局CSS中的样式。

当您有多个组件，每个都有自己的<style>块时，Tailwind会单独处理每个文件。例如，如果您在main.css中定义了一个.button类，但尝试在Button.svelte中使用@apply button，它将不起作用。这是因为Tailwind独立处理Button.svelte和main.css，因此在Button.svelte中使用时它不识别.button类。

与其尝试跨不同文件使用@apply，不如直接在Tailwind的配置中定义您的样式。以下是方法。

示例

    
const plugin = require('tailwindcss/plugin')

module.exports = {
    // ...
    plugins: [
        plugin(function ({ addComponents, theme }) {
            addComponents({
              '.button': {
                backgroundColor: theme('colors.blue.500'),
                borderRadius: theme('borderRadius.md'),
                padding: theme('spacing.4'),
                boxShadow: theme('boxShadow.md'),
                color: theme('colors.white'),
              }
            })
        })
    ]
}

通过这样做，任何Tailwind CSS文件都将能够访问.button类。

为了获得更流畅的体验，最好在HTML中直接使用Tailwind的工具类，而不是依赖跨不同文件的@apply。这种方法简化了您的设置并避免了复杂性。

@config指令

@config指令告诉Tailwind CSS在处理特定CSS文件时使用哪个配置文件。如果您项目的不同部分有不同的配置文件，这很有用。

在site.css中，您可能使用默认配置。

示例

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

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

在admin.css中，您可以使用以下命令指定不同的配置文件：

示例

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

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

您在@config指令中指定的路径相对于CSS文件本身，并将覆盖在PostCSS设置或Tailwind CLI中设置的任何配置。

当将Tailwind CSS与postcss-import一起使用时，请确保在CSS文件中，所有@import语句都位于@config指令之前。

为什么？ postcss-import需要首先处理@import语句，遵循CSS规则，要求导入出现在任何其他规则之前。如果您将@config放在@import语句之前，它将导致问题，并且您的样式可能无法正确处理。

示例：错误顺序

/* 错误顺序 - 会导致问题 */
@config "./tailwind.admin.config.js";

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

示例：正确顺序

/* 始终将@import放在前面 */
@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()函数

要从您的Tailwind配置中访问值，只需使用点表示法的theme()函数。

示例

.button {
  border-width: theme(borderWidth.md);
}

如果您需要使用带有点的值（如边框宽度比例中的3.5），请应用方括号：

示例

.button {
  border-width: theme(borderWidth[3.5]);
}

要访问Tailwind默认调色板中的嵌套颜色，请使用点表示法来确保正确引用颜色值。

避免使用破折号表示嵌套颜色值。

示例

    /* 错误 */
.button {
    background-color: theme(colors.green-500);
}

使用点来访问嵌套颜色值。

示例

   /* 正确 */
.button {
    background-color: theme(colors.green.500);
}

要更改主题颜色的不透明度，请添加一个斜杠，后跟不透明度百分比：

示例

.card-bg {
    background-color: theme(colors.green.300 / 50%);
}

screen()函数

Tailwind CSS中的screen()函数让您可以使用命名断点创建媒体查询，避免在CSS中重复值。

示例

@media screen(md) {
    /* 中等屏幕及以上的样式 */
}

当您的CSS构建时，这将转换为指定断点的标准媒体查询。

示例

@media (min-width: 768px) {
    /* 至少768px宽的屏幕样式 */
}