Tailwind : combinez des CSS personnalisés avec la directive @components

Salut les développeurs,
Je suis tombé sur un défi que je souhaite partager et comment je l'ai résolu. Ces articles aideront d'autres développeurs comme moi qui ont rencontré le même problème.

Le défi

Mon défi était de créer un composant réutilisable avec la directive de composants tailwind pendant que j'appliquais mon CSS personnalisé comme indiqué ci-dessous. Cela semble impossible au début et difficile.

Mon CSS personnalisé

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

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

directive sur les composants de vent arrière

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

La solution

Après avoir cherché une solution sur Internet, je n'ai pas réussi à la faire fonctionner. J'ai donc eu l'idée d'ajouter ma classe utilitaire via la fonction addUtilities du plugin tailwind

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

Ce que j'ai fait, c'est importer tailwindcss/plugin et ajouter mes classes utilitaires comme vu ci-dessus. Voila ça marche

---

Merci d'avoir lu ! Faites-moi savoir dans les commentaires si vous avez des questions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!