Einführung

Tailwind CSS ist ein beliebtes Utility-First-CSS-Framework, das Low-Level-Utility-Klassen bereitstellt, um Stile direkt im Markup anzuwenden, was zu schnelleren Entwicklungszyklen führt.

Prettier hingegen ist ein weit verbreiteter Codeformatierer, der sicherstellt, dass Ihr Code konsistent formatiert ist, indem er ihn analysiert und mit seinen eigenen Regeln erneut druckt. Dies trägt dazu bei, im gesamten Projekt einen einheitlichen Codestil aufrechtzuerhalten, wodurch die Codebasis sauberer und leichter lesbar wird.

Eine häufige Herausforderung bei der Verwendung von Tailwind CSS ist die Verwaltung der Reihenfolge der Dienstprogrammklassen, insbesondere wenn die Komplexität Ihrer Stile und Ihres HTML zunimmt. Das manuelle Sortieren dieser Klassen kann mühsam und fehleranfällig sein. Hier kommt die automatische Klassensortierung ins Spiel. Durch die Nutzung von Tools wie Prettier zusammen mit Plugins wie prettier-plugin-tailwindcss können wir die Sortierung von Tailwind-CSS-Klassen automatisieren, eine konsistente Reihenfolge sicherstellen und die Lesbarkeit und Wartbarkeit von Klassen verbessern.

Der Zweck dieses Artikels besteht darin, Sie durch den Prozess der Einrichtung der automatischen Klassensortierung von Tailwind CSS mit Prettier in neuen und bestehenden Projekten zu führen. Unabhängig davon, ob Sie ein neues Projekt starten oder in ein laufendes Projekt integrieren, bietet Ihnen dieser umfassende Leitfaden Schritt-für-Schritt-Anleitungen.

Inhaltsverzeichnis

• Einrichten von Tailwind CSS und Prettier in einem neuen Projekt
  • Projekt initialisieren und Tailwind CSS installieren
  • Prettier installieren und konfigurieren
• Einrichten von prettier-plugin-tailwindcss in einem vorhandenen Tailwind-CSS-Projekt
• Abschluss

Einrichten von Tailwind CSS und Prettier in einem neuen Projekt

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes installiert haben:

• Node.js
• Ein Paketmanager (wir werden bun für dieses Projekt verwenden, Sie können aber auch npm, Yarn oder pnpm verwenden, wenn Sie es vorziehen)
• Ein Code-Editor (z. B. VS-Code)

Initialisieren des Projekts und Installieren von Tailwind CSS

Erstellen Sie zunächst ein neues Projekt. Die spezifischen Schritte können je nach Ihrem bevorzugten Framework oder Setup variieren. Ausführliche Anweisungen finden Sie im Tailwind CSS Installation Framework Guide. Wenn Sie die Tailwind CSS-Installationsschritte bereits abgeschlossen haben, können Sie mit dem Abschnitt Einrichten von prettier-plugin-tailwindcss in einem vorhandenen Tailwind CSS-Projekt fortfahren. So geht's mit Vite:

bun create vite my-app --template react-ts
cd my-app
bun install

Jetzt installieren und konfigurieren wir Tailwind CSS

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

Sie sollten eine Tailwind-CSS-Konfigurationsdatei sehen: tailwind.config.js, kopieren Sie den folgenden Inhalt hinein.

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

Fügen Sie die folgenden Tailwind-Anweisungen am Anfang Ihrer CSS-Datei hinzu (z. B. src/index.css):

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

Installieren und konfigurieren Sie Prettier

bun install -D prettier prettier-plugin-tailwindcss

Erstellen Sie eine Prettier-Konfigurationsdatei im Stammverzeichnis Ihres Projekts und fügen Sie das Prettier-Plugin-Tailwindcss-Plugin zur Konfigurationsdatei hinzu. Wir würden .prettierrc verwenden. Andere akzeptable Prettier-Konfigurationsdateitypen finden Sie hier hier

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Jetzt testen wir das Setup, ändern die Datei src/App.tsx und speichern sie.

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

Ergebnis:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

Einrichten von prettier-plugin-tailwindcss in einem vorhandenen Tailwind-CSS-Projekt

Wenn in Ihrem Projekt Prettier bereits eingerichtet ist, ist die Integration des Plugins prettier-plugin-tailwindcss unkompliziert. Sie müssen lediglich das Plugin installieren und konfigurieren. Wenn Prettier noch nicht installiert ist, müssen Sie es zusammen mit dem Plugin einrichten.

Für Projekte mit einem vorhandenen schöneren Setup führen Sie Folgendes aus:

bun add -D prettier-plugin-tailwindcss

Führen Sie für Projekte ohne vorhandenes schöneres Setup Folgendes aus:

bun add -D prettier prettier-plugin-tailwindcss

Fügen Sie das Plugin zu Ihrer bestehenden Prettier-Konfiguration hinzu. Wenn keine Prettier-Konfiguration vorhanden ist, erstellen Sie eine .prettierrc-Datei im Stammverzeichnis Ihres Projekts. Fügen Sie dann Folgendes hinzu:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Stellen Sie sicher, dass Prettier ordnungsgemäß funktioniert, indem Sie Änderungen an einer Datei mit Tailwind-CSS-Klassen vornehmen. Speichern Sie die Datei und prüfen Sie, ob die Tailwind-CSS-Klassen automatisch sortiert werden.

Abschluss

Die Integration von prettier-plugin-tailwindcss in neue und bestehende Tailwind-CSS-Projekte verbessert Ihren Entwicklungsworkflow, indem eine konsistente und organisierte Klassensortierung sichergestellt wird. Bei neuen Projekten können Sie Prettier und das Plugin gleichzeitig einrichten, um Ihre Erstkonfiguration zu optimieren. Für bestehende Projekte fügen Sie das Plugin einfach zu Ihrem bestehenden Prettier-Setup hinzu oder installieren Sie sowohl Prettier als auch das Plugin, wenn Prettier noch nicht konfiguriert ist.

Weitere Konfigurationsoptionen wie das Sortieren von Klassen in nicht standardmäßigen Attributen finden Sie in der Dokumentation zu prettier-plugin-tailwindcss.