Tailwind CSS: Utility-First Framework cho modern web

Giới thiệu Tailwind CSS

Tailwind CSS là một utility-first CSS framework cho phép bạn xây dựng UI nhanh chóng mà không cần rời khỏi HTML.

Tại sao chọn Tailwind?

1. Utility-First

<div class="bg-blue-500 text-white p-4 rounded-lg">
    Hello Tailwind!
</div>

2. Không cần đặt tên class

Không còn đau đầu với việc đặt tên class như "header-nav-item-active" nữa!

3. Responsive Design dễ dàng

<div class="text-sm md:text-base lg:text-lg">
    Responsive text
</div>

4. Customizable

Tailwind config cho phép customize mọi thứ:

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: "#3490dc",
            }
        }
    }
}

5. Production Optimization

PurgeCSS tự động loại bỏ CSS không dùng, file cuối cùng rất nhẹ!

So sánh với Bootstrap

Khi nào nên dùng Tailwind?

• Dự án mới từ đầu
• Cần design system riêng
• Team thích utility-first approach

Kết luận

Tailwind CSS là một game changer trong web development. Hãy thử và trải nghiệm!