tailwind material 3

Matériau de vent arrière 3

Le matériau du vent arrière 3 est une bibliothèque qui fournit des composants d'interface utilisateur prêts à l'emploi pour les utilisateurs de CSS à vent arrière. Il comprend une gamme de composants personnalisables tels que des boutons, des cartes et des formulaires, ainsi que des utilitaires et des aides utiles. L'installation du matériau de vent arrière 3 est aussi simple que d'exécuter ce qui suit

commande dans votre terminal:

 npm i tailwind-materilal-3

La bibliothèque est activement maintenue et mise à jour, garantissant que vous avez toujours accès aux composantes de l'interface utilisateur les plus récentes et les plus grandes. Essayez-le et voyez comment il peut vous aider à rationaliser votre processus de développement de l'interface utilisateur!

Comment utiliser

Pour utiliser le matériau de vent arrière 3, assurez-vous d'abord que le vent arrière CSS soit installé dans votre projet. Ensuite, importez simplement les composants souhaités de la bibliothèque et utilisez-les dans votre code HTML.

Veuillez suivre les instructions

Étape 1

Installez tailwindcss via NPM et créez votre fichier tailwind.config.js .

npm install -D tailwindcss
npx tailwindcss init

Étape 2

Installez tailwind-material-3 via NPM.

npm i tailwind-material-3 tailwind-material-colors

Étape 3

Ajoutez les chemins à tous vos fichiers de modèle, couleurs et autres configuration dans votre fichier tailwind.config.js .

 const { default : useMD3 } = require ( 'tailwind-material-3' ) ;

module . exports = useMD3 ( {
  content : [ "./src/**/*.{html,js}" ] ,
  theme : {
    colors : {
         primary : "#9cd67d" ,
         blue : "#8116f3" ,
      } ,
    extend : { } ,
  } ,
  plugins : [ ] ,
} )

Étape 4

Ajoutez les directives @tailwind pour chacune des couches de Tailwind à votre fichier CSS principal.

@tailwind base ;
@tailwind components ;
@tailwind utilities ;

Étape 5

Commencez à utiliser les composants dans votre code HTML!

 < body >
  < div class =" p-4 " >
        < button class =" filled-btn " > filled-btn </ button >      
        < button class =" filled-btn " disabled > disabled filled-btn </ button >
        < button class =" filled-tonal-btn " > filled-tonal-btn </ button >
        < button class =" outlined-btn " > outlined-btn </ button >
  </ div >
</ body >

C'est ça! Vous savez maintenant comment utiliser le matériau de vent arrière 3 pour rationaliser votre processus de développement de l'interface utilisateur. Essayez-le et voyez comment cela peut vous aider à gagner du temps et des efforts pour construire des interfaces belles et fonctionnelles. Si vous avez des questions ou des commentaires, n'hésitez pas à nous contacter. Codage heureux!