𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

Jestem w 45. dniu mojej przygody z full-stackiem.

Wczoraj nauczyłem się routingu w Express dla statycznych stron HTML. Dzisiaj skupiłem się na Tailwind CSS.

Zrezygnowałem z dużych plików CSS. Teraz korzystam z podejścia utility-first. To przyspiesza pracę nad designem.

Tailwind dostarcza klasy utility. Używasz tych klas, aby budować niestandardowe układy bezpośrednio w swoim HTML.

Oto mój proces techniczny:

• Zainstalowałem Tailwind za pomocą pakietów npm zamiast CDN.
• Zainstalowałem rdzeń kompilatora za pomocą npm install -D tailwindcss.
• Skonfigurowałem ustawienia za pomocą npx tailwindcss init.

Dowiedziałem się również, jak Tailwind zmniejsza rozmiar plików. Wykorzystuje on tree-shaking, aby usunąć nieużywane style.

Skonfigurowałem ścieżkę zawartości w tailwind.config.js, aby skanować moje pliki HTML i JS:

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

Ta konfiguracja sprawia, ż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