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

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

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

Semalam saya mempelajari routing Express untuk halaman HTML statik. Hari ini saya memberi tumpuan kepada Tailwind CSS.

Saya telah beralih daripada fail CSS yang besar. Kini saya menggunakan aliran kerja utility-first. Ini menjadikan kerja reka bentuk lebih pantas.

Tailwind menyediakan kelas utiliti. Anda menggunakan kelas-kelas ini untuk membina susun atur tersuai secara terus dalam HTML anda.

Berikut adalah proses teknikal saya:

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

Saya juga mempelajari bagaimana Tailwind mengurangkan saiz fail. Ia menggunakan tree-shaking untuk membuang gaya yang tidak digunakan.

Saya mengkonfigurasi laluan kandungan dalam tailwind.config.js untuk mengimbas fail HTML dan 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