大家好，开发者们！
最近我遇到一个Tailwind CSS使用难题，并成功解决了它。希望我的经验能帮助到遇到相同问题的同行们。
挑战：自定义CSS与组件指令的融合
我的目标是：在使用Tailwind组件指令(@apply)创建可复用组件的同时，应用自定义的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函数添加我的自定义工具类，就像上面代码所示。 问题完美解决！
感谢您的阅读！如有任何疑问，欢迎在评论区留言。
以上就是Tailwind：将自定义 css 与 @components 指令结合起来的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
