Tailwind：将自定义 css 与 @components 指令结合起来

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Tailwind：将自定义 css 与 @components 指令结合起来》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

大家好，开发者们！

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

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

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

自定义CSS:

.text-shadow {
  text-shadow: none;
}

.tap-highlight {
  -webkit-tap-highlight-color: transparent;
}

Tailwind组件指令:

@layer components {
  @apply text-shadow tap-highlight bg-red-900 rounded-full text-base;
}

解决方案：利用addUtilities函数

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

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

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

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

今天关于《Tailwind：将自定义 css 与 @components 指令结合起来》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！