- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Hiện nay có rất nhiều thư viện CSS và JavaScript dùng để xây dựng giao diện website, hầu hết các thư viện đều hỗ trợ tạo ra nhiều thành phần khác nhau như button, form, table, card,... Tuy nhiên, hầu hết các thư viện đều cung cấp rất nhiều thành phần mà ít khi các bạn dùng tới, nhất là đối với các website đơn giản. Trong những trường hợp như vậy, việc sử dụng thư viện chỉ cung cấp một số thành phần thường được sử dụng như button, form thì các bạn có thể cân nhắc sử dụng Tailwind CSS.
Tailwind CSS là một thư viện CSS cung cấp một số thành phần cơ bản để xây dựng giao diện website, bao gồm alert, button, form, card, grid và navigation. Nếu website của các bạn chỉ sử dụng vài thành phần như vậy thì các bạn nên sử dụng Tailwind CSS. Tuy cung cấp chỉ 6 thành phần nhưng mỗi thành phần lại được thiết kế với rất nhiều tuỳ chỉnh, giúp tạo ra nhiều kiểu mẫu khác nhau, hoàn toàn đáp ứng bất kỳ yêu cầu thiết kế nào của các bạn.
Các bạn tải thư viện Tailwind CSS tại địa chỉ https://github.com/tailwindcss/tailwindcss và tích hợp vào website với dòng mã lệnh HTML như sau:
Bây giờ, các bạn có thể thử tạo một button như ví dụ sau:
Các bạn có thể tìm hiểu tất cả các thành phần của thư viện Tailwind CSS tại địa chỉ https://tailwindcss.com/components.
Tailwind CSS là một thư viện CSS cung cấp một số thành phần cơ bản để xây dựng giao diện website, bao gồm alert, button, form, card, grid và navigation. Nếu website của các bạn chỉ sử dụng vài thành phần như vậy thì các bạn nên sử dụng Tailwind CSS. Tuy cung cấp chỉ 6 thành phần nhưng mỗi thành phần lại được thiết kế với rất nhiều tuỳ chỉnh, giúp tạo ra nhiều kiểu mẫu khác nhau, hoàn toàn đáp ứng bất kỳ yêu cầu thiết kế nào của các bạn.
Các bạn tải thư viện Tailwind CSS tại địa chỉ https://github.com/tailwindcss/tailwindcss và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<link href="path/to/tailwind.min.css" rel="stylesheet">
HTML:
<button type="button" class="bg-blue-500 hover:bg-blue-700 font-bold text-white px-4 py-2 rounded-full">Button</button>