Nhật ký học tập

Flowbite là gì? Flowbite là một thư viện UI components được xây dựng trên nền Tailwind CSS, giúp bạn dễ dàng tạo các thành phần UI như button, modal, dropdown... mà không cần viết nhiều CSS thủ công. Flowbite hỗ trợ tốt với React. Flowbite cung cấp sẵn các thành phần như: Nút bấm (Button) Hộp thoại (Modal) Accordion Thanh điều hướng (Navbar) Tab, Tooltip, Dropdown... Biểu mẫu (Form), Bảng dữ liệu (Table)...  Flowbite giống jQuery UI thời xưa? Nếu bạn từng dùng jQuery UI để bổ sung component cho jQuery (jquery kết hợp với CSS), thì Flowbite chính là phiên bản hiện đại tương tự cho Tailwind CSS.  Setup Đầu tiên, chúng ta tạo project ReactJs sử dụng Vite npm create vite@latest Need to install the following packages: create-vite@6.5.0 Ok to proceed? (y) y > npx > create-vite │ ◇ Project name: │ react-getting-started │ ◇ Select a framework: │ React │ ◇ Select a variant: │ TypeScript + SWC │ ◇ Scaffolding project in D:\Practices\ReactJs\react-getting-started... │ └ ...

Design Principles   Tailwind CSS không chỉ đơn thuần là một CSS framework – nó là bộ công cụ xây dựng giao diện người dùng với triết lý thiết kế hiện đại: nhanh, tinh gọn, và linh hoạt. Có rất nhiều nhân tố liên quan tới việc phát triển website và bởi vì Tailwind được tạo ra để đơn giản hóa toàn bộ quá trình đó, chúng ta sẽ chia nhỏ các khái niệm để dễ nắm bắt – và tận dụng tối đa tài nguyên mà Tailwind cung cấp Utility classes Events Responsive design Dark mode Re-usage of style Creating custom styles Function and directives Chúng ta sẽ đi sâu vào một trong những yếu tố quan trọng nhất trong thiết kế hiện đại: Responsive Design Responsive Design Tailwind CSS mặc định theo mobile-first – nghĩa là bạn viết class cho màn hình nhỏ trước, rồi thêm các biến thể lớn hơn bằng cách dùng prefix breakpoint như sm:, md:, lg:… Breakpoint name Min-width Equivalent Media query sm 640px @media (min-width: 640px) { // CSS Rul...

Tailwind CSS là gì? Tailwind CSS được tạo ra bởi Adam Wathan, một lập trình viên người Canada. Ban đầu, Adam chỉ muốn tạo ra một công cụ nội bộ để tăng tốc việc thiết kế UI mà không cần rời khỏi HTML. Nhưng chính triết lý "utility-first" của anh lại mở ra một hướng đi hoàn toàn mới: viết giao diện bằng cách sử dụng các tiện ích nhỏ (utility classes) thay vì viết CSS riêng cho từng component. Tailwind được giới thiệu lần đầu vào năm 2017, và kể từ đó đã tạo nên một cuộc cách mạng nhỏ trong cách thiết kế web — vừa nhanh, vừa chuẩn, vừa nhất quán. Hệ sinh thái của Tailwind cũng phát triển cực kỳ mạnh, từ Tailwind UI (bộ giao diện trả phí do chính Adam phát triển) đến Headless UI (component UI không phụ thuộc vào style), và giờ là hàng loạt plugin, theme, và công cụ build. Tailwind Documentation: https://tailwindcss.com/docs/installation/using-vite Tailwind CSS Github: https://github.com/tailwindlabs/tailwindcss   Taiwind UI Pricing: https://tailwindcss.com/plus/ui-blocks/marketi...