添加新的功能类

尽管 Tailwind 提供了相当全面的开箱即用的功能类集，您仍可能会遇到需要添加一些自己的功能类的情况。

确定扩展框架的最佳方法非常不易，因此这里有一些最佳实践，可以帮助您以最惯用的方式添加自己的功能类。

使用 CSS

将自己的功能类添加到 Tailwind 的最简单的方式是直接添加到您的 CSS 中。

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

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

通过使用 @layer 指令， Tailwind 将自动把这些样式移动到 @tailwind utilities 相同的位置，以避免出现意外的未知问题。

使用 @layer 指令也会指示 Tailwind 在清除 功能类 层时考虑这些样式。阅读我们的生产优化文档以了解更多信息。

生成响应式变体

如果您想根据您的 tailwind.config.js 定义的断点创建功能类的变体，请将您的功能类放在 @variants 指令中，并把 responsive 添加到变体列表中。

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

@layer utilities {
  @variants responsive {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

Tailwind 将自动生成每个自定义功能类的前缀版本，您可以有条件地应用这些样式到不同的断点上：

<!-- Use `scroll-snap-type: none` by default, then use `scroll-snap-type: x` on medium screens and up -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

在响应式设计文档了解更多响应式功能类的信息。

生成深色模式变体

如果您想生成您自己的功能类的 dark mode variants，首先确保在您的 tailwind.config.js 文件中 darkMode 被设置为 media 或者 class。

// tailwind.config.js
module.exports = {
  darkMode: 'media'
  // ...
}

下一步，将您的功能类放在 @variants 指令中，并且把 dark 添加到变体列表中。

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

@layer utilities {
  @variants dark {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind 将自动生成每个自定义功能类的前缀版本，您可以有条件地应用这些样式到不同的状态上：

<div class="filter-grayscale dark:filter-none"></div>

在响应式设计文档中了解更多关于响应式功能类的信息。

生成状态变体

如果您想为您的功能类生成状态变体，请将您的功能类放在 @variants 指令中，并列出您想启用的变体：

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

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind 将自动生成每个自定义功能类的前缀版本，您可以有条件地应用这些样式到不同的状态上：

<div class="filter-grayscale hover:filter-none"></div>

状态变体的生成顺序与您在 @variants 指令中列出的顺序相同，因此，如果您希望一个变体优先于另一个变体，请确保这个变体最后被列出：

/* Focus will take precedence over hover */
@variants hover, focus {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

/* Hover will take precedence over focus */
@variants focus, hover {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

在状态变体文档中了解更多关于状态变体的信息。

使用插件

除了直接在 CSS 文件中添加新的功能类外，您还可以通过编写自己的插件将功能类添加到 Tailwind ：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

如果您想把您的自定义功能类作为一个库发布，或者使其更容易跨项目分享，这是一个不错的选择。

在功能插件文档中了解更多信息。

使用 CSS

生成响应式变体

生成深色模式变体

生成状态变体

使用插件

本页目录