Tailwind CSS - 函数和指令

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

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

@tailwind

@tailwind 指令允许您将 Tailwind 的基本样式、组件、实用程序和变体直接添加到 CSS 中。

示例

/**
* 插入 Tailwind 的基础样式以及来自插件的任何其他基本样式。
*/
@tailwind base;

/**
* 包含 Tailwind 的组件样式以及来自插件的任何额外组件样式。
*/
@tailwind components;

/**
* 添加 Tailwind 的工具类以及来自插件的任何额外工具类。
 */
@tailwind utilities;

/**
* 控制 CSS 中变体样式(例如悬停、焦点和响应式)的位置。
* 如果未指定，这些变体将默认添加到样式表的末尾。
*/
@tailwind variants;

@layer

@layer 指令允许您指定自定义样式在 Tailwind 中属于哪个类别(base、components 或 utilities)。

示例

/**
* 将 Tailwind 的基础样式、组件样式和实用程序类导入到您的 CSS 中。
*/
@tailwind base;
@tailwind components;
@tailwind utility;

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

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

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

Tailwind 会自动组织 @layer 指令中的 CSS，使其与 @tailwind 规则的顺序一致，因此您无需担心顺序问题，从而避免特殊性问题。

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

此外，使用 @layer 可以将修饰符(例如 hover、focus)以及响应式断点(例如 md: 和 lg:)应用于自定义样式。

@apply

@apply 允许您将现有的实用程序类直接添加到自定义 CSS 中。

这很有用if you want to use Tailwind's styles while writing your own CSS, making it easier to customize or override styles from other sources.

Example

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

/* .card-important 类与 !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 */
}

将 @apply 与每个组件的 CSS 一起使用

在 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 会分别处理每个文件。例如，如果您在 ma​​in.css 中定义了一个 .button 类，但尝试在 Button.svelte 中使用 @apply 按钮，它将无法正常工作。这是因为 Tailwind 会独立处理 Button.svelte 和 ma​​in.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 utility;

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

将 Tailwind CSS 与 postcss-import 结合使用时，请确保所有 @import 语句都位于 CSS 文件中的 @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%);
}

@screens

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

示例

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

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

示例

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

@screens

Tailwind CSS 中的 screen() 函数可帮助您使用命名断点创建媒体查询，而无需在 CSS 中重复它们的值。

示例

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

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

示例

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