Viết CSS có thể thực sự khó khăn. Giai đoạn = Stage. Và tôi hiểu rồi – bạn có thể cảm thấy khó chịu khi phải tìm ra ý tưởng của riêng mình hoặc thiết kế mà bạn nhận được từ nhóm thiết kế của mình
Tôi chắc rằng nhiều người trong số các bạn đã trải qua nỗi đau tương tự ít nhất một vài lần trong sự nghiệp phát triển của mình
Không còn nữa. Bởi vì đã đến lúc tìm hiểu một công cụ thú vị giúp chúng ta trút bỏ rất nhiều gánh nặng. Và không, không phải Bootstrap – nó được gọi là Tailwind CSS
Mặc dù Tailwind đã xuất hiện được một thời gian nhưng có thể bạn vẫn chưa biết đến nó. Có lẽ bạn chưa từng nghe về nó hoặc bạn không thực sự biết liệu việc học một phần công nghệ mới liên quan đến CSS có thực sự giúp cuộc sống của bạn dễ dàng hơn hay không.
Và thực sự có rất nhiều cách để viết CSS ngoài kia – như Vanilla CSS3, LESS, SCSS, Bootstrap, styled-components, Windi CSS, v.v. phèo. Khá một danh sách phải không?
Tôi hy vọng hướng dẫn ngắn này sẽ giúp bạn hiểu về Tailwind CSS và lợi ích của nó để bạn có thể nói "Đây là nó. Đây là một"
Chát chit thế đủ rồi. Hãy đi thẳng vào
CSS nguyên tử là gì?
Trước khi tìm hiểu về Tailwind CSS, hãy tìm hiểu Atomic CSS là gì. Theo Thủ Thuật CSS
"CSS nguyên tử là cách tiếp cận kiến trúc CSS ưu tiên các lớp nhỏ, đơn mục đích với các tên dựa trên chức năng trực quan. "
Nó giống như tạo ra các lớp được cho là để đạt được một mục đích duy nhất. Ví dụ: hãy tạo một lớp
Document
Hello world!
0 với CSS sau.bg-blue {
background-color: rgb[81, 191, 255];
}
Bây giờ nếu chúng ta thêm lớp này vào thẻ
Document
Hello world!
1, nó sẽ có nền màu xanh lam với màu là
Document
Hello world!
2 như bạn có thể thấy trong đoạn mã trênVà đây là HTML
Document
Hello world!
Vì vậy, HTML này sẽ dẫn đến kết quả như thế này
Bây giờ hãy tưởng tượng viết các quy tắc CSS đơn mục đích hữu ích như vậy và giữ tất cả chúng trong một tệp CSS chung. Tôi biết đó là khoản đầu tư một lần nhưng hãy nghĩ về điều này - giờ đây bạn có thể sử dụng các lớp trợ giúp có mục đích duy nhất này từ bất kỳ đâu bạn muốn
Bạn chỉ cần tệp HTML của mình để sử dụng tệp CSS chung đó và thế là xong. Giờ đây, bạn cũng có thể sử dụng kết hợp các lớp trợ giúp này trong một thẻ HTML duy nhất
Chúng ta hãy xem một ví dụ khác phải không?
Hãy tạo một tệp CSS với các quy tắc sau
.bg-blue {
background-color: rgb[81, 191, 255];
}
.bg-green {
background-color: rgb[81, 255, 90];
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
và sau đó sử dụng nó trong tệp HTML của chúng tôi như sau
Document
Hello world 1
Hello world 2
Hello world 3
Bây giờ điều này sẽ tạo ra kết quả sau
🗒️ Điểm cần lưu ý ở đây
- Kết hợp nhiều lớp trợ giúp. Hãy xem cách tôi đã kết hợp nhiều lớp trợ giúp trong dòng 14 trong thẻ ________ 01, cụ thể là ________ 04, ________ 05 và ________ 06. Tất cả đều có hiệu lực trong văn bản Hello world 3 của tôi
- Khả năng tái sử dụng của các lớp trợ giúp. Trong ví dụ trên, hãy xem cách lớp trình trợ giúp
6 được sử dụng nhiều lần trong dòng 12 và 14Document
Hello world!
Xem cách chúng tôi có thể thêm các kiểu khác nhau mà không cần rời khỏi trang HTML. Chà, bạn có thể nói, "Này, chúng tôi đã phải viết những lớp trợ giúp hoặc tiện ích đó trong tệp CSS chung. còn chuyện đó thì sao?" Tôi hiểu rồi. Đó chắc chắn là khoản đầu tư ban đầu mà chúng tôi phải thực hiện để bắt đầu.
Và tất nhiên, ai biết được chúng ta sẽ phải tạo bao nhiêu lớp tiện ích hoặc trình trợ giúp đơn mục đích này nếu muốn tuân theo kiến trúc CSS nguyên tử này
Và đó là lúc Tailwind CSS xuất hiện. Khái niệm Atomic CSS không mới nhưng Tailwind CSS đã đưa khái niệm này lên một tầm cao mới
Tailwind CSS – Khung CSS tiện ích đầu tiên
Tailwind CSS, theo trang web của riêng họ là "khung CSS ưu tiên tiện ích" cung cấp một số lớp tiện ích đơn mục đích, được đánh giá cao này mà bạn có thể sử dụng trực tiếp bên trong phần đánh dấu của mình để thiết kế một phần tử
Một số lớp tiện ích mà tôi thường sử dụng ngày nay là
- uốn cong. Được sử dụng để áp dụng Flexbox cho một
8Document
Hello world!
- mục-trung tâm. để áp dụng thuộc tính CSS
9 cho mộtDocument
Hello world!
8Document
Hello world!
- tròn đầy. để tạo một hình ảnh tròn, v.v.
Nghiêm túc mà nói, tôi không thể liệt kê tất cả chúng vì có quá nhiều lớp tiện ích này. Nhưng phần tốt nhất là chúng ta không phải tự viết các lớp tiện ích này và giữ chúng trong bất kỳ tệp CSS toàn cầu nào. Chúng tôi trực tiếp lấy chúng từ Tailwind
Bạn có thể xem danh sách tất cả các lớp tiện ích mà Tailwind cung cấp từ trang tài liệu. Ngoài ra, nếu đang làm việc trong Mã VS, bạn có thể cài đặt tiện ích mở rộng có tên là Tailwind CSS IntelliSense và tiện ích này sẽ cung cấp cho bạn các đề xuất tự động khi bạn tiếp tục nhập các lớp tiện ích, như trong hình bên dưới
Cách thiết lập CSS Tailwind
Có nhiều cách để bạn có thể thiết lập Tailwind CSS trong dự án của mình, tất cả các cách này đều được đề cập trong tài liệu của họ
Tailwind CSS hoạt động trơn tru với rất nhiều framework như Next, React, Angular, v.v. – và thậm chí cả HTML OG của chúng tôi
Đối với bản trình diễn thực hành bên dưới, tôi đang sử dụng Tailwind CSS với ứng dụng Tiếp theo. Để thiết lập trực tiếp ứng dụng Tiếp theo với Tailwind CSS, hãy sử dụng lệnh sau
Với
.bg-blue {
background-color: rgb[81, 191, 255];
}
.bg-green {
background-color: rgb[81, 255, 90];
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
1.bg-blue {
background-color: rgb[81, 191, 255];
}
6hoặc với
.bg-blue {
background-color: rgb[81, 191, 255];
}
.bg-green {
background-color: rgb[81, 255, 90];
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
2.bg-blue {
background-color: rgb[81, 191, 255];
}
8Khi dự án đã được thiết lập, bạn có thể đi sâu vào bước tiếp theo để tạo thành phần thẻ cơ bản
Demo thực hành
Hãy xây dựng một thành phần thẻ trong dự án Tiếp theo
.bg-blue {
background-color: rgb[81, 191, 255];
}
9Điều này dẫn đến thẻ sau được hiển thị trong giao diện người dùng
Hãy xem tôi có thể tạo kiểu cho thành phần thẻ dễ dàng như thế nào mà không cần rời khỏi Thẻ. tập tin js. Không cần viết thêm bất kỳ tệp CSS nào
Sử dụng
.bg-blue {
background-color: rgb[81, 191, 255];
}
.bg-green {
background-color: rgb[81, 255, 90];
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
3 với một
Document
Hello world!
8 áp dụng quy tắc CSS .bg-blue {
background-color: rgb[81, 191, 255];
}
.bg-green {
background-color: rgb[81, 255, 90];
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
5 cho nó. Bạn muốn thêm .bg-blue {
background-color: rgb[81, 191, 255];
}
.bg-green {
background-color: rgb[81, 255, 90];
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
6 vào một
Document
Hello world!
8? Chúng tôi cũng có thể thêm các công cụ sửa đổi khác nhau như
Document
Hello world 1
Hello world 2
Hello world 3
0,
Document
Hello world 1
Hello world 2
Hello world 3
1,
Document
Hello world 1
Hello world 2
Hello world 3
2, v.v. để hiển thị các lớp tiện ích một cách có điều kiện. Có thể áp dụng các quy tắc CSS phức tạp như thế này
Document
Hello world!
0bằng cách chỉ đề cập đến
Document
Hello world 1
Hello world 2
Hello world 3
3 trong thẻ
Document
Hello world!
8. Gọn gàng, phải không?Và chúng ta có phải đề cập đến các kiểu này một cách rõ ràng ở bất kỳ đâu trong một số loại tệp CSS toàn cầu không? . Tailwind tự động làm điều đó cho chúng ta. Đó là vẻ đẹp của Tailwind
chúng tôi vẫn chưa hoàn thành. còn rất nhiều ưu điểm khác. Hãy nhìn vào chúng bây giờ
Ưu điểm của Tailwind CSS
Chế độ Just-In-Time [JIT] cung cấp thời gian xây dựng nhanh như chớp
Trước Tailwind v3, nó từng lọc qua tất cả các kiểu để loại bỏ bất kỳ kiểu nào không sử dụng, để bản dựng sản xuất duy trì ở mức nhỏ nhất có thể
Theo Tailwind, bản dựng sản xuất từng có dung lượng từ 5-10 kB. Nhưng đó là câu chuyện trong sản xuất. Trong môi trường phát triển, CSS có thể trở nên thực sự lớn, đặc biệt nếu chúng ta sử dụng nhiều cấu hình được cá nhân hóa
Với v3 trở lên, Tailwind đã phát hành một tính năng mới gọi là trình biên dịch Just-in-Time. Trình biên dịch JIT tránh biên dịch tất cả CSS trả trước và chỉ biên dịch CSS khi chúng ta cần
Điều này dẫn đến thời gian xây dựng nhanh như chớp trong tất cả các môi trường. Và khi các kiểu được tạo và khi chúng ta cần chúng, không cần phải xóa các kiểu không sử dụng. Điều này có nghĩa là CSS trong tất cả các môi trường sẽ giống nhau. Điều này giúp chúng tôi thoát khỏi nỗi sợ bất kỳ CSS quan trọng nào bị xóa trong quá trình sản xuất
Đó là quan điểm và linh hoạt cùng một lúc
CSS của Tailwind được đánh giá cao. Nó chỉ định một số hạn chế khi nói đến kiểu dáng và nếu bạn hỏi tôi thì điều này thật tốt vì nó giúp chúng tôi giữ phần thiết kế cho những người thực sự hiểu nó
Chỉ cần nhìn vào một trong các lớp tiện ích để thêm
Document
Hello world 1
Hello world 2
Hello world 3
5 vào
Document
Hello world!
8 của bạn [nguồn]Như bạn có thể thấy, chỉ có 8 biến thể của bóng đổ mà Tailwind cung cấp. Có các giá trị đặt trước cho độ lệch dọc và ngang, làm mờ, trải rộng, màu sắc và độ mờ. Đó là lý do tại sao Tailwind được bảo thủ
Nó cố gắng đưa ra ý kiến về việc nên chọn giá trị thuộc tính nào trên hầu hết tất cả các thuộc tính kiểu dáng hiện có. Và tin tôi đi, trong hầu hết các trường hợp, 8 biến thể này [cho
Document
Hello world 1
Hello world 2
Hello world 3
5] sẽ là quá đủ để tạo ra một giao diện người dùng tuyệt vờiVí dụ, trong ví dụ thực hành ở trên, tôi đã sử dụng
Document
Hello world 1
Hello world 2
Hello world 3
8 trong lớp cha chính
Document
Hello world!
8 để có được bóng hộp bên ngoài đẹp mắt đóSử dụng cùng một biến thể của một lớp tiện ích cụ thể tại các khu vực khác nhau trong giao diện người dùng cũng đảm bảo tính đồng nhất trên toàn bộ ứng dụng và mang lại trải nghiệm người dùng tốt hơn
Nhưng trong trường hợp bạn cần một số giá trị thực sự tùy chỉnh cho bất kỳ phong cách cụ thể nào, bạn có thể nhận được điều đó bằng cách thêm một chủ đề tùy chỉnh trong
.bg-blue {
background-color: rgb[81, 191, 255];
}
60. Ví dụ: để có được một .bg-blue {
background-color: rgb[81, 191, 255];
}
61 [Tailwind không cung cấp sẵn .bg-blue {
background-color: rgb[81, 191, 255];
}
61], bạn có thể thêm các dòng sau vào .bg-blue {
background-color: rgb[81, 191, 255];
}
63 trong .bg-blue {
background-color: rgb[81, 191, 255];
}
60
Document
Hello world!
3Và bây giờ với sự ra đời của JIT, bạn cũng có thể sử dụng một giá trị tùy ý bên trong dấu ngoặc vuông
.bg-blue {
background-color: rgb[81, 191, 255];
}
65 như sau
Document
Hello world!
5Sử dụng các giá trị tùy ý có thể hữu ích khi bạn chỉ cần một kiểu cụ thể ở một vài nơi. Và trong trường hợp này, tạo chủ đề cho nó trong
.bg-blue {
background-color: rgb[81, 191, 255];
}
60 có vẻ không cần thiếtSuy nghĩ của tôi
Tôi thực sự hy vọng rằng tôi có thể giúp bạn hiểu Tailwind CSS là gì và bạn có thể làm gì với nó
Tailwind là một khung CSS cung cấp cho chúng tôi các lớp tiện ích có mục đích duy nhất, phần lớn được coi là quan trọng và giúp chúng tôi thiết kế các trang web của mình ngay bên trong phần đánh dấu hoặc. js/. jsx/. ts/. tập tin tsx
Theo tôi, Tailwind rất đơn giản và dễ hiểu. Đúng là có thể mất một chút thời gian để hiểu rõ tất cả các tên lớp tiện ích, nhưng đừng lo – bạn có thể tham khảo tài liệu của họ bất cứ khi nào bạn gặp khó khăn
Và đối với tất cả những người mới bắt đầu hành trình phát triển web, điều rất quan trọng là phải biết CSS3 là gì trước khi bạn khám phá Tailwind [hoặc bất kỳ khung CSS nào khác như Bootstrap, Windi CSS, v.v.]
kết thúc
Cảm ơn vì đã đọc. Tôi thực sự hy vọng bạn thích đọc về Tailwind CSS trong bài viết này và thấy nó hữu ích
Hãy cân nhắc chia sẻ nó với bạn bè của bạn, tôi thực sự đánh giá cao điều đó. Theo dõi tôi trên LinkedIn và Twitter [xem bên dưới] và theo dõi để biết thêm nội dung tuyệt vời. hòa bình ra. 🖖
đường liên kết mạng xã hội
- Trang mạng
- Blog khác của tôi
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
SDE 2 @ Mastercard • IIT Kanpur • Tech Blogger
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu