Vue-3-Komponenten mit Tailwind CSS erstellen

Vue ist ein beliebtes JavaScript-Framework zum Erstellen vielseitiger Weboberflächen. Zu den überzeugendsten Funktionen zählen die einfache Integration in bestehende Codebasen und das geringe Gewicht des Frameworks. So können Entwicklerinnen und Entwickler problemlos damit in ihren Frontend-Projekten loslegen.

Das Herzstück von Vue ist ein Ansatz, bei dem sich Komponenten zum Erstellen von UI-Webanwendungen kombinieren lassen. Komponenten sind wiederverwendbare Codebausteine, aus denen Sie Ihre Anwendungen zusammensetzen können. Mit dem Komponentenmodell von Vue erstellen Sie eigenständige Komponenten, deren Logik, Inhalt und Stile an einem Ort gebündelt sind.

Für das Styling dieser Komponenten können Sie ein Framework wie Tailwind CSS verwenden und die Stile direkt in das Markup einfügen, um die Komponente noch stärker zu kapseln. Tailwind CSS ist ein CSS-Framework mit wiederverwendbaren Klassen zum Gestalten von Benutzeroberflächen (UI). Mit diesen Klassen können Sie beispielsweise Schriftarten, Farben, Innen- und Außenabstände, Animationen und Übergänge festlegen. Mit dem Attribut text-black wird beispielsweise der gesamte Text eines Elements schwarz dargestellt. Die Klassen lassen sich kombinieren, sodass Sie damit jedes beliebige Design umsetzen können.

In diesem Tutorial erfahren Sie, wie Sie mit Tailwind CSS Vue-3-Komponenten erstellen, indem Sie eine responsive Artikelkarte entwickeln. Den vollständigen Projektcode finden Sie hier.

Voraussetzungen

Für dieses Tutorial benötigen Sie:

• Eine aktuelle Version von Node.js und eine installierte Version von npm

• Einen Texteditor wie Visual Studio Code (VS Code)

• Kenntnisse der Befehlszeile

• Vertrautheit mit Vue und CSS

Eigene Vue-3-Komponenten mit Tailwind erstellen

Erstellen Sie zunächst ein neues Vue-3-Projekt. Führen Sie den folgenden Befehl in Ihrem Terminal aus, um create-vue zu installieren und auszuführen – das offizielle Gerüst-Tool von Vue zum Erstellen von Projekten auf Basis von vite:

1npm init vue@latest

Sie werden aufgefordert, aus einer Liste optionaler Funktionen auszuwählen. Nennen Sie das Projekt vue-tailwindcss und wählen Sie bei allen übrigen Optionen No.

1√ Project name: ... vue-tailwindcss
2√ Add TypeScript? ... No / Yes
3√ Add JSX Support? ... No / Yes
4√ Add Vue Router for Single Page Application development? ... No / Yes
5√ Add Pinia for state management? ... No / Yes
6√ Add Vitest for Unit Testing? ... No / Yes
7√ Add an End-to-End Testing Solution? » No
8√ Add ESLint for code quality? ... No / Yes
9√ Add Prettier for code formatting? ... No / Yes

Wechseln Sie nun mit cd vue-tailwindcss in den Projektordner und führen Sie npm install aus, um die Open-Source-Abhängigkeiten des Projekts von npm zu installieren.

Führen Sie npm run dev aus, um die Anwendung in einer Entwicklungsumgebung zu starten.

Mit diesem Befehl sollte die App auf dem lokalen Host gestartet werden:

Rufen Sie die angegebene lokale URL auf, um die App anzuzeigen:

Nun richten Sie Tailwind CSS in der Vue-App ein.

Tailwind mit Vue einrichten

Führen Sie zunächst den folgenden Befehl im Terminal aus:

1npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Mit diesem Befehl installieren Sie Tailwind CSS und dessen Peer-Abhängigkeiten (autoprefixer und postcss) über npm.

Erstellen Sie als Nächstes die Dateien tailwind.config.js und postcss.config.js, indem Sie den folgenden Befehl ausführen. Mit diesen Dateien konfigurieren und individualisieren Sie Tailwind:

1npx tailwindcss init -p

Mit diesem Befehl sollte im Stammverzeichnis des Projekts die Datei tailwind.config.js mit folgendem Inhalt erstellt werden:

1   module.exports = {
2   content: [],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7 }

Außerdem haben Sie die Datei postcss.config.js erstellt und die Plugins tailwindcss und autoprefixer konfiguriert:

1  module.exports = {
2   plugins: {
3     tailwindcss: {},
4     autoprefixer: {},
5   },
6 }

Passen Sie in tailwind.config.js das Content-Array so an, dass es alle Pfade zu Ihren Seiten und Komponenten enthält. Dadurch wird Tailwind so konfiguriert, dass ungenutzte CSS-Klassen aus der endgültigen Ausgabe entfernt werden und die Dateigröße sinkt.

Ihre Datei tailwind.config.js sollte nun so aussehen:

1  module.exports = {
2   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7  };

Erstellen Sie als Nächstes im Ordner src des Projekts eine neue Datei namens index.css und fügen Sie Folgendes ein:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Mit der Direktive @tailwind haben Sie die Basis-, Komponenten- und Utility-Stile von Tailwind in Ihr Projekt eingebunden. Wenn Sie das Projekt später erstellen, ersetzt Tailwind diese Direktiven automatisch durch die von Ihnen festgelegten Stile.

Importieren Sie nun index.css in unsere Datei ./src/main.js, um die Datei zu verwenden:

1import './index.css'

Beachten Sie, dass Sie die Zeile entfernen sollten, die die Datei assets/main.css importiert. So verhindern Sie, dass Sie Vanilla CSS verwenden.

Nun können Sie mit Tailwind Komponenten erstellen.

Vue-Komponenten erstellen

Um zu erfahren, wie Sie Tailwind in Vue-Komponenten verwenden, erstellen Sie eine Kartenkomponente für einen Artikel.

Erstellen Sie anschließend im Ordner src/components eine neue Datei namens ArticleCard.vue. Fügen Sie den folgenden Code ein:

1<template>
2  <div>
3    <div>
4      <img src="../assets/coverimage.jpg" alt="Close-up of code" />
5    </div>
6    <div>
7      <div>Vue</div>
8      <a href="#">Building Vue 3 Components With Tailwind CSS</a>
9      <p>
10        Learn how to create visually stunning Vue components using the popular
11        utility-first CSS framework Tailwind.
12      </p>
13    </div>
14  </div>
15</template>

Mit dem obigen Code wird ein Template namens ArticleCard erstellt. Es definiert eine Kartenkomponente mit einem Bild und einer kurzen Beschreibung des Artikels.

Um die Komponente im Browser anzuzeigen, bereinigen Sie die Startseite, indem Sie den gesamten Inhalt der Datei App.vue löschen. Importieren Sie anschließend die Komponente ArticleCard in den Script-Bereich von App.vue:

1<script setup>
2import ArticleCard from "./components/ArticleCard.vue";
3</script>

Verwenden Sie die Komponente anschließend im Template:

1<template>
2  <ArticleCard />
3</template>

Als Nächstes gestalten Sie die Karte mit Tailwind-CSS-Utility-Klassen.

Utility-Klassen erklärt

Mit Vanilla CSS und einigen anderen CSS-Frameworks können Sie Elemente auf einer Seite mithilfe benutzerdefinierter CSS-Klassen gestalten.

Hier sehen Sie ein Beispiel für ein Link-Element, das mit den Klassen link-wrapper und link gestaltet wurde:

1<template>
2  <div class="link-wrapper">
3    <a href="#" class="link">Building Vue 3 Components With Tailwind CSS</a>
4  </div>
5</template>
6<style>
7.link-wrapper {
8  padding: 8px;
9}
10.link {
11  font-weight: 500;
12  font-size: 1.125rem;
13  line-height: 1.75rem;
14  color: #000;
15}
16</style>

Warum Tailwind CSS verwenden?

Das Problem bei diesem Ansatz: Sie müssen jedes Mal aussagekräftige Klassennamen erstellen, wenn Sie ein Element gestalten möchten. Alternativ müssen Sie sich einen extrem langen, beschreibenden Namen merken, wenn Sie eine Klasse wiederverwenden möchten. Außerdem müssen Sie beträchtliche Mengen an CSS schreiben, da jeder Klassenname, den Sie einer Seite hinzufügen, mit entsprechenden Styles einhergeht. Wenn Ihre Anwendung wächst, werden also auch die CSS-Dateien größer. Das erhöht die Bundle-Größe und führt zu längeren Ladezeiten.

In Tailwind CSS können Sie dagegen vordefinierte CSS-Klassen verwenden, die Utility-Klassen genannt werden. Sie bieten gängige Styling-Optionen wie Flexbox, Textausrichtung, Rahmen, Außen- und Innenabstände sowie Farben. Damit können Sie Seiten gestalten, ohne CSS zu schreiben.

Sehen wir uns an, wie das vorherige Link-Beispiel mit Tailwind CSS aussehen würde:

1<div class="p-8">
2    <a href="#" class="font-medium text-lg text-black">Vue + TailwindCSS</a>
3</div>

Sie haben das Style-Objekt und die benutzerdefinierten Klassen nun durch die folgenden Utility-Klassen ersetzt:

• p-8 legt den Innenabstand auf 8 px fest.

• font-medium legt die Schriftstärke auf 500 px fest.

• text-xl legt die Schriftgröße auf 1.125 rem und die Zeilenhöhe auf 1.75 rem fest.

• text-black legt die Textfarbe auf Schwarz fest.

Mit Utility-Klassen benötigen Sie weniger CSS. Außerdem können alle, die sich den Code ansehen, die beabsichtigte Gestaltung der Elemente leicht nachvollziehen, ohne ein Stylesheet heranziehen zu müssen.

Tailwind bietet zahlreiche Utility-Klassen. Eine Übersicht finden Sie in der Dokumentation zu den Utilities.

Eine Kartenkomponente mit Tailwind CSS gestalten

Jetzt, da Sie mit Utility-Klassen vertraut sind, können Sie die Kartenkomponente gestalten.

Ändern Sie zunächst die Datei src/components/ArticleCard.vue, damit sie Tailwind-Utility-Klassen verwendet:

1<template>
2  <div class="flex max-w-2xl mx-auto bg-white rounded-sm shadow-md">
3    <div>
4      <img
5        class="h-full w-full object-cover"
6        src="../assets/coverimage.jpg"
7        alt="Closeup code"
8      />
9    </div>
10    <div class="p-8">
11      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
12        Vue
13      </div>
14      <a
15        href="#"
16        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
17        >Building Vue 3 Components With Tailwind CSS
18      </a>
19      <p class="mt-2 text-sm text-slate-500">
20        Learn how to create visually stunning Vue components using the popular
21        utility-first CSS framework Tailwind.
22      </p>
23    </div>
24  </div>
25</template>

Mit den neuen Stilen sollte die Kartenkomponente so aussehen:

Zusätzlich zu den Utility-Klassen haben Sie Modifikatoren für das Styling der Karte verwendet. Beachten Sie die Klasse hover:underline des Tags <a/>: Dabei ist hover der Modifikator.

In Tailwind stellen Sie Modifikatoren an den Anfang eines Utility-Klassennamens, um den gewünschten Zustand anzugeben. Im obigen Beispiel haben Sie den Hover-Zustand festgelegt. Sie könnten aber auch den Fokuszustand mit der Klasse focus:text-violet-200 oder den aktiven Zustand mit active:text-violet-600 festlegen.

Je nach Bedingung, auf die Sie abzielen möchten, können Sie verschiedene Tailwind-CSS-Modifikatoren verwenden. Die vollständige Liste finden Sie in der Dokumentation zu Tailwind CSS.

Auf größeren Bildschirmen sieht die Kartenkomponente bisher gut aus. Je kleiner der Bildschirm jedoch wird, desto gedrängter wirkt sie:

Zum Glück können Sie das Layout der Karte an die Bildschirmbreite anpassen.

Breakpoints in Tailwind CSS verwenden

Mit Tailwind CSS können Sie Utility-Klassen abhängig vom jeweiligen Breakpoint anwenden. Standardmäßig gibt es fünf Breakpoints, die jeweils ab einer bestimmten Mindestbreite greifen:

• sm — 640 px

• md — 768 px

• lg — 1024 px

• xl — 1280 px

• 2xl — 1536 px

Um einen Breakpoint zu verwenden, stellen Sie der Utility-Klasse den Breakpoint gefolgt von einem Doppelpunkt (:) voran.

1breakpoint:utility-class

Betrachten Sie die folgende Schaltfläche:

1<button class="w-16 md:w-32 lg:w-48">
2  Submit
3</button>

Tailwind wendet bei kleinen Bildschirmen die Klasse w-16, bei mittelgroßen Bildschirmen w-32 und bei großen Bildschirmen w-48 an.

Mit Breakpoints können Sie Layout, Größe, Farbe und andere Eigenschaften ändern, ohne Media Queries zu verwenden. Sie können die Bildschirmgrößen auch in tailwind.config.js anpassen, wenn die Standardgrößen Ihren Designanforderungen nicht entsprechen.

Mit dem folgenden Code können Sie beispielsweise die Bildschirmgröße lg überschreiben:

1module.exports = {
2  theme: {
3    extend: {
4      screens: {
5        'lg': '960px',
6      },
7    },
8  },
9}

Verwenden Sie in Ihrer Artikelkartenkomponente Breakpoints, um das Layout der Karte zu ändern und die Bildgröße anzupassen:

Unten sehen Sie den geänderten Code. Beachten Sie die ersten Tags <div/> und <img/>:

1<template>
2  <div
3    class="md:flex md:max-w-2xl max-w-md mx-auto bg-white rounded-sm shadow-md overflow-hidden"
4  >
5    <div>
6      <img
7        class="h-48 w-full object-cover md:h-full"
8        src="../assets/coverimage.jpg"
9        alt="Closeup code"
10      />
11    </div>
12    <div class="p-8">
13      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
14        Vue
15      </div>
16      <a
17        href="#"
18        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
19        >Building Vue 3 Components With Tailwind CSS</a
20      >
21      <p class="mt-2 text-sm text-slate-500">
22        Learn how to create visually stunning Vue components using the popular
23        utility-first CSS framework Tailwind.
24      </p>
25    </div>
26  </div>
27</template>

Sie haben folgende Änderungen vorgenommen:

• Mit den Modifikatoren md:flex und md:max-w-2xl wird die Kartenkomponente bei mittelgroßen und großen Bildschirmen zu einem Flex-Container mit einer maximalen Breite von 48 rem. Bei kleinen Bildschirmen legt die Klasse max-w-md die Breite auf 28 rem fest.

• Im Element <img/> zeigt md:h-full das Bild bei mittelgroßen und großen Bildschirmen in voller Höhe an. Bei kleineren Bildschirmen legt die Klasse h-48 die Höhe auf 12 rem fest.

Auf einem kleinen Bildschirm sieht die fertige Komponente so aus:

Das war’s! Jetzt können Sie Vue-Komponenten mit Tailwind CSS erstellen.

Wenn Sie Ihre Vue-Anwendung fertiggestellt haben, erfahren Sie hier, wie Sie sie auf Netlify bereitstellen und automatische Sicherheitsupdates von Snyk erhalten. Erstellen Sie noch heute ein kostenloses Konto und importieren Sie Ihr Projekt in Snyk, um Schwachstellen in den Abhängigkeiten Ihres Projekts zu finden und zu beheben – und Ihre Anwendung vor XSS und anderen Sicherheitsbedrohungen zu schützen.

Fazit

In diesem Tutorial haben Sie erfahren, wie Sie mit Tailwind CSS eine Vue-3-Komponente erstellen. Tailwind CSS ist ein Utility-First-Framework, das einen effizienteren und optimierten Workflow für die Entwicklung von UI-Komponenten ermöglicht. Mit Utility-Klassen erstellen Sie responsive Designs, ohne auf externe Stylesheets zurückgreifen oder sich Dutzende von Klassennamen merken zu müssen. Durch die Anpassung der Standardklassen können Sie mit Tailwind ein eigenes Designsystem erstellen. Außerdem entfernt Tailwind automatisch alle ungenutzten Klassen aus dem Production-Build. So landet weniger Code im fertigen Produkt.