Tag 45 des Lernens des MERN-Stacks
Ich befinde mich an Tag 45 meiner Full-Stack-Reise.
Gestern habe ich Express-Routing für statische HTML-Seiten gelernt. Heute habe ich mich auf Tailwind CSS konzentriert.
Ich habe mich von großen CSS-Dateien verabschiedet. Jetzt nutze ich einen Utility-First-Workflow. Das beschleunigt die Designarbeit.
Tailwind bietet Utility-Klassen an. Diese Klassen verwendet man, um maßgeschneiderte Layouts direkt in seinem HTML zu erstellen.
Hier ist mein technischer Prozess:
- Ich habe Tailwind über npm-Pakete anstatt über ein CDN installiert.
- Ich habe den Compiler-Kern mit npm install -D tailwindcss installiert.
- Ich habe die Konfiguration mit npx tailwindcss init eingerichtet.
Ich habe auch gelernt, wie Tailwind die Dateigröße reduziert. Es nutzt Tree-Shaking, um ungenutzte Styles zu entfernen.
Ich habe den Content-Pfad in der tailwind.config.js konfiguriert, um meine HTML- und JS-Dateien zu scannen:
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