Những sai lầm phổ biến khi sử dụng Tailwind

Tailwind CSS là một framework tiện ích-first mạnh mẽ giúp phát triển giao diện người dùng nhanh chóng. Tuy nhiên, nhiều nhà phát triển sử dụng nó không đúng cách, dẫn đến HTML cồng kềnh, khó bảo trì và phức tạp không cần thiết. Trong bài viết này, chúng ta sẽ tìm hiểu những sai lầm phổ biến nhất khi sử dụng Tailwind và cách tránh chúng.

1. Viết HTML lộn xộn và cồng kềnh

VD 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>

Tại sao lại làm vậy?

• Giữ cho HTML sạch hơn và dễ đọc hơn.
• Giúp tái sử dụng Style trên nhiều thành phần khác nhau.

2. Lạm dụng các lớp tiện ích (Utility Classes) thay vì tạo component

VD 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>

Tại sao nên làm như vậy?

• Giảm sự trùng lặp.
• Dễ dàng chỉnh sửa và bảo trì hơn.

3. Không sử dụng cấu hình Tailwind để tùy chỉnh

VD nên tránh: Cố định giá trị trong Class

<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 của Tailwind: Edit lại tailwind.config.js:

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

Sau đó sử dụng nó trong HTML:

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

Tại sao chúng ta nên làm vậy?

• Cải thiện khả năng bảo trì và tính nhất quán.
• Dễ dàng cập nhật giao diện tổng thể.

4. Bỏ qua plugin của Tailwind, làm giảm khả năng tái sử dụng

VD nên tránh: Viết CSS tùy chỉnh thay vì dùng plugin

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

Cách làm tốt hơn: Sử dụng plugin chính thức của Tailwind

Đầu tiên tải về bằng đoạn code:

npm install @tailwindcss/forms @tailwindcss/typography

Modify lại tailwind.config.js:

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

Tại sao nên làm như vậy?

• Giảm nhu cầu viết CSS tùy chỉnh.
• Sử dụng các kiểu dáng tối ưu, có sẵn.

Kết luận

Bằng cách tránh những sai lầm phổ biến này, bạn có thể viết mã Tailwind CSS sạch hơn và dễ bảo trì hơn. Hãy tập trung vào:

• Giữ HTML 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.
• Tận dụng cấu hình của Tailwind.
• Sử dụng các plugin tích hợp sẵn của Tailwind.

Cảm ơn các bạn đã theo dõi!