Wie integriert man Tailwind CSS mit VueJS?

Einführung

Tailwind CSS hat sich unter Frontend-Entwicklern aufgrund seines utilitaristischen Ansatzes und seiner Benutzerfreundlichkeit schnell zu einer beliebten Wahl entwickelt. Mit einer riesigen Auswahl an vorgefertigten Klassen für das Styling hilft es, den Entwicklungsprozess zu rationalisieren und die Konsistenz über Projekte hinweg zu erhalten. In Kombination mit Vue.js, einem progressiven JavaScript-Framework, das für seine Einfachheit und Flexibilität bekannt ist, erhalten Sie ein leistungsstarkes und effizientes Toolset für die Erstellung moderner, skalierbarer und reaktionsfähiger Webanwendungen. In diesem Leitfaden führen wir Sie durch den Prozess der Integration von Tailwind CSS in ein Vue.js-Projekt, so dass Sie das volle Potenzial dieser Technologien ausschöpfen und mit Leichtigkeit visuell ansprechende, leistungsstarke Anwendungen erstellen können.

Lesen Sie auch: Livewire-Kommentare mit TailwindCSS

 Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie Tailwind CSS mit einem Vue.js-Projekt einrichten:

1. Ein neues Vue.js Projekt mit Vue CLI erstellen

Vue CLI ist das offizielle Werkzeug zur Erstellung von Vue.js Projekten. Es bietet einen schnellen und effizienten Weg, um ein neues Projekt mit sinnvollen Vorgaben und Best Practices einzurichten.

Lesen Sie auch: VueJS-App auf Ubuntu bereitstellen

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

Ersetzen Sie my-vue-app mit Ihrem bevorzugten Projektnamen.

2. Installieren Sie die erforderlichen Abhängigkeiten

Diese Pakete bieten die Kernfunktionalitäten für Tailwind CSS, PostCSS und Autoprefixer. PostCSS ist ein CSS-Postprozessor, der von Tailwind verwendet wird, um die endgültige CSS-Ausgabe zu erzeugen, während Autoprefixer dabei hilft, sicherzustellen, dass Ihr CSS mit verschiedenen Browsern kompatibel ist, indem es automatisch herstellerspezifische Präfixe hinzufügt.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

3. Erstellen Sie eine Konfigurationsdatei für Tailwind CSS im Stammverzeichnis Ihres Projekts

Mit dieser Konfigurationsdatei können Sie das Verhalten und das Aussehen der Tailwind-CSS-Klassen anpassen, wie z.B. Themenfarben, Haltepunkte und mehr.

npx tailwindcss init

Dadurch wird eine Datei tailwind.config.js erstellt.

4. Konfigurieren Sie Ihre tailwind.config.js erstellt

Die Bereinigungsoption ist entscheidend für die Optimierung der endgültigen CSS-Dateigröße. Sie analysiert Ihre Projektdateien und entfernt alle nicht verwendeten Tailwind-CSS-Klassen während des Produktionsprozesses.

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Stellen Sie sicher, dass Sie die Bereinigungskonfiguration an Ihre Projektstruktur anpassen. Dies ist wichtig, um nicht verwendete CSS in Produktions-Builds zu entfernen.

5. Erstellen einer postcss.config.js im Stammverzeichnis Ihres Projekts und fügen Sie die folgende Konfiguration hinzu

Diese Datei wird verwendet, um PostCSS-Plugins wie Tailwind CSS und Autoprefixer zu konfigurieren, die für die Verarbeitung Ihres CSS während des Build-Prozesses unerlässlich sind.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

6. Importieren Sie Tailwind-CSS in Ihr Projekt

Indem Sie eine eigene CSS-Datei für Tailwind-Importe erstellen, stellen Sie sicher, dass die Basis, die Komponenten und die Hilfsprogramme des Frameworks korrekt in Ihr Projekt eingebunden werden. Erstellen Sie eine neue CSS-Datei in Ihrem src-Verzeichnis, z.B., src/assets/css/tailwind.css, und fügen Sie Folgendes hinzu:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

7. Öffnen Sie Ihr src/main.js oder src/main.ts Datei, und importieren Sie die erstellte tailwind.css Datei

Dieser Schritt stellt sicher, dass Ihre Vue.js-Anwendung die Tailwind-CSS-Klassen zur Verwendung in Ihren Komponenten enthält.

import { createApp } from 'vue';
import App from './App.vue';
import './assets/css/tailwind.css';
createApp(App).mount('#app');

8. Tailwind-CSS-Utility-Klassen in Ihren Vue.js-Komponenten verwenden

Wenn Tailwind CSS richtig eingerichtet ist, können Sie nun die Utility-Klassen für das Styling Ihrer Vue.js-Komponenten nutzen.

<template>
 <div >
  Hello, Tailwind CSS with Vue.js!
 </div>
</template>

9. Starten Sie Ihre Vue.js-App

Starten Sie Ihren Entwicklungsserver und sehen Sie die Ergebnisse Ihrer neu integrierten Tailwind-CSS- und Vue.js-Einrichtung.

npm run serve

Fazit

Zusammenfassend lässt sich sagen, dass die Integration von Tailwind CSS mit Vue.js eine leistungsstarke Kombination für die Erstellung moderner, reaktionsfähiger und visuell ansprechender Webanwendungen darstellt. Wenn Sie dieser Schritt-für-Schritt-Anleitung folgen, können Sie die Vorteile dieser beiden Technologien nutzen und einen effizienteren Entwicklungs-Workflow schaffen. Dank der umfangreichen Ressourcen, die in beiden Communities zur Verfügung stehen, können Sie Ihr Wissen weiter vertiefen und das volle Potenzial Ihrer Projekte ausschöpfen. Fangen Sie also an, außergewöhnliche Benutzererlebnisse mit Tailwind CSS und Vue.js zu entwickeln.

Lesen Sie auch: Rückenwind mit React

Nützliche Links

1. Tailwind CSS Dokumentation
2. Vue.js Offizielle Website
3. Vue CLI Dokumentation
4. Tailwind CSS Komponenten für Vue.js
5. Vue.js Gemeinschaft