• Network
  • Security
  • Software
  • Thủ thuật
  • Tin tức
  • Video hướng dẫn
  • Donate – Mời AnonyViet ly Cafe ☕
AnonyViet
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
AnonyViet
No Result
View All Result

10 lý do bạn nên sử dụng TailwindCSS cho dự án tiếp theo

Ellyx13 by Ellyx13
in Code
Reading Time: 8 mins read
A A
0

Mục lục bài viết

  1. TailwindCSS là gì?
  2. 10 lý do bạn nên sử dụng TailwindCSS cho dự án tiếp theo
  3. 1. Tailwind tiết kiệm thời gian hơn
    1. 2. Các Lớp Tiện ích Tuân theo Nguyên tắc Trách nhiệm Đơn lẻ
    2. 3. Tài liệu của Tailwind là Top-Notch
    3. 4. Một cộng đồng lớn và đang phát triển
    4. 5. Không còn Media Queries
    5. 6. Không tạo các Component
    6. 7. Loại bỏ các class không sử dụng
    7. 8. Phong cách riêng
    8. 9. Tránh các quy tắc đặt tên
    9. 10. Cảm giác như viết CSS
  4. Tuy nhiên, TailwindCSS không hoàn hảo

Trong bài viết này, mình sẽ phân tích tại sao bạn nên sử dụng TailwindCSS cho dự án tiếp theo. Và liệu framework CSS mới này có thay thế được Bootstrap không nhé.

Tham gia kênh Telegram của AnonyViet  👉 Link 👈

10 lý do bạn nên sử dụng TailwindCSS cho dự án tiếp theo

Các bài viết liên quan

5 bài tập Code giúp bạn tăng kinh nghiệm lập trình Web 4

5 bài tập Code giúp bạn tăng kinh nghiệm lập trình Web

15/08/2022
trang tri tet plugin

Tổng hợp Code trang trí tết cho Website

13/01/2022 - Updated on 20/01/2023
Một số thủ thuật CSS đơn giản để bật Dark Mode cho Website 5

Một số thủ thuật CSS đơn giản để bật Dark Mode cho Website

08/12/2021
10 ví dụ code CSS dễ học nhất trong 10 phút 6

10 ví dụ code CSS dễ học nhất trong 10 phút

23/11/2021

TailwindCSS là gì?

Tailwind là một framework CSS ưu tiên tiện ích (utility-first) được sử dụng để nhanh chóng xây dựng giao diện người dùng hiện đại mà không cần lo lắng về xung đột trong việc đặt tên. Tên class của tiện ích mô tả chức năng của class, chẳng hạn như đặt padding thành 4px, thì có thể đặt tên là topnav. Bạn có thể đặt tên thoải mái nhưng vẫn được quản lý cẩn thận bởi Tailwind giúp việc tạo các trang web đẹp và responsive trở nên cực kỳ đơn giản mà không cần viết một dòng CSS nào.

Dưới đây là 10 lý do hàng đầu mà mình chọn Tailwind CSS:

10 lý do bạn nên sử dụng TailwindCSS cho dự án tiếp theo

1. Tailwind tiết kiệm thời gian hơn

Các lớp tiện ích (utility classes ) của Tailwind giúp bạn khỏi đau đầu khi viết và duy trì hàng đống code CSS khổng lồ từ đầu.

Một lớp tiện ích của Tailwind tương ứng với một tập hợp nhỏ các CSS. Ví dụ:

  • p-4 có nghĩa là padding: 1rem (các hậu tố số trong Tailwind thường là bội số của 0,25 rem)
  • m-4 nghĩa là margin: 1rem
  • text-lg có nghĩa là font-size: 1.125rem; line-height: 1,75rem
  • Kết hợp tất cả lại với nhau, HTML này có kích hoạt CSS Tailwind rồi nhé
<div class="p-4 m-4 text-lg">
  Hello world
</div>

Tương đương với HTML cơ bản này:

<div style="padding: 1rem; margin: 1rem; font-size: 1.125rem; line-height: 1.75rem">
  Hello world
</div>

Với sự trợ giúp của các lớp tiện ích này, chúng ta không phải xây dựng mọi thứ lại từ đầu và có thể tạo các trang web tốt hơn trong thời gian ngắn hơn.

2. Các Lớp Tiện ích Tuân theo Nguyên tắc Trách nhiệm Đơn lẻ

Các lớp tiện ích của Tailwind được thiết kế để phục vụ một mục đích cụ thể. Ví dụ:

  • w-4 có nghĩa là width: 1rem;
  • bg-transparent có nghĩa là background-color: transparent;
    Một số lớp tiện ích cũng đóng gói nhiều hơn 1-3 khai báo CSS cùng một lúc.

Các lớp này gần giống như các phím tắt để viết code trực tiếp với các thuộc tính style. Trong nhiều năm nay, điều này thường được coi là dài dòng đến mức khó chịu, nhưng gần đây, nhiều nhà phát triển đã lập luận rằng một khi bạn đã quen với style lớp tiện ích , bạn sẽ thấy rằng điều đó có nghĩa là các phần tử HTML của bạn không can thiệp vào nhau, điều này giúp đơn giản hóa việc gỡ lỗi.

Ví dụ: khi không có class .card và không có class .featured trên toàn trang web, thì sẽ không có chuyện gì xảy ra với:

<div class="featured card">

Tailwind CSS bao gồm hàng nghìn lớp tiện ích độc lập như vậy và bạn có thể kết hợp chúng một cách sáng tạo để xây dựng các thành phần trang web được tùy chỉnh cao, bất kể bạn đặt chúng ở đâu trên trang.

3. Tài liệu của Tailwind là Top-Notch

TailwindCSS không chỉ đơn giản code mà còn đơn giản cả tài liệu.

Đó là một nơi tuyệt vời để bắt đầu tìm hiểu về cách hoạt động của framework. Bạn có thể dễ dàng truy cập bất kỳ chủ đề nào trên trang web của họ. Tìm kiếm width sẽ đưa bạn đến hướng dẫn width, nhưng tìm kiếm w-8 cũng vậy, vì vậy việc truy cập tài liệu trở nên dễ dàng hơn, ngay cả đối với các nhà phát triển mới làm quen với các frameworks CSS.

4. Một cộng đồng lớn và đang phát triển

Đánh giá mức độ phổ biến của một frameworks trước khi chuyển sang nó luôn luôn là một ý tưởng hay. Đối với các frameworks có lượng người theo dõi vững chắc, sẽ dễ dàng hơn khi tìm thấy các nhà phát triển tuyệt vời và các cộng đồng trực tuyến hỗ trợ để giúp đỡ khi bạn gặp khó khăn.

Sự phổ biến rộng rãi của TailwindCSS trong cộng đồng nhà phát triển có nghĩa là các vấn đề tiềm ẩn có thể được giải quyết dễ dàng hơn với sự hỗ trợ của cộng đồng.

5. Không còn Media Queries

Mọi lớp tiện ích trong TailwindCSS đều có thể được áp dụng có điều kiện tại các breakpoints khác nhau, có nghĩa là chúng ta không phải tạo các tệp media query riêng biệt để làm các component responsive. Tailwind, theo mặc định, cung cấp 5 breakpoints khác nhau:

  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px

Xem ví dụ này:

<img class="w-16 md:w-32 lg:w-48" src="...">

Hình ảnh của chúng ta có chiều rộng mặc định là 4rem, chiều rộng này sẽ bị 8rem và 12rem ghi đè khi viewport phát triển đến các breakpoints md và lg, tương ứng.

Nếu các breakpoints mặc định không đủ, chúng ta cũng có thể tạo các breakpoints tùy chỉnh.

6. Không tạo các Component

Tailwind không đi kèm với các kiểu component có thể sử dụng lại như .modal hoặc .navbar, nhưng nó cho phép chúng ta tạo các class tùy chỉnh có thể sử dụng lại từ các class Tailwind khác với @apply.

Chúng ta có thể tạo một class tiện ích tùy chỉnh để tìm hiểu cách thức hoạt động trên.

.card {
  @apply w-20 h-20 bg-blue-700;
}

Bây giờ chúng ta đã tạo class .card tùy chỉnh của riêng mình trong TailwindCSS và chúng ta có thể thoải mái sử dụng lại nó như thể nó là một class Tailwind giống như bất kỳ class nào khác. (Bao gồm như một phần của định nghĩa về một class khác với @apply.)

7. Loại bỏ các class không sử dụng

Để làm cho trải nghiệm phát triển của chúng ta trở nên suôn sẻ, Tailwind tạo ra hàng nghìn lớp tiện ích, hầu hết trong số đó không được sử dụng trong phiên bản sản phẩm chính thức.

Để khắc phục vấn đề này, Tailwind có tính năng loại bỏ mọi lớp tiện ích không sử dụng khỏi phiên bản sản phẩm chính thức.

Việc xóa các lớp không sử dụng sẽ làm giảm đáng kể kích thước tệp CSS được gửi đến người dùng, dẫn đến trang web được tải nhanh hơn.

8. Phong cách riêng

Giống như nhiều frameworks khác, TailwindCSS cũng có phong cách riêng. Một ví dụ là các yếu tố định cỡ được sử dụng. .m-4 có nghĩa là 1rem và m-5 có nghĩa là 1.25rem. Vậy 0,25rem ở giữa thì sao?

Chúng ta coi đây là những ý kiến ​​hữu ích vì chúng thúc đẩy tính nhất quán trong thiết kế. Rất hiếm khi cần chi tiết hơn các tùy chọn mà chúng ta đưa ra với Tailwind. Nhưng, nếu chúng ta cần, nó có thể định cấu hình và nó chỉ là CSS, vì vậy chúng ta luôn có thể thiết lập các phong cách của riêng mình.

9. Tránh các quy tắc đặt tên

Đặt tên cho các class trong CSS là một vấn đề lớn(nghiêm túc đấy, bạn đã bao giờ tham gia một cuộc họp chỉ để thảo luận về tên class chưa? Mình thì có rồi và mình không muốn trải qua điều đó 1 lần nào nữa).

Mặc kệ có các nguyên tắc quy ước đặt tên phổ biến, như BEM, Tailwind vẫn thắng trận bằng cách loại bỏ nhu cầu viết các lớp CSS tùy chỉnh. Thường thì các lớp tiện ích của Tailwind là đủ để xây dựng web rồi.

10. Cảm giác như viết CSS

TailwindCSS giúp bạn dễ dàng tạo giao diện người dùng tuyệt vời cho cả nhà phát triển cấp cơ sở và cấp cao với sự trợ giúp của các lớp tiện ích. Như đã đề cập trong lý do 2, các tiện ích chủ yếu chỉ là một tham chiếu lớp cho một styles cụ thể. Bạn sẽ nhanh chóng cảm thấy giống như viết CSS, so với việc học một framework như Bootstrap, bao gồm học một hệ thống các components được đặt tên.

Tuy nhiên, TailwindCSS không hoàn hảo

Tailwind, giống như bất kỳ framework nào khác, nó không hoàn hảo. Vấn đề phổ biến nhất là các chuỗi dài của các lớp có thể trở nên khó đọc, ngay cả trong các trường hợp sử dụng phổ biến.

Nhưng sau khi đánh giá tổng quan, những mặt tích cực của TailwindCSS vượt trội hơn hẳn những mặt tiêu cực.

Ngoài ra, bạn cũng có thể xem thêm nhiều thiết kế CSS đẹp tại đây.

Bài viết đạt: 5/5 - (100 bình chọn)
Tags: cssTailwindCSS
Ellyx13

Ellyx13

Có người không dám bước vì sợ gãy chân, nhưng sợ gãy chân mà không dám bước đi thì khác nào chân đã gãy.

Related Posts

Cách tạo trình quét Virus đơn giản bằng API của Virus Total 7
Code

Cách tạo trình quét Virus đơn giản bằng API của Virus Total

25/05/2023
Cách xem code dưới dạng Assembly 8
Code

Cách xem code dưới dạng Assembly

13/05/2023
Hướng dẫn tự tạo Bot ChatGPT trên Messenger 9
Code

Hướng dẫn tự tạo Bot ChatGPT trên Messenger

04/04/2023
Hướng dẫn tự tạo Bot ChatGPT trên Telegram 10
Python

Hướng dẫn tự tạo Bot ChatGPT trên Telegram

27/03/2023
Cách tạo Web App Chatbot viết code tự động bằng Python 11
Code

Cách tạo Web App Chatbot viết code tự động bằng Python

20/03/2023
Cách vượt Captcha Google bằng python 12
Python

Cách vượt Captcha Google bằng python

23/02/2023
Next Post
Cách Hack mật khẩu WIFI bằng Linux 13

Cách Hack mật khẩu WIFI bằng Linux

Subscribe
Notify of
guest

guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

0 Comments
Inline Feedbacks
View all comments

Asia 300×600

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác —

Shopee

Các bài mới

Cách tự tải và cài đặt Office 365 chính hãng 14

Cách tự tải và cài đặt Office 365 chính hãng

03/06/2023
Cách ghép mặt của bạn vào ảnh AI cực dễ 15

Cách ghép mặt của bạn vào ảnh AI cực dễ

03/06/2023
Cách luyện thi chứng chỉ Google Cloud miễn phí trên Whizlab 16

Cách luyện thi chứng chỉ Google Cloud miễn phí trên Whizlab

02/06/2023
Cách đăng ký tên miền .id.vn miễn phí trên iNet 17

Cách đăng ký tên miền .id.vn miễn phí trên iNet

01/06/2023
Tạo Video Animation cực thú vị với Artflow 18

Tạo Video Animation cực thú vị với Artflow

01/06/2023

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

 

Bản quyền: DMCA.com Protection Status

Phản hồi gần đây

  • AnonyViet trong Download CEH v12 Manual Lab – Giáo trình Hacker mũ trắng mới nhất
  • David trong Download CEH v12 Manual Lab – Giáo trình Hacker mũ trắng mới nhất
  • tran cong an trong Cách luyện thi chứng chỉ Google Cloud miễn phí trên Whizlab
  • AnonyViet trong Cách tự tải và cài đặt Office 365 chính hãng
  • khanh trong Cách tự tải và cài đặt Office 365 chính hãng

©2023 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ ku11net.co F8BET https://okuytin.com 6623 BK8 Goat 789betee.com ST666 khoaitv Iwin f8bet i9bet w388 jun88 https://7789bet.io/ https://j88casino.com/ 11bet keo nha cai vn88 Xoilac tv Trực tiếp bóng đá xoilac tv Bongdalu ae888

No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC

©2023 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ ku11net.co F8BET https://okuytin.com 6623 BK8 Goat 789betee.com ST666 khoaitv Iwin f8bet i9bet w388 jun88 https://7789bet.io/ https://j88casino.com/ 11bet keo nha cai vn88 Xoilac tv Trực tiếp bóng đá xoilac tv Bongdalu ae888

wpDiscuz
!

Ads

Ads Blocker Detected!!! - Vui lòng tắt Ad Blocker!!!

Vui lòng tắt Ad Blocker

Có vẻ như bạn đang bật trình chặn Quảng cáo.

{Trường hợp bạn đang dùng trình duyệt từ Facebook, hãy copy link bài viết qua Chrome để xem nội dung, như vậy sẽ không bị chặn}

Website chúng tôi duy trì nhờ vào doanh thu quảng cáo, vì vậy hãy tắt trình chặn quảng cáo để chúng tôi có kinh phí chi trả tiền thuê Server, xin cảm ơn!

Tải lại trang - Refresh Page