Vorbereitungen für Tailwind v

Geschrieben von Oscar Jite-Orimiono✏️

Das Wort „Rückenwind“ bedeutet wörtlich, dass der Wind in die gleiche Richtung wie die Flugrichtung eines Flugzeugs oder Bootes weht. Es trägt dazu bei, dass sich ein Objekt schneller fortbewegt und sein Ziel schneller erreicht, wodurch Geschwindigkeit und Effizienz gewährleistet werden.

Tailwind CSS ist ein Utility-First-Framework, mit dem Sie „schnell moderne Websites erstellen können, ohne Ihren HTML-Code zu verlassen“. Es ist nicht jedermanns Sache, aber Tailwind CSS hat seit seiner Veröffentlichung im Jahr 2019 erheblich an Popularität gewonnen.

Heutzutage werden Sie Tailwind CSS wahrscheinlich neben etablierten Namen wie Bootstrap und Bulma finden, wenn Sie nach „Top [Nummer einfügen] CSS-Frameworks“ suchen.“

Dieser Artikel bietet eine Vorschau und eine ausführliche Analyse der nächsten Version, Tailwind v4.0. Wir behandeln Strategien für die Migration vorhandener Projekte und Beispiele, die die neuen Funktionen von Tailwind v4.0 demonstrieren. Wir werden es auch mit ähnlichen CSS-Frameworks vergleichen und die Vorteile und Einschränkungen der Verwendung dieses Frameworks untersuchen.

Erste Schritte mit Tailwind v4.0

Tailwind v4.0 befindet sich seit mehreren Monaten in der Entwicklung und die erste öffentliche Betaversion wurde im November 2024 veröffentlicht.

Ausführlichere Informationen finden Sie in der Vorabversionsdokumentation. In diesem Leitfaden werden jedoch einige der vielen neuen und aufregenden Funktionen hervorgehoben, auf die sich Entwickler in Tailwind CSS v4.0 freuen können

Neuer Leistungsmotor

Das Tailwind-Team kündigte im März 2024 eine neue Performance-Engine an, Tailwind Oxide. Zu den Vorteilen gehören eine einheitliche Toolchain und eine vereinfachte Konfiguration, um den Build-Prozess zu beschleunigen.

CSS-First-Konfiguration

Mit der aktuellen Tailwind-Version können Sie mit der Datei tailwind.config.js die Standard-Design-Tokens von Tailwind überschreiben. Es handelt sich um einen Anpassungs-Hub, in dem Sie benutzerdefinierte Dienstprogrammklassen und -themen hinzufügen, Plugins deaktivieren und vieles mehr können.

Seine wichtigste Funktion besteht darin, die Inhaltsquellen für Ihr Projekt zu definieren, damit Tailwind nach relevanten Utility-Klassennamen suchen und die richtige Ausgabe erzeugen kann.

Hier ist der Standardcode für die Datei tailwind.config.js beim Einrichten eines neuen Projekts mit Tailwind v3:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Direktiven entfernt

Nach dem Einrichten der Konfigurationsdatei bestand der nächste Schritt darin, die Tailwind-Anweisungen zur Datei index.css hinzuzufügen.

Dies sind die Anweisungen in Tailwind v3:

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

In Tailwind v4 benötigen Sie keine tailwind.config.js-Datei und keine @tailwind-Anweisungen. Sie müssen nur „tailwindcss“ in Ihre Haupt-CSS-Datei importieren und schon kann es losgehen:

@import "tailwindcss";

Dies reduziert die Anzahl der Schritte beim Einrichten eines neuen Projekts und die Anzahl der Dateien.

Sie können weiterhin eine JS-Konfigurationsdatei verwenden, wenn Sie beispielsweise bereits ein v3-Projekt haben, indem Sie die neue @config-Direktive verwenden, um sie in Ihre CSS-Datei zu laden:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Allerdings werden wahrscheinlich nicht alle Funktionen wie „corePlugins“, „wichtig“ und „separator“ in der vollständigen Version 4.0 unterstützt. Einige Optionen, wie z. B. die Liste sicherer Adressen, können mit Verhaltensänderungen zurückkehren.

Quellenerkennung

Wenn es Dateien gibt, die Sie nicht einschließen möchten, können Sie beim Importieren von Tailwind die Funktion source() verwenden, um die automatische Erkennung einzuschränken:

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

Für zusätzliche Quellen, die Tailwind standardmäßig nicht erkennt, wie etwa alles in Ihrer .gitignore-Datei, können Sie sie mit der @source-Direktive hinzufügen:

@import "tailwindcss";

Sie können die Quellenerkennung auch vollständig deaktivieren:

@import "tailwindcss";

@config "../../tailwind.config.js";

Preflight deaktivieren

Sie können die einzelnen Ebenen importieren, die Sie für Ihr Projekt benötigen, und die Basisstile von Tailwind deaktivieren:

@import "tailwindcss" source("../src");

Anpassen von Themen

Der neue CSS-First-Ansatz erleichtert das Hinzufügen benutzerdefinierter Stile zu Ihrem Tailwind-Projekt. Jede Anpassung wird direkt zur Haupt-CSS-Datei anstelle einer JavaScript-Konfigurationsdatei hinzugefügt.

Wenn Sie beispielsweise neue Farben für ein benutzerdefiniertes Design in Tailwind CSS v3 konfigurieren möchten, müssen Sie die neuen Dienstprogrammklassen im Abschnitt „Theme“ der Datei tailwind.config.js definieren.

So würden Sie es in der JavaScript-Konfigurationsdatei machen:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

So würden Sie die Klassen zu Ihrer HTML-Datei hinzufügen:

@import "tailwindcss" source(none);

In diesem Beispiel sind die Dienstprogrammklassen bg-background, text-light und text-lilac.

In Tailwind CSS v4.0 konfigurieren Sie alle Ihre Anpassungen in CSS mit der neuen @theme-Direktive:

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

Die Utility-Klassen werden dann dem HTML hinzugefügt. Sie können verschiedene Schattierungen derselben Farbe wie die Standardfarben von Tailwind wählen:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

Wenn Sie es mit VS Code testen, wird die @import-Direktive möglicherweise als Fehler hervorgehoben, aber keine Sorge, es funktioniert einwandfrei.

Beachten Sie, dass die obigen Beispiele mit Tailwind CSS und React erstellt wurden, weshalb wir im HTML-Code „className“ und nicht „class“ haben. Die Dienstprogramme bleiben unabhängig vom Framework, mit dem Sie arbeiten, gleich.

Themenvariablen

Aus dem vorherigen Beispiel können Sie ersehen, dass CSS-Variablen das gesamte Theme-Styling in Tailwind v4.0 steuern:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In Version 4.0 können Sie einen bestimmten Theme-Namespace – also die Standarddienstprogramme für Farben, Schriftarten, Text und mehr – oder das gesamte Tailwind-Theme überschreiben und Ihr eigenes konfigurieren. Sie können den benutzerdefinierten Stil für praktisch jedes Tailwind-Dienstprogramm in der Haupt-CSS-Datei ganz einfach konfigurieren: Um das gesamte Standarddesign zu überschreiben, verwenden Sie --*: initial. Wenn Sie die Standardschriftart von Tailwind überschreiben und Ihre eigene definieren möchten, verwenden Sie --font-*: initial gefolgt von Ihrem benutzerdefinierten Stil:

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

In diesem Fall ist „font-display“ das einzige in Ihrem Projekt verfügbare Dienstprogramm zur Schriftartenfamilie.

Sie können den Standardstil für eine benutzerdefinierte Eigenschaft mithilfe von Doppelstrichen festlegen. Hier ist eine Seite mit der standardmäßigen CSS-Schriftart und dem Textstil von Tailwind: Hier ist das HTML-Markup für diese Seite:

@import "tailwindcss";

Wir verwenden die benutzerdefinierten Farben aus dem vorherigen Beispiel und konfigurieren neue Schriftarten und Textstile:

@import "tailwindcss";

@config "../../tailwind.config.js";

In diesem Beispiel importieren wir zwei Schriftarten und speichern sie unter den Variablen --font-display und --font-logo, um sie für das Logo und den h1-Header zu verwenden. Wir konfigurieren außerdem neue Textgrößen und Standardformate für beide.

Wenn Sie also das Textlogo der Utility-Klasse in Ihren HTML-Code einfügen, hat das Element standardmäßig eine Schriftgröße von 1,5rem und eine Schriftstärke von 700. Ebenso hat jedes Element mit dem Klassennamen text-big standardmäßig eine Schriftgröße von 6rem, eine Schriftstärke von 700 und einen Buchstabenabstand von -0,025em.

Jetzt fügen wir die neuen Utility-Klassen in die HTML-Datei ein:

@import "tailwindcss" source("../src");

Hier ist ein Screenshot der Seite mit dem benutzerdefinierten Stil: In Tailwind v4.0 besteht eine geringere Abhängigkeit von den Standardwerten von Tailwind, da mehrere Klassen durch ein benutzerdefiniertes Dienstprogramm ersetzt werden können. In unserem Beispiel ersetzt der Klassenname text-big die Dienstprogrammklassen text-5xl und text-bold für den h1-Header.

Auch dies ist nicht auf bestimmte Namespaces beschränkt – Sie können dies mit jedem Dienstprogramm tun.

Vereinfachte Theme-Konfiguration

Einige Dienstprogramme basieren nicht mehr auf Ihrer Designkonfiguration in Tailwind v4.0. Sie können ohne zusätzliche Konfiguration direkt in Ihrer HTML-Datei genau angeben, was Sie möchten.

In Tailwind v3 müssten Sie die Anzahl der Spalten in Ihrer tailwind.config.js-Datei definieren, aber in Tailwind v4.0 können Sie eine beliebige Zahl von so klein wie „grid-cols-5“ bis so groß wie verwenden Grid-cols-73. Dies gilt auch für die Z-Index-Dienstprogramme (z. B. z-40) und opacity-*.

Tailwind v4.0 bietet auch integrierte Unterstützung für Varianten wie data-*. Sie können sie ohne beliebige Werte verwenden.

Der Hauptvorteil dieser Änderungen besteht darin, dass Entwickler weniger Zeit mit der Konfiguration nicht wesentlicher oder nicht zum Kern gehörender Design-Tokens verbringen können.

Dynamische Abstandsskala

Abstandsdienstprogramme wie m-*, w-*, mt-*, px-* und mehr werden dynamisch mit einem Basisabstandswert von 0,25rem generiert, der in der Standardversion von Tailwind v4 definiert ist. 0 Thema.

Jedes Vielfache des Basisabstandswertes ist in der Abstandsskala verfügbar. Wenn also mt-1 0,25rem beträgt, ist mt-2 0,25rem multipliziert mit zwei, also 0,5rem, und mt-21 beträgt 5,25rem:

Sie können Abstandsdienstprogramme mit Werten verwenden, die nicht explizit definiert sind. In Tailwind v3 müssten Sie einen beliebigen Wert wie mt-[5.25rem] oder ein benutzerdefiniertes Design verwenden. Es ist keine zusätzliche Konfiguration erforderlich und Sie können konsistentere Designs erstellen.

Wenn Sie die verfügbaren Abstandswerte einschränken möchten, können Sie die Standardvariable deaktivieren und einen benutzerdefinierten Maßstab definieren:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Mit diesem Setup verwendet jedes Tailwind-Abstandsdienstprogramm nur die speziell definierten Werte.

Aktualisierte Farbpalette

Tailwind v4 wechselt von der Standard-RGB-Farbpalette zu OKLCH, was lebendigere Farben ermöglicht und weniger Einschränkungen als RGB aufweist:

Unterstützung für Containerabfragen

Containerabfragen verfügen jetzt über eine integrierte Unterstützung in Tailwind CSS v4.0; Sie benötigen das Plugin @tailwindcss/container-queries nicht, um responsive Container zu erstellen.

Containerabfragen werden verwendet, um ein Element basierend auf der Größe seines übergeordneten Containers zu formatieren. Das bedeutet, dass sich das Layout Ihrer Website an einzelne Komponenten und nicht an das gesamte Ansichtsfenster anpasst.

In v4.0 erstellen Sie Containerabfragen, indem Sie das Dienstprogramm @container zu einem übergeordneten Element hinzufügen. Für die untergeordneten Elemente verwenden Sie reaktionsfähige Dienstprogramme wie @sm und @lg, um das Styling basierend auf der Größe des übergeordneten Elements anzuwenden:

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

Tailwind v4.0 führt außerdem eine neue @max-*-Variante für Containerabfragen mit maximaler Breite ein. Dies erleichtert das Hinzufügen von Styling, wenn der Behälter eine bestimmte Größe unterschreitet. Sie können @min-* und @max-* kombinieren, um Container-Abfragebereiche zu definieren:

@import "tailwindcss";

In diesem Code wird das untergeordnete Div ausgeblendet, wenn die Breite des übergeordneten Containers zwischen md und xl (768px und 1280px) liegt.

Zu den Anwendungsfällen für Containerabfragen gehören Navigation, Seitenleisten, Karten, Bildergalerien und responsiver Text. Sie bieten außerdem mehr Flexibilität und werden von allen Browsern gut unterstützt, sodass Sie sie in Ihren v4.0-Projekten verwenden können.

Migration von v3 zu Tailwind CSS v4.0

Wenn Sie ein V3-Projekt auf V4 aktualisieren möchten, hat Tailwind ein Upgrade-Tool bereitgestellt, das den Großteil der Arbeit für Sie erledigt. Um Ihr Projekt zu aktualisieren, führen Sie den folgenden Befehl aus:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Das Upgrade-Tool automatisiert verschiedene Aufgaben wie das Aktualisieren von Abhängigkeiten, das Migrieren Ihrer JS-Konfigurationsdatei zu CSS und das Bearbeiten von Änderungen in Ihren Vorlagendateien.

Tailwind empfiehlt, für das Upgrade einen neuen Zweig zu verwenden, um Ihren Hauptzweig intakt zu halten, und das Diff sorgfältig zu überprüfen. Das Ausführen eines Git-Diff-Befehls hilft Ihnen, die Änderungen in Ihrem Projekt zu sehen und zu verstehen. Sie möchten Ihr Projekt auch in einem Browser testen, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Bei komplexen Projekten müssen Sie möglicherweise manuelle Anpassungen vornehmen. Tailwind hat die wichtigsten Änderungen und deren Anpassung dargelegt, die wir im Folgenden behandeln.

Abhängigkeitsänderungen

PostCSS-Plugin: In Version 4.0 ist das PostCSS-Plugin jetzt als spezielles Paket verfügbar, @tailwindcss/postcss. Sie können postcss-import und auto-prefixer aus der Datei postcss.config.mjs in Ihrem bestehenden Projekt entfernen:

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

Wenn Sie ein neues Projekt starten, können Sie Tailwind jetzt zusammen mit dem PostCSS-Plugin installieren, indem Sie den folgenden Befehl ausführen:

@import "tailwindcss";

Vite-Plugin: Tailwind CSS v4.0 verfügt außerdem über ein neues dediziertes Vite-Plugin, zu dem Sie die Migration vom PostCSS-Plugin empfehlen:

@import "tailwindcss";

@config "../../tailwind.config.js";

Wie wir bei PostCSS gesehen haben, können Sie v4.0 zusammen mit dem Vite-Plugin installieren, wenn Sie ein neues Projekt einrichten:

@import "tailwindcss" source("../src");

Tailwind CLI: Die Verwendung des CLI-Tools ist die einfachste und schnellste Möglichkeit, Tailwind CSS einzurichten, und es befindet sich jetzt in einem dedizierten @tailwind/cli-Paket. Sie müssen Ihre Build-Befehle entsprechend aktualisieren:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Veraltete Dienstprogramme

Mehrere veraltete oder nicht dokumentierte Dienstprogramme wurden entfernt und durch moderne Alternativen ersetzt:

Konfigurieren des Container-Dienstprogramms

In v4.0 konfigurieren Sie das Container-Dienstprogramm mit @utility:

@import "tailwindcss" source(none);

Konfigurationsoptionen wie Mitte und Polsterung gibt es in Version 4.0 nicht.

Standardmaßstabsänderungen

An jedem Dienstprogramm für Schatten, Unschärfe und Rahmenradius wurden standardmäßige Skalierungsanpassungen vorgenommen, um sicherzustellen, dass sie einen benannten Wert haben: Sie müssten jedes Dienstprogramm in Ihrem Projekt ersetzen, um sicherzustellen, dass dies nicht der Fall ist anders aussehen.

Standardmäßige Änderung der Rahmenfarbe

In v3 ist die Standardrahmenfarbe Grau-200. Bei Verwendung des Rahmendienstprogramms mussten Sie keine explizite Farbe festlegen:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In Tailwind CSS v4 wird die Rahmenfarbe auf „currentColor“ aktualisiert und Ihr aktuelles Projekt kann eine visuelle Änderung erfahren, wenn Sie an keiner Stelle, an der Sie das Rahmendienstprogramm verwenden, eine Farbe angeben.

Hier ist die Standardrahmenfarbe in Version 4.0: Um das Standardverhalten von Version 3 beizubehalten, können Sie die folgenden CSS-Zeilen zu Ihrem Projekt hinzufügen:

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

Änderung der Standardringbreite

Das Ring-Dienstprogramm fügt in Version 3 einen 3-Pixel-Ring hinzu, in Version 4 ist er jedoch standardmäßig auf 1 Pixel eingestellt. Ersetzen Sie jede Verwendung des Ring-Dienstprogramms durch ring-3, wenn Sie Ihr Projekt aktualisieren, um sein Erscheinungsbild beizubehalten.

Änderung des Standardplatzhalters

In v4 verwendet Platzhaltertext standardmäßig die aktuelle Textfarbe mit 50 % Deckkraft. In Version 3 wird die Farbe Gray-400 verwendet. Wenn Sie dieses Verhalten beibehalten möchten, fügen Sie Folgendes zu Ihrem CSS hinzu:

@import "tailwindcss";

Gliederungsänderungen

Außerdem fügt das Dienstprogramm „outline-none“ in Version 4 keine transparente 2-Pixel-Kontur hinzu, wie dies in Version 3 der Fall ist. In Version 4 gibt es ein neues Outline-Hidden-Dienstprogramm, das sich wie „Outline-None“ aus Version 3 verhält.

Wenn Sie Ihr Projekt aktualisieren, müssen Sie „outline-none“ durch „outline-hidden“ ersetzen, um den aktuellen Status beizubehalten, es sei denn, Sie möchten die Gliederung vollständig entfernen.

Hinzufügen benutzerdefinierter Dienstprogramme

Benutzerdefinierte Dienstprogramme funktionieren jetzt mit der neuen @utility-API anstelle des @layer-Dienstprogramms. Diese Änderung stellt die Kompatibilität mit nativen Kaskadenschichten sicher.

Es sind jetzt nur noch Einzelklassennamen und keine komplexen Selektoren mehr:

@import "tailwindcss";

@config "../../tailwind.config.js";

Reihenfolgeabhängige Varianten stapeln

Tailwind v4.0 stapelt Varianten wie „erste“ und „letzte“ von links nach rechts, sodass Sie die Varianten in Ihrem Projekt ordnen müssen.

CSS-Variablen in beliebigen Werten

Die Syntax für Variablen in beliebigen Werten wurde von eckigen Klammern auf Klammern geändert, um Mehrdeutigkeiten mit neuen CSS-Standards zu vermeiden. Sie müssen dies in Ihrem Projekt aktualisieren:

@import "tailwindcss" source("../src");

Verwendung der theme()-Funktion

Tailwind CSS v4.0 generiert Variablen für alle Theme-Werte, sodass die theme()-Funktion nicht erforderlich ist. Tailwind empfiehlt, alle theme()-Funktionen in Ihrem Projekt nach Möglichkeit durch CSS-Variablen zu ersetzen:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Weitere Informationen zu den Änderungen in Tailwind v4.0 finden Sie in der Vorabversionsdokumentation.

Rückenwind und alternative CSS-Frameworks

Die offensichtlichste Alternative zu Tailwind CSS ist Bootstrap, das beliebteste CSS-Framework der Welt. Es verfügt über eine umfangreiche Bibliothek vordefinierter Komponenten.

Bootstrap ist vielleicht einsteigerfreundlicher als Tailwind CSS. Sie können gebrauchsfertige Komponenten mit spezifischen und einfachen Klassennamen erstellen. Tailwind erfordert, dass Sie die Dienstprogramme und die ihnen zugrunde liegenden CSS-Regeln verstehen.

Ein weiterer Vorteil von Bootstrap gegenüber Tailwind CSS besteht darin, dass es standardmäßig JavaScript enthält, sodass Sie mehr Backend-Aufgaben erledigen können. Tailwind CSS muss mit JS-Frameworks kombiniert werden.

Bootstrap ist jedoch nicht so anpassbar oder flexibel wie Tailwind CSS. Ein langjähriges Argument ist, dass alle Bootstrap-Sites gleich aussehen. Mit seinem Utility-First-Ansatz bietet Tailwind mehr Flexibilität und Kontrolle.

Nachteile von Tailwind CSS

In den letzten Jahren sind weitere Utility-First-CSS-Frameworks aufgetaucht, wie Missing.css und Mojo CSS. Keinem konnte Tailwind die Krone streitig machen, aber das heißt nicht, dass es nicht ohne einige Einschränkungen ist:

Steile Lernkurve: Wie bereits erwähnt, kann es für Anfänger schwierig sein, den Utility-First-Ansatz und die große Anzahl an Kursen zu erlernen.

Lesbarkeit des Codes: Da Sie hauptsächlich in Ihrer HTML-Datei arbeiten, kann es schwierig werden, den Code zu lesen, da jedes Element Dienstprogramme ansammelt.

Inkonsistentes Design: Die Flexibilität von Tailwind CSS kann zu inkonsistenten Designs im gesamten Projekt führen, wenn Sie nicht aufmerksam sind.

Frameworks wechseln: Projekte können eng mit Tailwind CSS verknüpft werden, was den Wechsel zu einem anderen Framework erschwert.

Übergang zu Tailwind CSS v4.0

Das Upgrade Ihrer bestehenden Projekte auf die neue Version von Tailwind scheint eine schwierige Aufgabe zu sein, und das trifft zu, wenn Sie ein komplexes Projekt haben, aber die Vorteile sind es wert. Tailwind macht alles schneller und einfacher, indem es zusätzliche Tools und Dateien entfernt und eine klarere Syntax bietet.

---

Belastet Ihr Frontend die CPU Ihrer Benutzer?

Da Web-Frontends immer komplexer werden, fordern ressourcenintensive Funktionen immer mehr vom Browser. Wenn Sie daran interessiert sind, die clientseitige CPU-Nutzung, Speichernutzung und mehr für alle Ihre Benutzer in der Produktion zu überwachen und zu verfolgen, probieren Sie LogRocket aus.

LogRocket ist wie ein DVR für Web- und mobile Apps und zeichnet alles auf, was in Ihrer Web-App, mobilen App oder Website passiert. Anstatt zu erraten, warum Probleme auftreten, können Sie wichtige Frontend-Leistungsmetriken zusammenfassen und darüber berichten, Benutzersitzungen zusammen mit dem Anwendungsstatus wiedergeben, Netzwerkanfragen protokollieren und alle Fehler automatisch aufdecken.

Modernisieren Sie die Art und Weise, wie Sie Web- und mobile Apps debuggen – beginnen Sie mit der kostenlosen Überwachung.

Das obige ist der detaillierte Inhalt vonVorbereitungen für Tailwind v. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!