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中文網其他相關文章！