tailwind material 3

Rückenwindmaterial 3

Railwind Materials 3 ist eine Bibliothek, die für die Nutzungswind-Benutzer-CSS-Benutzer-Benutzer-UI-Komponenten bereitgestellt wird. Es enthält eine Reihe anpassbarer Komponenten wie Schaltflächen, Karten und Formulare sowie nützliche Dienstprogramme und Helfer. Das Installieren von Rückenwindmaterial 3 ist so einfach wie das Ausführen der folgenden

Befehl in Ihrem Terminal:

 npm i tailwind-materilal-3

Die Bibliothek wird aktiv gepflegt und aktualisiert, um sicherzustellen, dass Sie immer Zugriff auf die neuesten und größten UI -Komponenten haben. Probieren Sie es aus und sehen Sie, wie es helfen kann, Ihren UI -Entwicklungsprozess zu rationalisieren!

Wie man benutzt

Um das Materiallwindmaterial 3 zu verwenden, stellen Sie zunächst sicher, dass Sie in Ihrem Projekt Rückenwind -CSS installiert haben. Importieren Sie dann einfach die gewünschten Komponenten aus der Bibliothek und verwenden Sie sie in Ihrem HTML -Code.

Bitte befolgen Sie die Anweisungen

Schritt 1

Installieren Sie tailwindcss über NPM und erstellen Sie Ihre Datei tailwind.config.js .

npm install -D tailwindcss
npx tailwindcss init

Schritt 2

Installieren Sie tailwind-material-3 über NPM.

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

Schritt 3

Fügen Sie die Pfade zu allen Vorlagendateien, Farben und anderen Konfigurationen in Ihrer Datei tailwind.config.js hinzu.

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

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

Schritt 4

Fügen Sie die @tailwind -Direktiven für jede der Layers eines der Rückblenden in Ihre Haupt -CSS -Datei hinzu.

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

Schritt 5

Verwenden Sie die Komponenten in Ihrem HTML -Code!

 < 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 >

Das war's! Jetzt wissen Sie, wie Sie Rückenwindmaterial 3 verwenden, um Ihren UI -Entwicklungsprozess zu optimieren. Probieren Sie es aus und sehen Sie, wie es Ihnen helfen kann, Zeit und Mühe beim Aufbau wunderschöner und funktionaler Schnittstellen zu sparen. Wenn Sie Fragen oder Feedback haben, können Sie sich gerne an uns wenden. Happy Coding!