𝗛𝗮𝗿𝗶 𝗸𝗲-𝟰𝟱 𝗕𝗲𝗹𝗮𝗷𝗮𝗿 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

Saya sedang berada di hari ke-45 perjalanan full-stack saya.

Kemarin saya mempelajari Express routing untuk halaman HTML statis. Hari ini saya fokus pada Tailwind CSS.

Saya beralih dari penggunaan file CSS yang besar. Sekarang saya menggunakan alur kerja utility-first. Hal ini membuat pekerjaan desain menjadi lebih cepat.

Tailwind memberi Anda utility classes. Anda menggunakan kelas-kelas ini untuk membangun tata letak kustom secara langsung di dalam HTML Anda.

Berikut adalah proses teknis saya:

  • Saya menginstal Tailwind menggunakan paket npm alih-alih CDN.
  • Saya menginstal core compiler dengan npm install -D tailwindcss.
  • Saya mengatur konfigurasi dengan npx tailwindcss init.

Saya juga mempelajari bagaimana Tailwind mengurangi ukuran file. Ia menggunakan tree-shaking untuk menghapus gaya yang tidak digunakan.

Saya mengonfigurasi content path di tailwind.config.js untuk memindai file HTML dan 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