Tailwind ist ein CSS-Framework, das eine Reihe vordefinierter Werte für verschiedene Eigenschaften wie Farben, Abstände, Schriftgrößen usw. bietet. Manchmal möchten Benutzer jedoch möglicherweise einen Wert verwenden, der nicht in der Standardkonfiguration enthalten ist, beispielsweise einen benutzerdefinierten Farbe oder einen bestimmten Rand. In dieser Situation können sie beliebige Werte verwenden.

In diesem Artikel wird die Methode zur Verwendung beliebiger Werte in Tailwind CSS erläutert.

Wie nutzt man willkürliche Werte im Rückenwind?

Beliebige Werte sind benutzerdefinierte Werte, die direkt in das HTML-Klassenattribut geschrieben werden können, ohne sie in der Tailwind-Konfigurationsdatei zu definieren. Ihnen wird eine Notation in eckigen Klammern vorangestellt, beispielsweise [24px], [2.5rem] usw. Um die willkürlichen Werte in Tailwind zu verwenden, verwenden Sie eine Notation in eckigen Klammern und geben Sie einen beliebigen benutzerdefinierten Wert an, um Dienstprogrammklassen dynamisch zu generieren.

Sehen Sie sich zum besseren Verständnis die unten aufgeführten Schritte an:

Schritt 1: Beliebige Werte im HTML-Programm verwenden

Erstellen Sie ein HTML-Programm und verwenden Sie die eckige Klammernotation mit einem beliebigen benutzerdefinierten Wert, um die gewünschten Klassen zu erstellen. Wir haben zum Beispiel das verwendet „bg-[#e9e516]“, „w-[600px]“, „h-[400px]“, „p-[13px]“, und andere Klassen:

Hier:

• „bg-[#e9e516]“ Die Klasse legt die Hintergrundfarbe des
  fest „#e9e516“ (Gelb).
• „w-[600px]“ Die Klasse legt die Breite des
  auf 600 Pixel fest.
• „h-[400px]“ Die Klasse wendet die Höhe von 400 Pixel auf das
  -Element an.
• „p-[13px]“ Die Klasse legt den Abstand des
  auf 13 Pixel fest.
• „m-[19px]“ Die Klasse legt den Rand des
  auf 19 Pixel fest.

• „text-[30px]“ Die Klasse legt die Schriftgröße des

  -Elements auf 30 Pixel fest.

• „text-[#7405ab]“ Die Klasse hat die Textfarbe des Elements

  auf Lila gesetzt (#7405ab).

• „tracking-[0.5rem]“ Die Klasse wendet den Buchstabenabstand auf 0,5 rem auf das

  -Element an.

Schritt 2: Ausgabe überprüfen

Um sicherzustellen, dass die willkürlichen Werte ordnungsgemäß funktionieren, sehen Sie sich die HTML-Webseite an:

Die obige Ausgabe zeigt an, dass die willkürlichen Werte ordnungsgemäß funktionieren, wie sie definiert wurden.

Abschluss

Um die willkürlichen Werte in Tailwind zu nutzen, verwenden Sie eine eckige Klammernotation mit einem beliebigen benutzerdefinierten Wert im HTML-Programm, um Klassen dynamisch zu generieren. Benutzer können Werte für jede Eigenschaft verwenden, die einen numerischen oder Farbwert akzeptiert, z. B. Schriftgröße, Farbe, Breite, Höhe, Rand, Abstand usw. In diesem Artikel wurde die Methode zur Verwendung beliebiger Werte in Tailwind CSS erläutert.