Zum Hauptinhalt springen

Tailwind CSS

Tailwind CSS ist ein Utility-First-CSS-Framework, das eine schnelle UI-Entwicklung ermöglicht, indem es einen umfassenden Satz von Utility-Klassen bereitstellt. Es erlaubt Ihnen, individuelle Designs direkt in Ihrem HTML-Markup zu erstellen, was es unglaublich vielseitig und effizient macht.

Weitere Informationen zu Tailwind CSS finden Sie auf der Tailwind CSS-Website (tailwindcss.com/).

Beispiele für Tailwind CSS im Widget Builder​

Erkunden Sie einige praktische Beispiele unten, um zu sehen, wie Tailwind CSS verwendet werden kann, um einfache und effektive Widgets im Widget Builder zu erstellen.

Sie können die Code-Beispiele kopieren und direkt im Widget Builder verwenden. Fügen Sie dazu einfach den Beispielcode in den HTML-Editor des Widget Builders im Layout-Tab ein und passen Sie ihn an Ihre Bedürfnisse an.

Beispiel 1: Responsives Layout​

<div class="flex justify-center items-center h-32 bg-gray-200">
  <p class="text-xl text-blue-500">Hello, World!</p>
</div>

Beispiel 2: Button-Stile​

<button
  class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
>
  Click Me
</button>

Beispiel 3: Karten-Komponente​

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-blue-100 m-4">
  <img
    class="w-full block"
    src="https://docs.widgetbuilder.de/img/wb-home.png"
    alt="Card Image"
  />
  <div class="px-6 py-4 border-x-0 border-y-4 border-solid border-white/25">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">
      This is the content of the card. Replace it with your own text or
      components.
    </p>
  </div>
</div>

Beispiel 4: Responsives Grid​

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-yellow-200 p-4">3</div>
  <div class="bg-purple-200 p-4">4</div>
  <div class="bg-red-200 p-4">5</div>
</div>

Beispiel 5: Warnmeldung​

<div
  class="bg-yellow-100 border-solid border-t-0 border-r-0 border-l-4 border-b-0 border-yellow-500 text-yellow-700 px-4 py-1 rounded-r-lg m-4"
  role="alert"
>
  <p class="font-bold">Warning!</p>
  <p>There was an issue with your submission.</p>
</div>

Nächste Schritte​

Diese Beispiele zeigen, wie Tailwind CSS-Klassen direkt in das HTML Ihres Widgets eingebunden werden können, um responsive Layouts, gestaltete Buttons, Karten-Komponenten, responsive Grids und Warnmeldungen zu realisieren. Experimentieren Sie mit diesen Beispielen, um Ihre Widgets mühelos anzupassen und zu verbessern.

Um die in den Beispielen verwendeten Tailwind CSS-Utility-Klassen besser zu verstehen, lesen Sie die Tailwind CSS-Dokumentation (tailwindcss.com/docs/). Ein guter Einstiegspunkt sind die Kernkonzepte im Abschnitt Utility-First Fundamentals (https://tailwindcss.com/docs/utility-first).

tipp

Eine weitere hilfreiche Ressource ist das Tailwind CSS Cheat Sheet (nerdcave.com/tailwind-cheat-sheet).

Hilfreiche Tipps​

Eigene CSS-Klassen verwenden​

Sie können auch eigene CSS-Klassen definieren, um das Erscheinungsbild Ihrer Widgets weiter anzupassen. Fügen Sie einfach ein <style>-Tag im HTML-Editor des Widget Builders hinzu und definieren Sie Ihre eigenen CSS-Klassen.

<style>
  .my-class {
    padding: 8px;
    margin: 12px;
    border: 1px solid red;
    text-align: center;
  }
</style>

<div class="my-class">Custom CSS Class</div>

Automatische Bildvorschau verhindern​

Um zu verhindern, dass Bilder beim Klicken automatisch in einer Vollbildvorschau geöffnet werden, fügen Sie die Klasse no-fullscreen-preview zum Bild-Element hinzu.

<img class="no-fullscreen-preview" src="..." />