Typen für die Tailwind-CSS-Konfiguration

Verwendung von Typescript-Typen für Tailwind-CSS

Verwenden von Typescript für die Tailwind-CSS-Konfiguration

Tailwind wird mit Typen für seine Konfigurationsdatei ausgeliefert. Um sie zu verwenden, müssen Sie nur die folgenden zwei einfachen Schritte ausführen.

Aktualisieren Sie auf Tailwind-CSS 3.1 oder höher

Die erste Anforderung besteht darin, Ihre Tailwind-CSS-Abhängigkeit auf mindestens Version 3.1 zu aktualisieren, da dies die Version ist, die mit der Auslieferung von Typen begonnen hat.

Aktualisieren Sie Ihre Konfigurationsdatei

Der zweite und letzte Schritt besteht darin, Ihrer exportierten Konfiguration einen einzelnen speziellen Kommentar hinzuzufügen, der als „Typanmerkung“ bezeichnet wird. Ein großartiges Feature von Typescript ist, dass es sogar in Javascript-Dateien verwendet werden kann. Solange auf ein Modul verwiesen werden kann, das die Typen enthält, kann Ihre IDE diese Metadaten für die automatische Vervollständigung der Typprüfung verwenden.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // The source of your files, e.g. "./src/**/*.{html,js,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Und mit diesen kleinen Änderungen haben Sie jetzt erstklassige Typunterstützung für Ihre Tailwind-CSS-Konfiguration.