Comment rendre les styles de boutons globaux tout au long du projet en utilisant à la fois Tailwind et Angular

Question

Je suis un débutant et j'ai travaillé sur Angular et j'ai décidé d'utiliser Tailwind pour le style car chaque classe Tailwind est en ligne et la classe de style pour le bouton devient énorme et pour utiliser le bouton, je dois utiliser cette classe partout . Cela rend le code fastidieux et la maintenance devient pénible.

Ma question est de savoir comment rendre le style de bouton global en utilisant tailwind, j'ai également plusieurs styles de boutons comme button-no-bg 、 button-bg-red

J'ai essayé de les définir en utilisant @apply指令在Angular的styles.css

@tailwind base;
@tailwind components;
@tailwind utilities; 
.button-no-bg{
  @apply bg-white text-blue-500 border p-1 px-8  text-xs font-bold border-blue-500;
}
.button-red-bg{
  @apply ......;
}

Pour éviter la duplication de code, j'aimerais savoir comment rendre une classe de boutons globale avec plusieurs noms de boutons et leurs classes associées. Si ce n'est pas une réponse complète, veuillez partager une référence.

Answer 1

Je suis nouveau dans l'orientation des vents arrière et je ne suis pas sûr que cette méthode soit la "meilleure", mais j'attends une autre meilleure réponse...

Suivez les instructions dans la documentation mais excluez le @tailwinds dans styles.css sinon dans le nouveau fichier styles-tailwinds.css

Exécution par temps

npx tailwindcss -i ./src/styles-tailwinds.css -o ./src/output.css --watch
//and
ng serve

Tout d'abord, toute modification dans styles-tailwinds.css créera un nouveau fichier dans src/output.css

Modifiez votre angulaire.json pour ajouter ce .css, afin que le style du tableau devienne comme

"styles": [
          "src/styles.css",
          "src/output.css"
        ],