Ngày 45 học MERN Stack

Ngày 45 học MERN Stack

Tôi đã bước sang ngày thứ 45 trong hành trình trở thành một kỹ sư full-stack.

Hôm qua, tôi đã học cách phục vụ các trang HTML tĩnh bằng Express routing. Hôm nay, tôi đã làm chủ Tailwind CSS bằng cách sử dụng Tailwind CLI.

Tôi đang dần từ bỏ các tệp CSS cồng kềnh. Tôi đang chuyển sang quy trình làm việc utility-first để xây dựng layout nhanh hơn.

Tailwind không cung cấp các component có sẵn. Nó cung cấp các utility class nhỏ. Những class này cho phép bạn xây dựng các thiết kế tùy chỉnh trực tiếp ngay trong HTML của mình.

Đây là quy trình kỹ thuật của tôi:

• Tôi đã cài đặt Tailwind bằng npm thay vì sử dụng liên kết CDN.
• Tôi đã cài đặt nhân trình biên dịch với npm install -D tailwindcss.
• Tôi đã khởi tạo cấu hình với npx tailwindcss init.

Tôi cũng đã học được cách Tailwind giảm kích thước tệp thông qua tree-shaking. Quá trình này loại bỏ các style không được sử dụng. Tôi đã cấu hình các đường dẫn content để trình biên dịch quét các thư mục tĩnh của mình.

Thiết lập tailwind.config.js của tôi:

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

Thiết lập này đảm bảo tệp CSS cuối cùng của tôi luôn nhỏ gọn và nhanh chóng.

Nguồn: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3