Những Sai Lầm Thường Gặp Khi Sử Dụng Tailwind CSS và Cách Để Khắc Phục

Tailwind CSS là một framework tiện ích-first nổi bật giúp các nhà phát triển tạo ra giao diện người dùng một cách nhanh chóng và dễ dàng. Tuy nhiên, không ít nhà phát triển gặp phải những sai lầm phổ biến trong quá trình sử dụng, dẫn đến mã HTML trở nên cồng kềnh, khó bảo trì và phức tạp hơn cần thiết. Trong bài viết này, chúng ta sẽ cùng nhau khám phá những sai lầm thường gặp khi sử dụng Tailwind CSS và đưa ra những phương pháp tốt hơn để khắc phục chúng.

1. Viết HTML Lộn Xộn và Cồng Kềnh

Ví dụ Nên Tránh:

<div class="bg-red-500 text-white p-4 m-2 rounded-lg shadow-lg flex justify-center items-center text-lg font-bold border border-red-700">
    Button
</div>

Cách Tiếp Cận Tốt Hơn: Sử Dụng @apply Trong CSS

.btn {
    @apply bg-red-500 text-white p-4 rounded-lg shadow-lg text-lg font-bold border border-red-700;
}

<div class="btn">Button</div>

Lợi Ích

• Giữ cho mã HTML sạch sẽ, dễ đọc hơn.
• Tăng khả năng tái sử dụng các kiểu dáng cho nhiều thành phần khác nhau.

2. Lạm Dụng Các Lớp Tiện Ích Thay Vì Tạo Component

Ví Dụ Nên Tránh:

<div class="w-64 h-40 bg-gray-200 p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold">Card Title</h2>
    <p class="text-gray-600">This is a card description.</p>
</div>

Cách Làm Tốt Hơn: Trích Xuất Thành Component

.card {
    @apply w-64 h-40 bg-gray-200 p-4 rounded-lg shadow-lg;
}
.card-title {
    @apply text-lg font-bold;
}
.card-desc {
    @apply text-gray-600;
}

<div class="card">
    <h2 class="card-title">Card Title</h2>
    <p class="card-desc">This is a card description.</p>
</div>

Lợi Ích

• Giảm thiểu sự trùng lặp mã.
• Dễ dàng chỉnh sửa và bảo trì hơn trong tương lai.

3. Không Tùy Chỉnh Cấu Hình Tailwind

Ví Dụ Nên Tránh:

<div class="text-[#ff5733] bg-[#121212] p-[18px]">
    Custom Styled Box
</div>

Cách Làm Tốt Hơn: Sử Dụng theme.extend Trong tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        brandPrimary: '#ff5733',
        darkBg: '#121212',
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
};

<div class="text-brandPrimary bg-darkBg p-18">
    Custom Styled Box
</div>

Lợi Ích

• Nâng cao khả năng bảo trì và tính nhất quán trong thiết kế.
• Dễ dàng cập nhật kiểu dáng tổng thể của giao diện.

4. Bỏ Qua Plugin Của Tailwind

Ví Dụ Nên Tránh:

.btn {
    background-color: #ff5733;
    padding: 10px 20px;
    border-radius: 5px;
}

Cách Làm Tốt Hơn: Sử Dụng Các Plugin Chính Thức Của Tailwind

Đầu tiên, bạn cần cài đặt plugin bằng lệnh:

npm install @tailwindcss/forms @tailwindcss/typography

Sau đó, cập nhật file tailwind.config.js của bạn:

module.exports = {
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Lợi Ích

• Giảm thiểu nhu cầu viết CSS tùy chỉnh.
• Tận dụng các kiểu dáng tối ưu và được chuẩn hóa từ plugin.

Kết Luận

Bằng cách nhận diện và khắc phục những sai lầm thường gặp khi sử dụng Tailwind CSS, bạn có thể tạo ra mã nguồn sạch và dễ dàng bảo trì hơn. Để làm được điều này, hãy:

• Giữ cho HTML luôn gọn gàng bằng cách sử dụng @apply.
• Trích xuất các component có thể tái sử dụng dễ dàng.
• Tận dụng cấu hình của Tailwind để tối ưu hóa dự án.
• Sử dụng các plugin đã có sẵn để nâng cao năng suất làm việc.

Cảm ơn bạn đã theo dõi bài viết này! Hy vọng những chia sẻ trên sẽ hỗ trợ bạn trong quá trình phát triển giao diện người dùng dễ dàng và hiệu quả hơn.
source: viblo