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

  
    
    
    
    
    
  
  
    
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ẻ

  
    
    
    
    
    
  
  
    
Hello world!
  

1, nó sẽ có nền màu xanh lam với màu là

  
    
    
    
    
    
  
  
    
Hello world!
  

2 như bạn có thể thấy trong đoạn mã trên

Và đây là HTML

  
    
    
    
    
    
  
  
    
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

  
    
    
    
    
    
  
  
    
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

  
  
    
      
      
      
      
      
    
    
      
  Hello world!
    
  
  

  6 được sử dụng nhiều lần trong dòng 12 và 14

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

  
  
    
      
      
      
      
      
    
    
      
  Hello world!
    
  
  

  8
• mục-trung tâm. để áp dụng thuộc tính CSS

  
  
    
      
      
      
      
      
    
    
      
  Hello world!
    
  
  

  9 cho một

  
  
    
      
      
      
      
      
    
    
      
  Hello world!
    
  
  

  8
• 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);
}

6

hoặ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);
}

8

Khi 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

  
    
    
    
    
    
  
  
    
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

  
    
    
    
    
    
  
  
    
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ư

  
    
    
    
    
    
  
  
    
Hello world 1
    
Hello world 2
    

      
Hello world 3
    
  

0,

  
    
    
    
    
    
  
  
    
Hello world 1
    
Hello world 2
    

      
Hello world 3
    
  

1,

  
    
    
    
    
    
  
  
    
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

  
    
    
    
    
    
  
  
    
Hello world!
  

0

bằng cách chỉ đề cập đến

  
    
    
    
    
    
  
  
    
Hello world 1
    
Hello world 2
    

      
Hello world 3
    
  

3 trong thẻ

  
    
    
    
    
    
  
  
    
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

  
    
    
    
    
    
  
  
    
Hello world 1
    
Hello world 2
    

      
Hello world 3
    
  

5 vào

  
    
    
    
    
    
  
  
    
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

  
    
    
    
    
    
  
  
    
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ời

Ví dụ, trong ví dụ thực hành ở trên, tôi đã sử dụng

  
    
    
    
    
    
  
  
    
Hello world 1
    
Hello world 2
    

      
Hello world 3
    
  

8 trong lớp cha chính

  
    
    
    
    
    
  
  
    
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

  
    
    
    
    
    
  
  
    
Hello world!
  

3

Và 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

  
    
    
    
    
    
  
  
    
Hello world!
  

5

Sử 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ết

Suy 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

• LinkedIn
• Trang mạng
• Blog khác của tôi
• Twitter

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

---

soham de roy

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

Ai đứng sau Tailwind CSS?

Tailwind CSS có phù hợp để sản xuất không?

CSS Tailwind có thể bảo trì được không?

Netflix có sử dụng Tailwind CSS không?