Rückenwind: Kombinieren Sie benutzerdefiniertes CSS mit der @components-Direktive

Hallo Entwickler,
Ich bin auf eine Herausforderung gestoßen, die ich teilen möchte, und wie ich sie gelöst habe. Diese Artikel werden anderen Entwicklern wie mir helfen, die auf das gleiche Problem gestoßen sind.

Die Herausforderung

Meine Herausforderung bestand darin, eine wiederverwendbare Komponente mit der Tailwind-Komponentendirektive zu erstellen, während ich mein benutzerdefiniertes CSS anwendete, wie unten gezeigt. Es erscheint zunächst unmöglich und herausfordernd.

Mein benutzerdefiniertes CSS

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

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

Rückenwind-Komponentenrichtlinie

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

Die Lösung

Nachdem ich im Internet nach einer Lösung gesucht hatte, konnte ich sie nicht zum Laufen bringen. Also hatte ich die Idee, meine Utility-Klasse über die Funktion addUtilities aus dem Tailwind-Plugin
hinzuzufügen

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

Was ich getan habe, war, tailwindcss/plugin zu importieren und meine Dienstprogrammklassen wie oben gezeigt hinzuzufügen. Voila, es funktioniert

---

Danke fürs Lesen! Lass es mich in den Kommentaren wissen, wenn du Fragen hast.

Das obige ist der detaillierte Inhalt vonRückenwind: Kombinieren Sie benutzerdefiniertes CSS mit der @components-Direktive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!