Wie ich meine Frontend-Mentor-Projekte mit Tailwind CSS einrichte

Die jüngsten Änderungen in meinem Arbeitspensum haben dazu geführt, dass ich die Arbeit als Entwickler nicht mehr so ​​genießen kann, wie ich es normalerweise tun würde – das heißt, es müssen keine Frontend-Funktionen erstellt werden. Um dies zu kompensieren, habe ich die Projektentwicklung auf einer Front-End-Mentor-Plattform neu gestartet, die wunderschöne UI-Mockups bereitstellt, die Entwickler in echte Projekte umsetzen können. Ich habe vor etwa einem Jahr damit begonnen, die Plattform zu nutzen, und war nicht nur von der Qualität der Projekte beeindruckt, sondern auch von ihrem Fokus auf den Community-Aufbau, mit besonderem Schwerpunkt auf der Aufklärung von Entwicklern über Best Practices im Bereich Barrierefreiheit. Dies ist eine großartige Ressource, die ich jedem Entwickler wärmstens empfehlen kann, der seine Frontend-Fähigkeiten an realen Projekten verbessern möchte – mit unterschiedlichen Schwierigkeitsgraden, beginnend mit sehr einfachen Projekten, die nur HTML und CSS erfordern, sodass für jedes ein Projekt dabei ist Könnensniveau!

Eines der großartigen Dinge an dieser Plattform ist, dass sie nur ein Design und einige grundlegende Startcodes bereitstellt, sodass Sie jede beliebige Kombination von Technologien wählen können, um Ihr Projekt abzuschließen. Persönlich versuche ich, die Verwendung von Frameworks ¹ zu reduzieren und mich auf das Schreiben von semantischem HTML zu konzentrieren und etwas reines JS für die Interaktivität hinzuzufügen, also ist das der Großteil meiner zukünftigen Lösungen.

Trotzdem gefällt mir Tailwind immer noch sehr gut als Styling-Lösung für mein Nebenprojekt. Ich verwende es seit etwa drei Jahren beruflich und habe festgestellt, dass es eine gute Balance zwischen nützlichen Standarddienstprogrammklassen und einem angenehmen Entwicklungserlebnis bietet, wenn es seine Grundfunktionalität erweitert (wir werden weiter unten näher darauf eingehen). Ich schlage nicht vor, dass Anfänger sofort mit dem Bauen mit Tailwind beginnen sollten – lernen Sie unbedingt zuerst CSS! Als jemand, der viel über die Funktionsweise von CSS weiß, ist Tailwind für mich jedoch ein Produktivitätstool, weil ich verstehe, was seine Utility-Klassen unter der Haube bewirken.

Nachdem ich einige Herausforderungen mit dem Front-End-Mentor gemeistert hatte, musste ich Tailwind mehrmals zum bereitgestellten Projektstartcode hinzufügen. Ich dachte, es könnte für andere Entwickler, die neu auf der Plattform sind, aber Tailwind in ihren Projekten verwenden möchten, hilfreich sein, meinen Arbeitsablauf für die Installation und Konfiguration von Tailwind in einem typischen Startup-Projekt zu dokumentieren. Wie bei vielen Dingen im Abhängigkeitsmanagement gibt es wahrscheinlich eine Million verschiedene Möglichkeiten, dies zu tun. Dies ist nur meine bevorzugte Methode, daher können Ihre tatsächlichen Ergebnisse variieren.

Tailwind installieren

Paketinstallation

Zuerst müssen Sie zum Stammverzeichnis des Startup-Codes navigieren, den Sie von Front End Tutor heruntergeladen haben, und den folgenden Befehl ausführen, um Tailwind und seine Abhängigkeiten zu installieren:

npm install -D tailwindcss postcss autoprefixer

Einige Hinweise zu Abhängigkeiten:

• Tailwind CSS verwendet PostCSS, um Ihr CSS zu verwalten. PostCSS ist ein Tool, das JavaScript-Plug-Ins zum Konvertieren von CSS verwendet, und Tailwind CSS selbst ist ein PostCSS-Plug-In ².
• Autoprefixer ist ein PostCSS-Plugin, das Herstellerpräfixe zu Ihren CSS-Regeln hinzufügt, indem es Werte aus Can I Use verwendet. Es stellt sicher, dass Ihr CSS in verschiedenen Browsern funktioniert.

Technisch gesehen sind diese nicht erforderlich, um Tailwind in Ihrem Projekt zu installieren, aber ich finde, dass es im Allgemeinen reibungsloser läuft, wenn ich sie verwende.

TailwindCSS initialisieren

Als nächstes generieren wir die Dateien tailwind.config.js und postcss.config.js mit den folgenden Befehlen:

npx tailwindcss init -p

Quellpfad konfigurieren

Navigieren Sie als Nächstes zu tailwind.config.js und fügen Sie index.html zum Inhaltsarray hinzu – dadurch wird sichergestellt, dass unnötige Stile entfernt werden. Mehr darüber, wie das tatsächlich funktioniert, können Sie in der Content Config-Dokumentation von Tailwind lesen.

Bitte beachten Sie, dass Sie, wenn Sie mehrere HTML-Dateien für Ihr Projekt erstellen, die mithilfe der Tailwind-Dienstprogrammklassen formatiert werden, auch deren Pfade zu diesem Array hinzufügen müssen.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Nehmen Sie Tailwind in Ihr CSS auf

Erstellen Sie eine CSS-Datei im Stammverzeichnis Ihres Projekts (normalerweise nenne ich sie „styles.css“) und fügen Sie den folgenden Inhalt hinzu:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Build-Skripte hinzufügen und ausführen

Fügen Sie in Ihrer package.json-Datei ein Skript zum Erstellen Ihres CSS hinzu. Dadurch wird eine Datei „output.css“ erstellt, die die erstellten Stile enthält. Mit dem Flag --watch können wir CSS-Änderungen in Echtzeit beobachten, sodass wir das Skript nicht jedes Mal neu starten müssen, wenn wir einen Stil aktualisieren.

Beachten Sie, dass Sie diesem Befehl einen beliebigen Namen geben können – ich folge hier nur der Konvention.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Jetzt können Sie Ihr CSS kompilieren, indem Sie das folgende Skript ausführen:

npm run build:css

Link-Stylesheet

Schließlich müssen Sie ein Link-Tag in den Kopf Ihrer index.html-Datei (und aller anderen HTML-Dateien, auf die die Stile angewendet werden sollen) einfügen:

<code><link href="output.css" rel="stylesheet"></link></code>

Sie sollten nun testen können, ob Tailwind in dieser Datei funktioniert. Normalerweise füge ich etwas hinzu wie >

Projektschriftarten installieren

Wenn Sie den Startcode für Ihr Projekt von Front End Mentor herunterladen, enthält dieser Schriftartdateien für die Schriftarten in den Designs, die Sie erstellen werden. Dies umfasst normalerweise eine Kombination aus Dateien mit variablen Schriftarten und Dateien mit statischen Schriftarten. Für unsere Zwecke verwenden wir die in ./assets/fonts/static bereitgestellten Dateien.

Ich empfehle Ihnen, sich diese Dateien sowie die im Projektstammverzeichnis bereitgestellte Datei style-guide.md anzusehen, um zu sehen, welche Schriftarten verwendet werden und welche Schriftstärken erforderlich sind.

@font-face-Regel hinzufügen

Sobald dies festgestellt ist, müssen Sie eine weitere neue CSS-Datei im Projektstammverzeichnis erstellen (normalerweise nenne ich sie „fonts.css“) und dann @font-face-Regeln für jede im Startcode bereitgestellte Schriftartdatei definieren:

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

Das obige Beispiel stammt aus meiner Lösung für die Social-Link-Profil-Challenge, bei der drei verschiedene Stärken der Inter-Schriftart verwendet werden.

Nachdem Sie die Schriftart definiert haben, müssen Sie das Stylesheet im HTML-Dokument verknüpfen, genau wie zuvor mit „output.css“:

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Erweiterte Tailwind-Konfiguration

Jetzt müssen wir das Theme in tailwind.config.js erweitern, um einige Hilfsklassen hinzuzufügen, um unsere Projektschriftarten dort anzuwenden, wo sie benötigt werden:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Bitte beachten Sie, dass Sie, wenn Ihr Projekt über mehrere benutzerdefinierte Schriftarten verfügt, eine beliebige Anzahl von Eigenschaften im Objekt „fontFamily“ definieren können. Sie können diese Eigenschaften nach Belieben benennen, aber normalerweise wandle ich den Namen der Schriftart einfach in einen Bindestrich um, um mit der Standardschrift der meisten Tailwind-Dienstprogramme übereinzustimmen, z. B. Comic-Sans.

Sie sollten jetzt in der Lage sein, die Klasse „font-inter“ zu Ihrem HTML hinzuzufügen und zu sehen, wie Ihre neue Schriftart auf Ihr Markup angewendet wird! Sie können auch die verschiedenen von uns festgelegten Schriftstärken verwenden, z. B. „font-semibold“, um die Schriftart mit der Schriftstärke 600 anzuwenden.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Das obige ist der detaillierte Inhalt vonWie ich meine Frontend-Mentor-Projekte mit Tailwind CSS einrichte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!