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

开发者们大家好，
我遇到了一个想要分享的挑战以及我是如何解决它的。这些文章将帮助像我一样遇到同样问题的其他开发者。

挑战

我的挑战是在应用自定义 CSS 时使用 tailwind 组件指令创建可重用组件，如下所示。乍一看似乎不可能并且具有挑战性。

我的自定义CSS

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

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

顺风组件指令

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

解决方案

在互联网上搜索解决方案后，我无法让它工作。所以我有一个想法通过 tailwind 插件的 addUtilities 函数添加我的实用程序类

const plugin = require("tailwindcss/plugin");
---- other code goes here
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-shadow": {
          textShadow: "none",
        },
        ".tap-highlight": {
          WebkitTapHighlightColor: "transparent",
        },
      });
    }),
  ],

我所做的是导入 tailwindcss/plugin 并添加我的实用程序类，如上所示。瞧，它有效

---

感谢您的阅读！如果您有任何疑问，请在评论中告诉我。

以上是Tailwind：将自定义 css 与 @components 指令结合起来的详细内容。更多信息请关注PHP中文网其他相关文章！