Hari ke-45 Belajar MERN Stack

Saya telah menjalani 45 hari dalam perjalanan saya untuk menjadi seorang full-stack engineer.

Kemarin, saya belajar menyajikan halaman HTML statis dengan Express routing. Hari ini, saya menguasai Tailwind CSS menggunakan Tailwind CLI.

Saya mulai meninggalkan file CSS yang besar. Saya beralih ke alur kerja utility-first untuk membangun layout dengan lebih cepat.

Tailwind tidak menyediakan komponen siap pakai. Tailwind menyediakan kelas-kelas utility kecil. Kelas-kelas ini memungkinkan Anda membangun desain kustom secara langsung di dalam HTML Anda.

Berikut adalah proses teknis saya:

  • Saya menginstal Tailwind menggunakan npm, bukan menggunakan tautan CDN.
  • Saya menginstal inti compiler dengan npm install -D tailwindcss.
  • Saya menginisialisasi konfigurasi dengan npx tailwindcss init.

Saya juga mempelajari bagaimana Tailwind memperkecil ukuran file melalui tree-shaking. Proses ini menghapus gaya yang tidak digunakan. Saya mengonfigurasi jalur konten agar compiler memindai folder statis saya.

Pengaturan tailwind.config.js saya:

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

Pengaturan ini memastikan file CSS akhir saya tetap kecil dan cepat.

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