首頁 >web前端 >css教學 >Tailwind:將自訂 css 與 @components 指令結合起來

Tailwind:將自訂 css 與 @components 指令結合起來

Barbara Streisand
Barbara Streisand原創
2024-12-31 13:59:09582瀏覽

Tailwind: Combine custom css with @components directive

開發者們大家好,
我遇到了一個想要分享的挑戰以及我是如何解決它的。這些文章將幫助其他像我一樣遇到相同問題的開發者。

挑戰

我的挑戰是在應用自訂 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn