Arbeiten mit Tailwind in NextJS

In NextJS kann für die Gestaltung das CSS-Framework Tailwind verwendet werden, das oft zusammen mit React genutzt wird. Lassen Sie uns einen Blick darauf werfen, wie man es verwendet.

Für die Arbeit mit den Styles werden zwei Dateien benötigt: tailwind.config.js und postcss.config.js. Da bei der Installation des Projekts von uns der Punkt "Tailwind Styles verwenden" ausgewählt wurde, sind diese Dateien bereits in unserem Projekt generiert und befinden sich im Stammverzeichnis. Falls diese Dateien nicht vorhanden sind, müssen Sie Tailwind gemäß der offiziellen Dokumentation installieren.

Lassen Sie uns eine halbfette Schriftstärke und eine gelbe Textfarbe für den Absatz mit Hilfe der Tailwind-Styles hinzufügen. In Tailwind CSS bezeichnen die Zahlen, die in den Klassen für Farben verwendet werden, die Intensität oder den Farbton. Diese Zahlen variieren von 50 bis 900. Für den Text des Absatzes wählen wir einen mittleren Farbton:

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    text text text
  </p>;
}