大家好，开发者们！
最近我遇到一个Tailwind CSS使用难题，并成功解决了它。希望我的经验能帮助到遇到相同问题的同行们。
挑战：自定义CSS与组件指令的融合
我的目标是：在使用Tailwind组件指令(@apply)创建可复用组件的同时，应用自定义的CSS样式。起初，这看起来相当棘手。
立即学习“前端免费学习笔记（深入）”；
自定义CSS:
1
2
3
4
5
6
7
.text-shadow {
text-shadow: none;
}
.tap-highlight {
-webkit-tap-highlight-color: transparent;
}
Tailwind组件指令:
1
2
3
@layer components {
@apply text-shadow tap-highlight bg-red-900 rounded-full text-base;
}
解决方案：利用addUtilities函数
网上搜索的方案都未能奏效。最终，我想到利用Tailwind插件的addUtilities函数来添加我的自定义工具类。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const plugin = require("tailwindcss/plugin");
// ...其他代码...
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
".text-shadow": {
textShadow: "none",
},
".tap-highlight": {
WebkitTapHighlightColor: "transparent",
},
});
}),
],
方法很简单：导入tailwindcss/plugin，然后使用addUtilities函数添加我的自定义工具类，就像上面代码所示。 问题完美解决！
感谢您的阅读！如有任何疑问，欢迎在评论区留言。