Tag 45 beim Lernen des MERN-Stacks

Ich bin seit 45 Tagen auf dem Weg, ein Full-Stack-Engineer zu werden.

Gestern habe ich gelernt, statische HTML-Seiten mit Express-Routing auszuliefern. Heute habe ich Tailwind CSS mithilfe des Tailwind CLI gemeistert.

Ich verabschiede mich von großen CSS-Dateien. Ich wechsle zu einem Utility-First-Workflow, um Layouts schneller zu erstellen.

Tailwind bietet keine vorgefertigten Komponenten an. Es stellt kleine Utility-Klassen bereit. Diese Klassen ermöglichen es dir, individuelle Designs direkt in deinem HTML zu erstellen.

Hier ist mein technischer Prozess:

  • Ich habe Tailwind über npm installiert, anstatt einen CDN-Link zu verwenden.
  • Ich habe den Compiler-Kern mit npm install -D tailwindcss installiert.
  • Ich habe die Konfiguration mit npx tailwindcss init initialisiert.

Ich habe auch gelernt, wie Tailwind die Dateigröße durch Tree-Shaking reduziert. Dieser Prozess entfernt ungenutzte Styles. Ich habe meine Content-Pfade so konfiguriert, dass der Compiler meine statischen Ordner scannt.

Mein tailwind.config.js-Setup:

module.exports = { content: ["./public/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }

Dieses Setup stellt sicher, dass meine finale CSS-Datei klein und schnell bleibt.

Quelle: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3