Hướng dẫn is tailwind like bootstrap? - tailwind có giống bootstrap không?
Show Nội dung chính ShowShow
Tại sao chúng ta nên dùng Tailwind ? 3 phút đọc Cài đặt Tailwind trong Nextjs Tailwind CSS là gì?Tailwind CSS is a utility-first CSS frameworkƯu điểm của Tailwind CSS Nhược điểm của Tailwind CSS
Example:
Tailwind CSS là gì ? Tại sao chúng ta nên dùng Tailwind ? Ưu điểm của Tailwind CSSNhược điểm của Tailwind CSS
Nhược điểm của Tailwind CSS
Kết luậnTailwind CSS là gì ? Tại sao chúng ta nên dùng Tailwind ? Cài đặt Tailwind trong Nextjs Điểm mới khi dùng Tailwind CSSTailwind CSS giúp xây dựng website một cách nhanh chóng nhất với các thuộc tính CSS đã được gán thành những class riêng, khi dùng chúng ta chỉ có việc gọi ra để dùng. Vậy một câu hỏi đặt ra là tại sao chúng ta không sử dụng Bootstrap cho nó truyền thống đi ? Chắc chắn framwork CSS này nó phải có một điểm mạnh gì nó thì các lập trình Front-end mới dùng chứ nhỉ ? Chúng mình sẽ điểm qua một vài các ưu nhược điểm của nó nhé.Tailwind CSS là gì ?Tại sao chúng ta nên dùng Tailwind ? Tại sao chúng ta nên dùng Tailwind ?Cài đặt Tailwind trong Nextjs Cài đặt Tailwind trong NextjsSau đây mình sẽ giới thiệu cho các bạn cách cài đặt Tailwind trong Nextjs nhé. Nếu ai dùng Nuxtjs thì các bạn cũng có thể làm tương tự, ở một góc độ nào đó mình thấy về cơ bản 2 cái này nó giống nhau. Đầu tiên các bạn phải tạo một Nextjs project
Tiếp theo chúng ta sẽ cài 1 và một vài các package khác được sử dụng để complie CSS
Và chúng ta cũng cần cài thêm 2 plugin
Khi chúng ta init nextjs project xong rồi, thì chúng ta sẽ tạo 1 file 3 để require 2 plugin 4 và 5 vào nhé 1Tiếp theo trong file 6 chúng ta sẽ config như sau 3 Trong file 7 các bạn cho đoạn script này vào như sau 5Trong thư mục assets ở trong project các bạn tạo 8 7Sau đó các bạn tạo thêm 9 với nội dung 9Mình không muốn đi giới thiệu từng class trong 0, việc đó sẽ gây mất thời gian và nhàm chán. Thay vào đó mình sẽ thử tạo ra một page và style theo class rồi mình sẽ nói cụ thể cho các bạn nhé. hehe. Bây giờ chúng mình sẽ vào folder page và tạo 1 file 1 nhé 2Sau đó chúng ta sẽ bật 2, đánh đường dẫn, kết quả chúng ta sẽ thu được như sauMình sẽ đi qua một vài các class như sau: Đầu tiên thì chúng ta muốn tạo được thanh menu thì chúng ta sẽ phải tạo ra 1 div có class flex container để chứa tất cả các thành phần trong thanh menu đó, đó chính là logo, các navigation như Home, Service, Project, Team, About, Contacts. Và chúng ta cũng không quên style padding và background cho thanh menu 3 thêm padding cho trên và dưới với các thông số py-1 tức là padding-top và padding-bottom mỗi bên 0.25rem, tương tự chúng ta cũng tăng dần lên từ py-1 cho đến py-64, các bạn tham khảo ở đây nhé. Cùng với nữa đó chính là class 4 tức là thuộc tính css 5 màu cam và 900 chính là mức độ đậm của màu cam.Chúng ta sẽ đầu tiên đến với logo, chúng ta dùng class 6 để lo có thể cách margin bên trái 1 khoảng là 2.5 rem. và khi di chuột qua biểu tượng logo này thì chuột sẽ thay đổi thành hình bàn tay khi chúng ta có thuộc tính 7.Chữ Viblo chúng ta muốn tăng font-size lên thì dùng class 8, màu chữ xan blue tương đối nhẹ 9 và 1 chút font-weight: 600 10Icon 3 gạch được style với class visible khi width màn hình dưới 768px, khi màn hình lớn hơn thì icon 3 gạch này sẽ bị ẩn đi với class 11 . Các bạn lưu ý, trong tailwind css thì khi chúng ta muốn responsive cho các màn thì chúng ta chỉ cần thêm các tiền tố 12 vào trước các class . Các bạn tham khảo thêm responsive ở đây.Tiếp đến đó chính là thành phần liên kết điều hướng Home, Service, Project, Team, About, Contacts, Chúng ta thấy hầu hết các liên kết điều hướng này có cùng class style như nhau nhưng thành phần Home sẽ làm khác đi một chút bằng các thêm style 13. Và đáng nhẽ ra nó sẽ thành một danh sách sổ xuống nhưng do dùng class 14 nên khi màn hình tầm 768px trở xuống danh sách đó sẽ bị ẩn đi, và khi màn hình trên 768px thì danh sách đó được hiện lên nằm ngang với class 15.Điểm mới khi dùng Tailwind CSSNhư các bạn đã biết đấy, khi chúng ta dùng framwork này ngoài việc nhiều class hơn tiện cho việc chúng ta style thì chúng ta còn có thể sử dụng lại các class build-in trong framework này để viết một class mới. Đó chính là khi chúng ta sử dụng từ khóa @apply.@apply.@apply. Bây giờ chúng ta lại mở file assets/styles/less/app.less ra chúng ta sẽ viết thêm css cho class như sau 0Và sau đó các bạn thay đoạn code thành như sau thì các bạn cũng nhận được kết quả giống y hệt như ban đầu 1Đây có thể nói là một đặc điểm riêng biệt mà mình thích nhất ở framework này, tại vì nó giúp mình sử dụng được những class built-in của framework trong một class mới, trông code chúng ta gọn gàng hơn rất là nhiều. Nếu dùng Bootstrap thì mình sẽ phải viết hết tất cả các class built-in của framework mà mình cần vào thẻ đó, như thế nhìn code front-end mình trông nó không gọn tí nào cả. Tiếp theo đó chính là bạn có thể generate 16, 17, 18, 19, 30các class này bằng cách chúng ta sẽ viết trong file css , wrap chúng bằng 31Ví dụ 2Viết 1 mà sinh ra được nhiều thứ như này, thật ngắn gọn mà lại mang lại hiệu quả đúng ko các bạn. Tiếp theo đến 16 nó cũng tương tự như vậy 3Sử dụng phương thức 33 để các bạn có thể truy cập là lấy ra giá trị trong 34. Ví dụ bạn có file 35 như sau : 4Bây giờ các bạn có file css như sau 5Thật dễ dàng đúng ko nào các bạn. Custom your designTrong project nextjs, chúng ta sẽ tạo một file 35 với nội dung như sau: 6Ví dụ ở trên mình custome lại các kích cở của màn hình, fontSize các thứ . Tương tự các bạn muốn custome font-family thì các bạn chỉ việc thêm vào file này thôi 7Dễ như ăn kẹo đúng không các bạn )) ))Pseudo-Class VariantsĐây là một điểm mình rất thích ở framework CSS này bởi vì chúng ta có thể viết class cho các sự kiện 37 cho các thẻ.Ví như 8Đoạn code trên là chúng ta tạo ra 1 ô input với nút Sign up, thay vì phải viết css dài dướm dà chúng ta thêm tiền tố 38 vào trước class thôi là chúng ta đã có thể thực hiện thay đổi style khi hover hoặc focus vào thẻ html. Các bạn tham khảo thêm các ví dụ tại đâyKết luậnVậy qua đó, qua một vài những tìm hiểu của mình về 39 ở trên cũng giúp các bạn phần nào mường tượng ra nó là cái gì, nó sử dụng như thế nào, một vài các dặc điểm đặc trung của nó ra sao. Mong rằng qua bài viết này của mình các bạn có thể dùng và áp dụng chúng vào các project các bạn đang làm. Cảm ơn các bạn đã đọc bài viết của mình.Tham khảohttps://tailwindcss.com/ |