Dzień 45 nauki stosu MERN

Mija 45 dni mojej drogi do zostania inżynierem full-stack.

Wczoraj nauczyłem się serwować statyczne strony HTML za pomocą routingu Express. Dzisiaj opanowałem Tailwind CSS przy użyciu Tailwind CLI.

Odchodzę od dużych plików CSS. Przechodzę na workflow typu utility-first, aby szybciej budować układy.

Tailwind nie dostarcza gotowych komponentów. Dostarcza małe klasy pomocnicze (utility classes). Te klasy pozwalają budować własne projekty bezpośrednio w HTML.

Oto mój proces techniczny:

  • Zainstalowałem Tailwind za pomocą npm zamiast używać linku CDN.
  • Zainstalowałem rdzeń kompilatora za pomocą npm install -D tailwindcss.
  • Zainicjowałem konfigurację za pomocą npx tailwindcss init.

Dowiedziałem się również, jak Tailwind zmniejsza rozmiar plików dzięki tree-shakingowi. Ten proces usuwa nieużywane style. Skonfigurowałem ścieżki zawartości, aby kompilator skanował moje foldery statyczne.

Moja konfiguracja tailwind.config.js:

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

Ta konfiguracja zapewnia, że mój końcowy plik CSS pozostaje mały i szybki.

Źródło: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3