Ein Bootstrap-Benutzerhandbuch für den Einstieg in Tailwind CSS

Hallo zusammen! ? Wenn Sie ein langjähriger Bootstrap-Benutzer sind und neugierig auf den Umstieg auf Tailwind CSS sind, ist dieser Leitfaden genau das Richtige für Sie. Tailwind ist ein Utility-First-CSS-Framework, das im Vergleich zur komponentenbasierten Struktur von Bootstrap einen völlig anderen Ansatz bietet. Sehen wir uns an, wie Sie als Bootstrap-Benutzer ganz einfach mit Tailwind starten können!

Diese verbesserte Version stellt sicher, dass alle Codeblöcke richtig formatiert und eingerückt sind, wodurch die Anleitung einfacher zu lesen und zu befolgen ist.

? Warum Tailwind CSS?

Bevor Sie mit dem Tutorial beginnen, finden Sie hier einen kurzen Vergleich zwischen Bootstrap und Tailwind:

• Bootstrap: Ein komponentenbasiertes Framework, das vorgefertigte UI-Komponenten mit eigenwilligem Design bereitstellt.
• Tailwind: Ein Utility-First-Framework, das es Ihnen ermöglicht, Komponenten mit Low-Level-Utility-Klassen zu gestalten und so mehr Flexibilität und Kontrolle zu bieten.

Tailwind glänzt, wenn Sie ein hochgradig individuelles Design benötigen, aber es kann sich ungewohnt anfühlen, wenn Sie an Bootstrap gewöhnt sind. Also lassen Sie es uns Schritt für Schritt aufschlüsseln.

1. Rückenwind in einem Projekt einrichten

Schritt 1: Tailwind CSS installieren

Um Tailwind CSS verwenden zu können, müssen Sie es in Ihrem Projekt installieren. Befolgen Sie diese Schritte:

• Tailwind über npm installieren:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

• Richten Sie in Ihrer tailwind.config.js-Datei das Inhaltsarray ein, um sicherzustellen, dass Tailwind Ihr Projekt nach Klassen durchsucht:

  module.exports = {
    content: [
      './public/**/*.html',
      './src/**/*.{html,js}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

Schritt 2: Erstellen Sie Ihre CSS-Datei

Erstellen Sie nun in Ihrem Projekt eine Datei „styles.css“ mit den folgenden Tailwind-Anweisungen:

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

Schritt 3: Integrieren Sie Tailwind in Ihren HTML-Code

Verknüpfen Sie in Ihren HTML-Dateien die generierte CSS-Datei:

Jetzt können Sie Tailwind in Ihrem Projekt verwenden!

2. Die Tailwind-Philosophie verstehen

Wenn Sie an Bootstraps Klassen wie .container, .row und .col-6 gewöhnt sind, könnte sich der Wechsel zu Tailwind wie eine große Veränderung anfühlen. In Bootstrap werden Layout- und Designentscheidungen in Komponenten abstrahiert, während Sie in Tailwind mithilfe von Utility-Klassen die volle Kontrolle über das Design haben.

Beispiel: Erstellen eines Rasterlayouts

Bootstrap:

  

    
Column 1
    
Column 2
  

Rückenwind:

  
Column 1
  
Column 2

In Tailwind ersetzen die Klassen „grid“ und „grid-cols-2“ das Zeilen- und Spaltensystem von Bootstrap. Die Gap-4-Klasse fügt den Abstand zwischen den Rasterelementen hinzu, und Sie können alles nach Bedarf anpassen, indem Sie die Utility-Klassen optimieren.

3. Typografie und Abstände mit Tailwind

Ein wesentlicher Unterschied zwischen Bootstrap und Tailwind besteht darin, wie Typografie und Abstände gehandhabt werden.

Beispiel: Hinzufügen von Typografie und Innenabstand

Bootstrap:

Hello, Bootstrap!
This is a lead paragraph.
Click Me

Rückenwind:

Hello, Tailwind!
This is a lead paragraph.
Click Me

In Tailwind gibt es keine vordefinierten Schaltflächen- oder Überschriftenstile. Stattdessen wenden Sie direkt Utility-Klassen (text-4xl, bg-blue-500, px-4 usw.) an, um Ihr Design genau so zu erstellen, wie Sie es möchten.

4. Responsives Design

Eine Sache, die Bootstrap-Benutzer lieben, ist das reaktionsfähige Grid-System. Tailwind verfügt auch über großartige responsive Dienstprogramme, aber anstatt sich auf vordefinierte Haltepunkte zu verlassen, können Sie Stile für verschiedene Bildschirmgrößen mithilfe der responsiven Präfixe von Tailwind steuern.

Beispiel: Ein Element responsiv machen

Bootstrap:

Responsive Column

Rückenwind:

Responsive Column

In Tailwind stellt w-full sicher, dass das Element auf kleineren Bildschirmen die volle Breite einnimmt, und md:w-1/2 wendet die 50 %-Breite ab dem MD-Haltepunkt (mittlere Bildschirmgröße) an.

5. Tailwind anpassen

So wie Sie möglicherweise angepasste Bootstrap-Variablen haben, können Sie die Dienstprogrammklassen von Tailwind erweitern oder Ihr eigenes benutzerdefiniertes Designsystem erstellen. In Ihrer tailwind.config.js können Sie das Standardthema erweitern oder ändern:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

Mit dieser Konfiguration können Sie Ihre benutzerdefinierten Farben wie folgt verwenden:

Custom Button

6. Migration von Bootstrap-Komponenten zu Tailwind

Wenn Sie gängige Bootstrap-Komponenten (wie Schaltflächen, Navigationsleisten und Modalitäten) in Tailwind neu erstellen möchten, kommt es darauf an, die richtigen Dienstprogramme zu verwenden. Hier ein paar Beispiele:

Schaltflächenkomponente

Bootstrap:

Submit

Rückenwind:

  Submit

Navbar-Komponente

Bootstrap:

Rückenwind:

Durch das Erlernen der Utility-Klassen von Tailwind können Sie komplexe Komponenten mit größerer Flexibilität erstellen als die vorgefertigten Stile von Bootstrap.

7. Verwendung von Tailwind-Plugins

Tailwind verfügt über ein umfangreiches Ökosystem an Plugins, die seine Funktionalität erweitern. Sie können beispielsweise ganz einfach Formulare, Typografie oder Dienstprogramme für das Seitenverhältnis hinzufügen:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

In Ihrer tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. Steigen Sie mit Metronic 9 auf – dem All-in-One Tailwind UI Toolkit

Wenn Sie auf der Suche nach einem Tailwind-CSS-Erlebnis sind, das die Einfachheit und Vertrautheit von Bootstrap vereint, sind Sie bei Metronic 9 genau richtig!

Metronic 9 ist ein All-in-one-Tailwind-UI-Toolkit, das das Beste aus beiden Welten vereint: die Utility-First-Leistung von Tailwind CSS, gepaart mit dem strukturierten und komponentengesteuerten Ansatz, den Sie von Bootstrap kennen.

Warum sollten Sie Metronic 9 für Ihre Tailwind-Projekte wählen?

• Beliebt und vertrauenswürdig: Metronic wurde 2013 veröffentlicht und wurde mit 115.000 Verkäufen und 8.000 5-Sterne-Bewertungen zur führenden Admin-Dashboard-Vorlage auf dem Envato-Markt, die über 3.000 SaaS-Projekte weltweit unterstützt.

• Vorgefertigte Komponenten: Genau wie Bootstrap verfügt Metronic 9 über Hunderte gebrauchsfertiger Komponenten wie Schaltflächen, Navigationsleisten, Modalitäten, Formulare und mehr – alle unterstützt von Tailwind CSS-Dienstprogrammen. Dadurch können Sie schnell moderne, reaktionsfähige Benutzeroberflächen erstellen, ohne benutzerdefinierte Stile von Grund auf neu schreiben zu müssen.

• Tailwind Bootstrap Experience: Sie erhalten die Flexibilität von Tailwind mit dem strukturierten Gefühl von Bootstrap. Ganz gleich, ob Sie von Bootstrap migrieren oder neu anfangen, der Lernaufwand ist minimal.

• Mehrere Layouts: Mit über 5 App-Layout-Demos und 1000 UI-Elementen können Sie mit Metronic 9 schnell und einfach komplexe Anwendungen erstellen, egal ob Sie an einem SaaS-Dashboard, Admin-Panel oder einer allgemeinen Web-App arbeiten.

• Nahtlose Integration: Metronic 9 lässt sich perfekt in moderne Frameworks wie React, Next.js und Angular integrieren und verschafft Ihnen mit einer Bootstrap-ähnlichen Benutzerfreundlichkeit einen Vorsprung auf Ihrer Tailwind-Reise.

Starten Sie noch heute mit Metronic 9!

Wenn Sie von Bootstrap wechseln und eine vertraute, funktionsreiche Umgebung für die Arbeit mit Tailwind wünschen, ist Metronic 9 die perfekte Lösung. Es wurde entwickelt, um Ihnen Zeit und Mühe zu sparen und Ihnen die Möglichkeit zu geben, sich auf die Entwicklung großartiger Produkte zu konzentrieren, ohne sich mit Designdetails zu beschäftigen.

? Schauen Sie sich Metronic 9 hier an und beginnen Sie mit der Erstellung wunderschöner Benutzeroberflächen mit der Flexibilität von Tailwind und der Einfachheit von Bootstrap!

9. Fazit: Ist Tailwind die richtige Wahl für Sie?

Wenn Sie nach mehr Individualisierung und Kontrolle über Ihr Design suchen, ohne durch vorgefertigte Komponenten eingeschränkt zu sein,
Tailwind CSS ist eine gute Wahl. Wenn Sie an Bootstrap gewöhnt sind, kann es einige Zeit dauern, sich daran zu gewöhnen, aber sobald Sie sich mit dem Utility-First-Ansatz vertraut gemacht haben, sind die Möglichkeiten endlos!

Stellen Sie gerne Fragen oder teilen Sie Ihre Erfahrungen in den Kommentaren unten. Viel Spaß beim Codieren! ?