Name: Tailwind trong 100 giây (Tailwind in 100 Seconds)
Uploaded: 2025-12-18T10:22:37.000Z
Duration: 2 min 21 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites.

Tailwind, một bộ sưu tập khổng lồ các lớp tiện ích CSS nhỏ để nhanh chóng và nhất quán xây dựng các trang web có giao diện đẹp.

Design is also hard, but naming your CSS classes in a sane way is virtually impossible.

Thiết kế cũng khó, nhưng việc đặt tên các lớp CSS của bạn một cách hợp lý thì gần như là không thể.

Frameworks like Bootstrap and Material address this challenge by creating styles for high level components, things like buttons, dropdowns and forms.

Các framework như Bootstrap và Material giải quyết thách thức này bằng cách tạo ra các kiểu cho các thành phần cấp cao, như nút, menu thả xuống và biểu mẫu.

Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this.

Tailwind áp dụng cách tiếp cận chức năng hơn bằng cách cung cấp cho bạn các lớp tiện ích có thể kết hợp với nhau để xây dựng các thành phần như thế này.

Instead of using the Card class like you might in Bootstrap, you combine utility classes like Flex to make it a Flexbox, P to give it padding, M for margin, and

Thay vì sử dụng lớp Card như bạn có thể làm trong Bootstrap, bạn kết hợp các lớp tiện ích như Flex để tạo thành Flexbox, P để thêm khoảng đệm, M cho lề, và

hundreds of others to control things like color shadows and so on.

hàng trăm lớp khác để kiểm soát các yếu tố như màu sắc, bóng đổ, v.v.

In addition, every utility can be applied conditionally.

Ngoài ra, mọi tiện ích đều có thể được áp dụng có điều kiện.

You have variants like small, medium and Large for responsive designs, along with a bunch of pseudo selectors like Hover and Focus to handle state changes, or Dark to render different colors when dark mode is enabled.

Bạn có các biến thể như small, medium và Large cho thiết kế đáp ứng, cùng với một loạt các bộ chọn giả như Hover và Focus để xử lý thay đổi trạng thái, hoặc Dark để hiển thị màu sắc khác nhau khi chế độ tối được bật.

This approach gives you a lot more freedom over your creativity compared to other CSS frameworks.

Cách tiếp cận này mang lại cho bạn nhiều tự do sáng tạo hơn so với các framework CSS khác.

This while at the same time following the rules of a design system that you don't get.

Điều này đồng thời tuân theo các quy tắc của một hệ thống thiết kế mà bạn không có được.

With plain css, it lives in the sweet spot between convention and configuration.

Với CSS thuần túy, nó nằm ở điểm ngọt ngào giữa quy ước và cấu hình.

However, it does produce some ugly ass HTML.

Tuy nhiên, nó tạo ra một số HTML khá xấu.

You've got tons of hard to read duplicated class names here.

Bạn có rất nhiều tên lớp trùng lặp khó đọc ở đây.

As your UI grows in complexity, code duplication is inevitable, but

Khi giao diện người dùng của bạn ngày càng phức tạp, việc trùng lặp mã là điều khó tránh khỏi, nhưng

you can avoid it by creating reusable components with your favorite JavaScript framework, or by using the Apply directive in CSS to take Tailwind classes and compose them into a single concise class name.

bạn có thể tránh điều đó bằng cách tạo các thành phần có thể tái sử dụng với framework JavaScript yêu thích của mình, hoặc bằng cách sử dụng chỉ thị Apply trong CSS để lấy các lớp Tailwind và kết hợp chúng thành một tên lớp duy nhất, súc tích.

Another concern you may have is performance because Tailwind when weighs in at over 3,500 kilobytes.

Một mối quan tâm khác bạn có thể có là hiệu suất vì Tailwind khi cân nặng hơn 3.500 kilobyte.

But when you go to build for production, it will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads.

Nhưng khi bạn xây dựng cho sản xuất, nó sẽ tự động xóa bất kỳ tiện ích nào không sử dụng khỏi gói cuối cùng, dẫn đến mã chết tối thiểu và do đó tải trang nhanh hơn.

But who has time to learn and memorize all these different utility classes?

Nhưng ai có thời gian để học và ghi nhớ tất cả các lớp tiện ích khác nhau này?

Where Tailwind really shines is with its tooling.

Nơi Tailwind thực sự tỏa sáng là với các công cụ của nó.

You don't need to memorize much because VSCode will autocomplete every Tailwind class.

bạn không cần phải ghi nhớ nhiều vì VSCode sẽ tự động điền mọi lớp Tailwind.

If you're not sure what it does, just hover over it and it will show you the equivalent code in plain css.

Nếu bạn không chắc nó làm gì, chỉ cần di chuột qua đó và nó sẽ hiển thị cho bạn mã tương đương bằng CSS thuần túy.

And if you're not happy with what it does, you can easily customize everything from the color palette it to the spacing to build your own unique design system.

Và nếu bạn không hài lòng với những gì nó làm, bạn có thể dễ dàng tùy chỉnh mọi thứ từ bảng màu đến khoảng cách để xây dựng hệ thống thiết kế độc đáo của riêng mình.

This has been tailwind CSS in 100 seconds.

Make sure to like and subscribe if you want to see more short videos like this and if we hit 10,000 likes I'll make a full Tailwind tutorial Thanks for watching and I will see you in the next one.

Hãy nhớ thích và đăng ký nếu bạn muốn xem thêm các video ngắn như thế này và nếu chúng ta đạt 10.000 lượt thích, tôi sẽ làm một hướng dẫn Tailwind đầy đủ. Cảm ơn bạn đã xem và hẹn gặp lại bạn trong video tiếp theo.