Hari ke-45 Mempelajari MERN Stack

Saya kini berada di hari ke-45 dalam perjalanan saya untuk menjadi jurutera full-stack.

Semalam, saya belajar untuk menyediakan halaman HTML statik dengan penghalaan Express. Hari ini, saya telah menguasai Tailwind CSS menggunakan Tailwind CLI.

Saya sedang beralih daripada fail CSS yang besar. Saya beralih kepada aliran kerja berasaskan utiliti (utility-first workflow) untuk membina susun atur dengan lebih pantas.

Tailwind tidak menyediakan komponen siap bina. Ia menyediakan kelas utiliti yang kecil. Kelas-kelas ini membolehkan anda membina reka bentuk tersuai secara terus dalam HTML anda.

Berikut adalah proses teknikal saya:

  • Saya memasang Tailwind menggunakan npm dan bukannya menggunakan pautan CDN.
  • Saya memasang teras pengkompil dengan npm install -D tailwindcss.
  • Saya memulakan konfigurasi dengan npx tailwindcss init.

Saya juga belajar bagaimana Tailwind mengurangkan saiz fail melalui tree-shaking. Proses ini membuang gaya yang tidak digunakan. Saya telah mengkonfigurasi laluan kandungan supaya pengkompil mengimbas folder statik saya.

Tetapan tailwind.config.js saya:

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

Tetapan ini memastikan fail CSS akhir saya kekal kecil dan pantas.

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