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

wufei123 2025-01-26 阅读:57 评论:0

大家好，开发者们！最近我遇到一个Tailwind CSS使用难题，并成功解决了它。希望我的经验能帮助到遇到相同问题的同行们。挑战：自定义CSS与组件指令的融合我的目标是：在使用Tailwind组件指令(@apply)创建可复用组件的...

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

大家好，开发者们！

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

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

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

自定义CSS:

PHP

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

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

Tailwind组件指令:

PHP

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

解决方案：利用addUtilities函数

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

PHP

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