大家好，开发者们！

最近我遇到一个Tailwind CSS使用难题，并成功解决了它。希望我的经验能帮助到遇到相同问题的同行们。

挑战：自定义CSS与组件指令的融合

我的目标是：在使用Tailwind组件指令(@apply)创建可复用组件的同时，应用自定义的CSS样式。起初，这看起来相当棘手。

立即学习“前端免费学习笔记（深入）”；

自定义CSS:

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<code class="css">.text-shadow {
  text-shadow: none;
}

.tap-highlight {
  -webkit-tap-highlight-color: transparent;
}</code>

Tailwind组件指令:

<code class="css">@layer components {
  @apply text-shadow tap-highlight bg-red-900 rounded-full text-base;
}</code>

解决方案：利用addUtilities函数

网上搜索的方案都未能奏效。最终，我想到利用Tailwind插件的addUtilities函数来添加我的自定义工具类。

<code class="javascript">const plugin = require("tailwindcss/plugin");
// ...其他代码...
plugins: [
  plugin(function({ addUtilities }) {
    addUtilities({
      ".text-shadow": {
        textShadow: "none",
      },
      ".tap-highlight": {
        WebkitTapHighlightColor: "transparent",
      },
    });
  }),
],</code>

方法很简单：导入tailwindcss/plugin，然后使用addUtilities函数添加我的自定义工具类，就像上面代码所示。 问题完美解决！

感谢您的阅读！如有任何疑问，欢迎在评论区留言。