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 中国語 Web サイトの他の関連記事を参照してください。