Bạn có cảm thấy mệt mỏi khi sử dụng CSS3 và tự mình tạo kiểu cho mọi thứ không?
Tailwind là một khung ưu tiên tiện ích sẽ giúp cuộc sống của bạn dễ dàng hơn rất nhiều vì nó có rất nhiều lớp
Trong video này, chúng ta sẽ thiết lập Tailwind, tìm hiểu về phông chữ, màu sắc, căn chỉnh, màu nền, độ dốc, hình ảnh, phần đệm, lề, lưới, flexbox, di chuột, hoạt ảnh, chuyển tiếp và biến đổi
Bên cạnh đó, chúng ta sẽ đi sâu vào thiết kế đáp ứng và cách tùy chỉnh Tailwind. Khi kết thúc khóa học, bạn sẽ học cách xóa tệp CSS Tailwind của mình vì tệp này có dung lượng gần 5MB
Chúng tôi sẽ không tạo dự án ở đây mà chỉ đề cập đến các chủ đề quan trọng mà bạn cần biết trước khi bắt đầu sử dụng TailwindCSS. Đây là chuỗi video tôi đã tạo cho kênh YouTube của mình nhưng tôi nghĩ mình sẽ thêm nó vào Udemy
Sau khi thử nghiệm Tailwind, dưới đây là những điều bạn nên biết trước khi bắt đầu với Tailwind CSS -
- HTML cơ bản [đặc biệt là Lớp và Id]
- CSS cơ bản
- Khả năng đáp ứng trên thiết bị di động và máy tính để bàn
- NodeJS nên được cài đặt sẵn
- Ít kiến thức về gói npm
Tôi đã bắt đầu như thế nào
Tailwind rất dễ sử dụng và bạn có thể nắm bắt nếu bạn có kiến thức tốt về CSS. Vì đó là cùng một CSS mà chúng tôi đang viết nhưng tóm lại, tôi không cần học thêm bất cứ điều gì trước khi có thể bắt đầu học Tailwind
To start with Tailwind, I followed the playlist of Tailwind Lab's on YouTube: Tailwind CSS: from Zero to Production . This playlist really explains everything in a clear-cut and short way. I learnt how to set up a Tailwind project, that is to download all the important files[ like package.json, tailwind.config file ] and other handy plugins. After been done learning about how Tailwind pretty much works, I started exploring Tailwind's documentation, which is one of the best docs I came across up till now. While fiddling with documentation and trying to implement things on my own, I learnt how to develop normal web pages with proper styling and responsiveness through Tailwind CSS. Afterwards, I jumped on to some advanced stuff like creating my own classes, how to make and use custom colours and properties!< br/>
Những khó khăn tôi gặp phải
Đối với tôi, ban đầu quá trình thiết lập dự án Tailwind của bạn hơi khó khăn, mặc dù thời gian trôi qua, mọi thứ đã trở nên rõ ràng.
Một vấn đề khác mà tôi gặp phải là vì chúng tôi đang định kiểu mã bên trong tệp HTML của mình [các lớp được xác định chính xác], mã bắt đầu trông rất khó hiểu, đặc biệt là khi bạn phải định kiểu rất nhiều cho các phần tử của mình
Dễ học
Học CSS Tailwind hoàn toàn không khó vì như tôi đã đề cập ở trên, bạn không cần phải học gì thêm vì chúng tôi đang viết CSS cũ đó
Tài liệu của Tailwind có một trong những lời giải thích tốt nhất cho cùng một nội dung, đó là các khái niệm cốt lõi, cách thức hoạt động và cách sử dụng của nó
Các lớp được sử dụng trong tailwind rất dễ dàng và đơn giản, bạn không cần phải xem lại tài liệu của nó để xem tên lớp
Bootstrap so với CSS Tailwind
Bootstrap và Tailwind, cả hai đều là một trong những khung CSS được sử dụng nhiều nhất
Bootstrap cho phép bạn nhanh chóng thiết kế và tùy chỉnh các trang web ưu tiên thiết bị di động đáp ứng. Đó là bộ công cụ nguồn mở giao diện người dùng phổ biến nhất trên thế giới, bao gồm các biến Sass và mixin, hệ thống lưới đáp ứng, các thành phần dựng sẵn mở rộng và các plugin JavaScript mạnh mẽ
1. khả năng tùy biến
- Tailwind theo mình là rất linh hoạt [có thể tùy chỉnh]. Bạn có thể tự mình quyết định tất cả các thuộc tính và giá trị và không bao giờ cần phải viết thêm CSS. Khi nói về thuộc tính tùy chỉnh, bạn có thể dễ dàng tạo màu tùy chỉnh, sử dụng phông chữ bên ngoài, v.v. bằng cách tạo thuộc tính tùy chỉnh trong tệp cấu hình Tailwind của mình
- Không giống như Tailwind CSS, Bootstrap không thể tùy chỉnh nhiều vì nó có các phần tử được tạo kiểu sẵn và đôi khi bạn có thể cân nhắc tạo một tệp CSS để thay đổi kiểu dáng mặc định do Bootstrap cung cấp và thêm một chút nét riêng của bạn
2. Sử dụng với Bộ tiền xử lý CSS
- Vì Tailwind là plugin PostCSS nên có thể dễ dàng sử dụng plugin này với các trình tiền xử lý khác như Sass, Less, Stylus, v.v., giống như bạn có thể làm với các plugin PostCSS khác như Autoprefixer
- Bootstrap đi kèm với vanilla CSS, nhưng mã nguồn của nó sử dụng hai bộ tiền xử lý CSS phổ biến nhất là Less và Sass. Theo mặc định, nó đi kèm với các biến Sass và mixin
3. Loại bỏ các lớp không sử dụng
Cả Tailwind CSS và Bootstrap đều sử dụng PurgeCSS để xóa tất cả các lớp css chưa được xử lý chỉ giúp tăng kích thước tệp
Hướng dẫn về CSS của Tailwind cũng như các ví dụ về CSS của Tailwind là những thứ có thể rất hữu ích cho những người mới bắt đầu muốn nắm vững kiến thức cơ bản về khung CSS ưu tiên tiện ích này. Nhưng không chỉ đối với họ.
Việc xây dựng các thiết kế trang web hấp dẫn bằng CSS có thể là một việc khó khăn khi mới bắt đầu. Vì vậy, nếu bạn muốn học CSS Tailwind nhanh, thì bạn nên đọc hướng dẫn chi tiết của chúng tôi. Là một phần của hướng dẫn về Tailwind, một số ví dụ thú vị về Tailwind cũng sẽ được cung cấp. Vì vậy, nếu bạn muốn tìm hiểu về Tailwind, hãy sớm bắt đầu với chúng tôi
Trong hướng dẫn mở rộng về Tailwind này, các chủ đề sau sẽ được thảo luận
1. Tóm tắt CSS Tailwind
2. Hướng dẫn và ví dụ về Tailwind CSS
3. Giờ thì bạn đã biết cách sử dụng Tailwind CSS trong các dự án của mình
Tóm tắt TailwindCSS
Tailwind là một khung CSS giúp các nhà phát triển bắt đầu một dự án mới với một tập hợp các kiểu tiện ích để tạo các ứng dụng web đẹp và có thể mở rộng một cách nhanh chóng và dễ dàng. Các khung CSS vẫn là một công cụ phổ biến trong bộ công cụ giao diện người dùng và có rất nhiều lý do chính đáng cho điều đó
Trước hết – các phần tử HTML gốc không đẹp và đôi khi nó yêu cầu rất nhiều CSS để làm cho các trang web hấp dẫn và phản hồi nhanh. Các khung CSS giúp các nhà phát triển bắt đầu với một bộ cơ bản gồm các kiểu phong phú và có thể tùy chỉnh cho các thành phần khác nhau, thường là với cách tiếp cận ưu tiên thiết bị di động.
Ưu tiên thiết bị di động có nghĩa là trang được tạo có tính đến kích thước màn hình của thiết bị di động và bố cục của trang được điều chỉnh dần dần để có độ phân giải cao hơn. Cách thiết kế trang web này được nhiều người coi là cách viết ứng dụng dễ dàng hơn nhiều so với việc bắt đầu với bố cục cho độ phân giải màn hình nền, sau đó nén trang để vừa với màn hình nhỏ hơn.
Tại sao nên sử dụng khung CSS?
Nếu chúng tôi không có hệ thống thiết kế, các khung CSS có thể cung cấp cho chúng tôi một bộ khối xây dựng đẹp mắt để làm cho ứng dụng trở nên thanh lịch về mặt trực quan. Bảng quản trị nội bộ thường là trường hợp của các ứng dụng như vậy. Tính năng quan trọng hơn vẻ ngoài và chúng thường không có bất kỳ thiết kế nào cả. Nếu chúng được xây dựng bằng khung CSS, nhà phát triển giao diện người dùng có thể dễ dàng tạo các ứng dụng web dễ nhìn
Tương tự, nếu chúng ta cần tạo một trang đơn giản giới thiệu một thành phần hoặc chức năng đơn lẻ, hãy tạo một ứng dụng nhỏ cho cuộc thi hackathon hoặc làm việc trên một dự án phụ sau nhiều giờ thì thật tốt khi có một giải pháp sẵn sàng sử dụng để tạo kiểu nhanh và đẹp. Nếu bạn được giao nhiệm vụ tạo một ứng dụng web như một phần của quy trình phỏng vấn, giao diện của ứng dụng có thể có ý nghĩa nhiều nếu không muốn nói là nhiều hơn bản thân mã và chức năng
Mặt khác, nếu chúng tôi đang tạo một ứng dụng mới trong nhóm có các nhà thiết kế UX chuyên dụng, thiết kế thường đòi hỏi nhiều công việc để thực hiện. Thiết lập chủ đề có thể bao gồm không gian, màu sắc, lưới và tất cả những thứ đó cho các độ phân giải màn hình khác nhau không phải là một kỳ công dễ dàng. Do khả năng tùy chỉnh của khung CSS, chúng có thể được sử dụng làm xương sống để xây dựng kết quả mong muốn nhanh hơn và hiệu quả hơn
Khung CSS ưu tiên tiện ích
Tailwind CSS là tập hợp các lớp tiện ích, mỗi lớp chịu trách nhiệm về một số chức năng nhỏ. Đây có thể là màu văn bản, màu nền, khoảng cách hoặc đường viền. Cách tiếp cận như vậy cho phép chúng tôi viết một trang dựa trên cái gọi là CSS nguyên tử. Đó là một phương pháp hiện có nhiều người ủng hộ như đối thủ. Và các nhà phát triển phần mềm đã quen với việc viết và thiết kế CSS trong các dự án bằng cách sử dụng phương pháp thành phần. Trước tiên hãy giải thích hai cách tiếp cận là gì, để hiểu rõ hơn về sự khác biệt của chúng
Trong cách tiếp cận thành phần để viết CSS, mỗi thành phần [một thành phần có chức năng cụ thể như chọn, hộp văn bản đa dạng thức hoặc băng chuyền có hình ảnh] phải độc lập về HTML, mã JavaScript và kiểu của nó. Kiểu dáng của một thành phần không được ảnh hưởng đến sự xuất hiện của thành phần khác theo bất kỳ cách nào. Viết CSS như thế này rất thuận tiện và trực quan cho các nhà phát triển phần mềm. Tuy nhiên, giải pháp này có nhược điểm của nó
Vì CSS hoạt động trên toàn cầu nên chúng ta cần viết tên lớp theo cách có thể tránh được các xung đột tiềm ẩn. Chúng ta không thể có hai thành phần khác nhau xác định lớp
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
5. Có một số giải pháp cho phép chúng tôi tạo các tên lớp duy nhất để các kiểu không bị ghi đè một cách tình cờ. Rất may, gần đây chúng tôi đã có một tính năng tuyệt vời trong các trình duyệt có tên là ShadowDOM – một cách để tạo các kiểu hoàn toàn tách biệt với nhau. Thật không may, ngay cả khi chúng ta loại trừ vấn đề có khả năng xung đột tên, cách tiếp cận thành phần có một vấn đề khác, nghiêm trọng hơn. Nó liên quan đến phát triển ứng dụng. Bởi vì chúng tôi quan tâm đến tính duy nhất của lớp, các tệp CSS của chúng tôi ngày càng lớn hơn khi số lượng thành phần tăng lên và số lượng biến thể của chúng nhân lênTheo cách tiếp cận nguyên tử để viết CSS, chúng tôi có nhiều lớp chỉ kiểm soát các khía cạnh nhỏ của giao diện. Các lớp được xác định trước và được đặt tên rõ ràng, đồng thời với kho tài liệu được ghi lại về chúng, chúng tôi chỉ định một số ít được chọn cho các phần tử cụ thể
Đối với nhiều nhà phát triển, cách tiếp cận mà Tailwind CSS quảng bá có vẻ kỳ lạ và không chính đáng. Người ta thường nhầm lẫn rằng nhiều lớp sẽ khiến kích thước cuối cùng của CSS được gửi cùng với HTML quá lớn và việc quản lý chúng sẽ trở nên phức tạp và không thực tế. Trong khi đó, không thiếu ý kiến cho rằng sự thật hoàn toàn ngược lại. Sau khi dùng thử Tailwind CSS, nhiều người nhận thấy phương pháp của nó rất dễ sử dụng. Vì các thành phần mới mà chúng tôi viết có thể sử dụng hầu hết các lớp hiện có, nên các tệp CSS phát triển chậm hơn và ít tích cực hơn so với cách tiếp cận truyền thống
Tailwind CSS - các tính năng và hạn chế
Bài viết này được viết dựa trên phiên bản Tailwind CSS 3 mới nhất. 0. 5. Nhiều lớp CSS mà nó cung cấp sử dụng các tính năng chỉ có trong các trình duyệt mới, chẳng hạn như
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
6,
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
7 và
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
8. Có nhiều cách để sao chép một số trong số này bằng cách sử dụng nhiều cách giải quyết và hack khác nhau, nhưng kết quả cuối cùng có thể không giống với những gì trình duyệt vốn cung cấp. Đó là lý do tại sao bạn phải luôn đảm bảo rằng trang web của mình sẽ trông giống nhau trên tất cả các trình duyệt được sử dụng bởi người dùng ứng dụng bạn đang tạo. Bạn có thể kiểm tra cơ sở dữ liệu được đề xuất về các chức năng được triển khai trong các phiên bản cụ thể của trình duyệt trên trang web Tôi có thể sử dụng khôngBắt đầu với phiên bản 2. 0. 0, Tailwind không còn hỗ trợ các trình duyệt cũ như Internet Explorer 11. Nếu chúng ta đang thực hiện một dự án cần giao diện đẹp như nhau trên chúng, thì chúng ta phải sử dụng phiên bản cũ hơn của Tailwind 1. 9. 0, nhưng bạn phải tính đến thực tế là không phải tất cả các tính năng được mô tả trong bài viết này đều được triển khai ở đó
Hướng dẫn và ví dụ về Tailwind CSS
Hãy xem cùng một thành phần có thể trông như thế nào từ phía mã được viết theo các phong cách khác nhau
Một thành phần thẻ đơn giản, có hình ảnh và văn bản bên trong. Khi bạn di chuột qua nó, màu nền sẽ thay đổi
Đầu tiên, hãy xem kiểu dáng của một phần tử như vậy có thể trông như thế nào theo truyền thống. Hãy xác định một lớp cho từng thành phần – thẻ, hình ảnh và văn bản, sau đó gán chúng cho các thành phần HTML. Trong ví dụ này, màu sắc và khoảng cách đã được chọn cụ thể để khớp với những màu có sẵn trong Tailwind CSS
.card {
border-radius: 0.375rem;
border: 1px solid rgb[115, 115, 115];
background-color: rgb[64, 64, 64];
transition: background-color 150ms cubic-bezier[0.4, 0, 0.2, 1];
color: rgb[245, 245, 245];
display: flex;
flex-direction: row;
align-items: flex-start;
cursor: pointer;
}
.card:hover {
background-color: rgb[82, 82, 82];
}
.card-img {
padding: 1rem 0rem 1rem 1rem;
align-items: center;
aspect-ratio: 1 / 1;
}
.card-contents {
line-height: 1rem;
margin: 0.75rem 1rem;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Mã HTML + CSS mà chúng tôi sẽ phải viết thủ công để tạo kiểu cho thẻ bằng hình ảnh
Bây giờ, hãy xem cách chúng ta có thể đạt được hiệu quả tương tự bằng cách sử dụng các lớp tạo sẵn mà Tailwind CSS cung cấp cho chúng ta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Phần tử tương tự được viết bằng Tailwind CSS. Chúng tôi không cần một dòng CSS nào ở đây vì chúng tôi sử dụng các lớp được cung cấp
Tuy nhiên, nếu chúng ta không cảm thấy thuyết phục khi chỉ định một số lượng lớn các lớp cho mỗi thành phần HTML, thì Tailwind cũng cho phép chúng ta sử dụng nó theo cách thành phần. Nếu chúng tôi sử dụng công cụ mà nó cung cấp, chúng tôi sẽ có quyền truy cập vào các lệnh đặc biệt trong các tệp CSS có tên là
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
9 để sao chép các kiểu từ các lớp riêng lẻ sang một bộ chọn cụ thể
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Sử dụng lệnh
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
9 từ Tailwind CSS để tạo các lớp có kiểu từ các lớp tiện ích được liệt kêNhư bạn có thể thấy, Tailwind CSS không ép buộc chúng tôi áp dụng bất kỳ cách tiếp cận nào và chúng tôi có thể sử dụng nó một cách thoải mái và phù hợp. Tuy nhiên, các tác giả của Tailwind CSS khuyên bạn nên sử dụng nhiều lớp và gán chúng trong HTML, đây là một cách tiếp cận nguyên tử
Cách sử dụng Tailwind CSS
Tailwind không chỉ là một tập hợp các lớp CSS. Nó cũng là một công cụ cho phép chúng tôi định cấu hình nhiều giá trị như màu sắc hoặc khoảng cách theo nhu cầu của chúng tôi. Nó cũng cung cấp một công cụ khai thác quét việc sử dụng các lớp trong các tệp HTML, JS và CSS của chúng tôi và chỉ nhập tập hợp con của các lớp mà chúng tôi sử dụng. Nhờ đó, chúng tôi không phải lo lắng rằng chúng tôi sẽ gửi hàng kilobyte CSS không sử dụng
Để sử dụng công cụ này, chúng ta cần cài đặt một gói từ sổ đăng ký npm có tên là
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
1 và sử dụng nó để tạo tệp cấu hình. Đang ở trong một dự án sử dụng nodejs, chúng ta cần gõ hai lệnh trong bảng điều khiển
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
0Lệnh đầu tiên cài đặt
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
1 dưới dạng phần phụ thuộc của nhà phát triển. Cái thứ hai khởi chạy tập lệnh init của nóCái đầu tiên sẽ tải xuống thư viện Tailwind CSS, thư viện này có tất cả các lớp trong đó, cũng như một công cụ hữu ích để sử dụng chúng. Lệnh thứ hai sẽ tạo một tệp cấu hình có tên là
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3, cho phép chúng tôi điều chỉnh Tailwind theo nhu cầu của mình. Các tập tin trông như thế này
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3Tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3 trống
Bây giờ chúng ta cần thêm một quy tắc đường dẫn để khớp với các tệp HTML và CSS của chúng ta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
5Tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3 có mẫu toàn cầu nội dung
Bằng cách này, Tailwind CSS sẽ biết nơi để tìm việc sử dụng các lớp của nó. Trong quá trình xây dựng dự án của chúng tôi, chỉ những lớp được sử dụng ở bất kỳ đâu trong tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
6 và
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
7 mới được đưa vào tệp CSS cuối cùng, không có gì khác sẽ được đưa vào. Giả sử rằng tệp duy nhất trong thư mục
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
8 sẽ là tệp HTML có thành phần thẻ mà chúng ta đã viết trước đó. Tệp này chỉ sử dụng các lớp do Tailwind cung cấp và không xác định bất kỳ kiểu nào khác. Để xây dựng tệp CSS cho tệp này, chúng ta cần gọi lệnh
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
1 với các đối số sau
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
1Lệnh tạo tệp CSS đầu ra với các lớp CSS Tailwind được sử dụng.
Tùy chọn
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
00 xác định đường dẫn đến tệp mà Tailwind CSS sẽ tạo cho chúng ta. Sau khi chạy lệnh, khi xem trong tệp
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
01, chúng ta sẽ thấy Tailwind CSS đầu tiên đặt rất nhiều mã CSS ở đó và chỉ ở cuối các lớp mà chúng ta đã sử dụng. Mục đích của mã ban đầu là để bù cho sự khác biệt trong cách hiển thị giữa các trình duyệt để các trang của chúng tôi trông giống nhau khi sử dụng các phần tử HTML gốc. Đây là một thủ tục phổ biến và thường được gọi là "bình thường hóa". Tailwind đặc biệt sử dụng thư viện chuẩn hóa hiện đại cho mục đích này. Tất nhiên, chúng tôi có thể vô hiệu hóa việc bao gồm mã này nếu chúng tôi tải nó lên dưới dạng tệp độc lập hoặc đơn giản là chúng tôi không cần chức năng này. Chúng ta chỉ cần thêm tùy chọn
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
02 vào tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3 là
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
04`
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
7Vô hiệu hóa tạo mã bình thường hóa CSS
Chúng tôi có thể tùy chọn chuyển một cờ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
05 cho lệnh để làm cho tệp CSS cuối cùng được thu nhỏ. Một tệp như vậy sẽ bị xóa tất cả các ký tự khoảng trắng để kích thước của nó sẽ nhỏ hơn nhiều, nhưng lập trình viên sẽ không thể đọc được tệp nữa. May mắn thay, chúng tôi không phải lo lắng về khả năng đọc của nó vì trong quá trình sản xuất, chúng tôi muốn tất cả các tệp CSS của mình càng nhỏ càng tốt và việc sử dụng phiên bản thu nhỏ là một thông lệ.Tailwind CSS cũng hỗ trợ nhiều framework phổ biến như Next. js, Gatsby, Laravel hoặc Tạo-React-App. Trên hết, bạn có thể sử dụng nó làm plugin cho thư viện PostCSS, thư viện này dễ dàng tích hợp với các gói hiện đang được sử dụng như webpack hoặc rollup
Một lớp, nhiều giá trị
Nhiều thuộc tính CSS nhận giá trị số. Đây thường là các thuộc tính kiểm soát kích thước hoặc khoảng cách giữa các phần tử. Hãy xem cách Tailwind CSS có thể được sử dụng để thêm các lề khác nhau cho một phần tử
ClassPropertiesm-0margin. 0pxmy-pxmargin-top. 1px; . 1px;mx-2lề-trái. 0. 5rem;lề-đáy. 1px;mx-2lề-trái. 0. 5rem;
lề-phải. 0. 5rem;ml-8lề-trái. 2remmr-36lề-phải. 9rem
Một bảng các lớp lề được chọn cho các mặt mô hình hộp khác nhau và các kích thước khác nhau và các thuộc tính kiểu tương ứng của chúng. my-px
Sự lựa chọn của các giá trị được hiển thị là ngẫu nhiên. Bảng này chỉ để cho thấy rằng các số không tương ứng trực tiếp với kích thước pixel mà đề cập đến một chỉ mục trong bảng kích thước được xác định. Chúng tôi cũng có thể lưu ý rằng Tailwind đã quyết định rằng tất cả các kích thước [ngoại trừ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
06] đều sử dụng đơn vị rem. Bây giờ chúng ta có thể xác định công thức gán lề cho phần tửm{ t. r. b. l. x. y}-{size}
Nếu muốn xem tất cả các kích thước có sẵn, chúng ta có thể dễ dàng kiểm tra chúng trong tài liệu CSS chính thức của Tailwind. Điều đáng nói là việc xác định phần đệm cho một phần tử được thực hiện theo cùng một cách, chúng chỉ khác nhau về tên, nhưng chữ cái xác định cạnh của mô hình hộp hoặc kích thước vẫn giống nhau
Nếu muốn sử dụng một giá trị cụ thể mà Tailwind CSS không cung cấp, thì chúng ta không nhất thiết phải sửa đổi giá trị đó và viết các lớp theo cách thủ công. Nếu đặt kích thước trong dấu ngoặc vuông, chúng ta có thể sử dụng bất kỳ giá trị CSS hợp lệ nào và Tailwind CSS sẽ đọc chính xác lớp và tạo lớp đó cho chúng ta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
0Mã HTML ngắn với các lớp sử dụng kích thước mà Tailwind CSS không cung cấp
Đối với mã HTML như vậy, các lớp được tạo để xác định
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
07 và
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
08. Đây rõ ràng không phải là một tính năng bạn nên sử dụng thường xuyên. Sẽ tốt hơn nhiều nếu sửa đổi các kích thước có sẵn hoặc thêm kích thước của riêng bạn. Tuy nhiên, nếu chúng tôi có một số trường hợp cần sử dụng kích thước không chuẩn, chúng tôi có một cách giải quyết dễ dàng để thêm chúngkhả năng đáp ứng
Viết các trang web đáp ứng đã trở thành một tiêu chuẩn để phát triển web ngày nay. Tỷ lệ thiết bị di động với tư cách là người nhận trang web đã trở nên quá lớn để bỏ qua. Tailwind CSS, theo một cách rất đơn giản, cho phép chúng tôi viết các trang một cách nhanh chóng. Mỗi lớp có trong Tailwind, chúng tôi có thể viết bằng tiền tố xác định kích thước mà lớp đó sẽ hoạt động. Tiền tố và truy vấn phương tiện tương ứng trông như thế này theo mặc định trong Tailwind CSS
tiền tố điểm dừng
chiều rộng tối thiểu
CSS
sm640px@media [chiều rộng tối thiểu. 640px] {. }md768px@media [chiều rộng tối thiểu. 768px] {. }lg1024px@media [chiều rộng tối thiểu. 1024px] {. }xl1280px@media [chiều rộng tối thiểu. 1280px] {. }2xl1536px@media [chiều rộng tối thiểu. 1536px] {. }Một bảng các tiền tố có sẵn, độ rộng tương ứng và truy vấn phương tiện
Giả sử chúng tôi muốn thẻ của mình từ ví dụ trước đó cập nhật chiều rộng để thẻ thay đổi giữa các kích thước thiết bị
Thành phần thẻ chiếm một tỷ lệ phần trăm khác nhau của chiều rộng có sẵn tùy thuộc vào chiều rộng của thiết bị mà trang được hiển thị
Để đạt được điều này, chúng ta chỉ cần thêm các lớp điều khiển độ rộng phù hợp sẽ chỉ hoạt động với các kích thước cụ thể
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3Việc thêm lớp
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
09 làm cho các thiết bị có chiều rộng từ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
30 thành phần sẽ chiếm 83. 3% chiều rộng có sẵn, đối với các thiết bị có chiều rộng từ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
31 sẽ là 66% và đối với
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
32 chỉ là 50%
Chế độ tối
Chế độ tối đã trở thành một yêu cầu ngày càng phổ biến vì một số người dùng thích chế độ này hơn là giao diện trang web có màu sáng. Đối với một số người, nó chỉ đơn giản là dễ chịu hơn trong nhận thức, những người khác cho rằng nó ít chói mắt hơn khi duyệt Internet vào ban đêm
Trong Tailwind CSS, việc xử lý chế độ tối được thực hiện tương tự như việc xử lý khả năng phản hồi. Chúng ta chỉ cần thêm tiền tố
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
33 vào tên lớp và lớp của chúng ta sẽ chỉ hoạt động nếu trang được khởi chạy ở chế độ tối. Rất may, phát hiện chế độ tối là một tính năng mà nhiều trình duyệt hỗ trợ nguyên bản. Khi chúng tôi đặt chế độ tối ở cấp hệ điều hành, trang web sẽ biết về nó và sẽ hiển thị chế độ phù hợp. Tuy nhiên, nếu cần chuyển đổi giữa các chế độ này theo cách thủ công, thì chúng ta có thể thay đổi hành vi của CSS Tailwind. Bằng cách định nghĩa
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
34 là một
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
35 trong tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3, các lớp có tiền tố
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
33 sẽ chỉ hoạt động nếu có một lớp
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
33 trên phần tử phía trên chúng
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
0Chuyển phát hiện chế độ tối tự động sang thủ công
Hãy lấy một ví dụ HTML đơn giản về cách chúng tôi có thể hiển thị và ẩn nội dung tùy thuộc vào chế độ tối khi nó được định cấu hình là `class`
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
1Ví dụ về mã HTML nơi chúng tôi có 2 tiêu đề
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
39 với nội dung khác nhau. Vì ở trên chúng ta có một phần tử với lớp `dark` nên chúng ta sẽ hiển thị một tiêu đề với nội dung "chế độ tối". Nếu chúng ta xóa nó và không có phần nào trong hệ thống phân cấp DOM trở lên, có một phần tử có lớp
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
33 – người dùng sẽ thấy tiêu đề có nội dung "Chế độ ánh sáng". Khả năng mở rộng Tailwind
Trong tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3, chúng ta có thể nhận thấy các trường
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
52 và
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
53. Chúng được dùng để tải các chức năng bổ sung lên Tailwind CSS và định cấu hình cho nhu cầu của chúng tôi. Sử dụng thuộc tính
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
52, chúng ta có thể thêm phần mở rộng, e. g. một màu hoặc khoảng cách mới và Tailwind CSS sẽ tạo cho chúng ta các lớp sẽ được viết theo cách giống như các lớp tích hợp sẵn. Chúng tôi cũng có thể ghi đè các giá trị nếu giá trị ban đầu của chúng không phù hợp với nhu cầu của chúng tôi
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
2Một ví dụ về tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3 trong đó chúng tôi đã thay đổi sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
56 mặc định trong chủ đề và mở rộng nó bằng một màu bổ sung có tên `nửa đêm`
Các plugin thêm một tập hợp các lớp bổ sung, đáng nói ở đây là các kiểu chữ và biểu mẫu bổ sung chính thức. Cái đầu tiên thêm một vài lớp để hiển thị nội dung dưới dạng văn bản Markdown. Nó rất hữu ích khi chúng ta cần hiển thị HTML với các thẻ ngữ nghĩa mà chúng ta không có quyền truy cập, vì vậy chúng ta không thể thêm các lớp của mình vào đó. Điều này thường xảy ra khi chúng ta cần hiển thị nội dung từ CMS. Cái thứ hai chỉ đơn giản là chịu trách nhiệm tạo kiểu dáng cho các biểu mẫu; . Chúng ta có thể chọn tùy chọn mà chúng ta phải gán các lớp `form-input` theo cách thủ công để áp dụng các kiểu
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3Cấu hình CSS Tailwind với plugin kiểu chữ và biểu mẫu. Bằng cách định cấu hình chiến lược plugin biểu mẫu, chúng tôi phải chỉ định thủ công trường biểu mẫu nào sẽ được tạo kiểu
hỗ trợ biên tập viên
Tailwind CSS có một tính năng tuyệt vời khác trong cửa hàng bên cạnh một công cụ để tạo tệp CSS. Nếu công cụ của chúng tôi trong công việc hàng ngày là Visual Studio Code, thì chúng tôi có một plugin chính thức cho nó. Nhờ nó, trong các tệp HTML và CSS, chúng tôi có các lớp tự động đề xuất và một danh sách các giá trị có sẵn cho chúng. Chúng ta cũng có thể thấy màu đã sử dụng được đặt trước tên lớp và khi di chuột qua một trong các lớp, chúng ta có bản xem trước của mã CSS thực được xác định bởi nó
Hiển thị tự động đề xuất tên lớp khi chỉnh sửa tệp HTML. Khi chúng ta di chuột qua một lớp, chúng ta có thể xem nó chứa mã CSS nào
Điều đáng nói là nếu chúng tôi mở rộng hoặc thay đổi cấu hình của Tailwind với tệp
.card {
@apply rounded-md border border-neutral-500 bg-neutral-700 hover:bg-neutral-600 transition-colors text-neutral-100 flex flex-row items-start cursor-pointer;
}
.card-img {
@apply py-4 pl-4 aspect-square;
}
.card-contents {
@apply mx-4 my-3 leading-4;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
3 thì những thay đổi của chúng tôi cũng sẽ được tính đến trong Visual Studio Code. Các đề xuất và mã CSS được tạo hoạt động ngay cả đối với màu tùy chỉnh, khoảng cách, v.v. mà chúng tôi đã xác địnhNếu chúng tôi muốn sử dụng IDE từ JetBrains, thì cũng có một plugin dành cho họ, cung cấp các tiện ích tương tự
nguyên mẫu
Nếu bạn không muốn loay hoay với việc định cấu hình dự án để sử dụng Tailwind CSS, thì có một cách để bạn có thể dễ dàng đưa dự án đó lên trang web của chúng tôi. Bạn chỉ cần nhúng tập lệnh từ CDN
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
4Sau khi thêm một tệp JavaScript vào trang, chúng ta có thể sử dụng các lớp CSS của Tailwind trong HTML
Điều đáng nói là việc sử dụng Tailwind CSS theo cách như vậy không phù hợp làm giải pháp sản xuất. Đây chỉ là một cách đơn giản và dễ dàng để kiểm tra xem chúng tôi đang làm việc với nó như thế nào
Giờ thì bạn đã biết cách sử dụng Tailwind CSS trong các dự án của mình
Tôi hy vọng bạn có thể tìm hiểu xem Tailwind CSS có thể mạnh mẽ và linh hoạt như thế nào. Nó cung cấp cho chúng tôi một bộ sưu tập phong phú các lớp CSS và cho phép chúng tôi dễ dàng tạo các trang web phản hồi với sự hỗ trợ cho chế độ tối phổ biến. Nhờ đó, các trang của chúng tôi đáp ứng các yêu cầu hiện nay trong khi vẫn cung cấp kích thước hợp lý cho các tệp CSS được tải lên
Các lớp trong Tailwind CSS được viết bằng các trình duyệt hiện đại và tính năng của chúng. Để làm việc với nó thú vị, các tác giả cần đưa ra một số quyết định dũng cảm, cụ thể là thiếu hỗ trợ cho các trình duyệt cũ hơn. Chúng ta nên luôn nhớ chọn công nghệ một cách có trách nhiệm và cân nhắc dựa trên yêu cầu của mình
Có rất nhiều lớp mà Tailwind CSS cung cấp và mặc dù có tài liệu tuyệt vời nhưng ban đầu có vẻ khó khăn do phải chuyển đổi liên tục giữa lớp đó và trình chỉnh sửa. May mắn thay, với sự trợ giúp của một plugin cung cấp các đề xuất tên lớp và bản xem trước các giá trị của chúng. Đây là một công cụ giúp cho những bước khởi đầu dễ dàng hơn, nhưng nó cũng không thể thiếu trong công việc hàng ngày – ngay cả đối với những nhà phát triển phần mềm đã có một số kinh nghiệm với Tailwind CSS
Rất thường xuyên, các lập trình viên gặp vấn đề với việc làm thế nào để chọn một tên hay cho một biến, lớp hoặc hàm; . May mắn thay, Tailwind CSS đã loại bỏ vấn đề này vì chúng tôi có sẵn một tập hợp các lớp được đặt tên với đầy đủ tài liệu. Mỗi tên xác định cả thuộc tính và giá trị, đồng thời cũng có thể tùy chọn điểm ngắt và hoạt động ở chế độ tối hoặc sáng. Điều này loại bỏ vấn đề đặt tên và giúp việc sử dụng Tailwind CSS nhanh hơn theo thời gian bằng cách ghi nhớ chúng ta có những lớp nào và chúng dùng để làm gì
Nếu chúng tôi có nhận xét hoặc đề xuất về các kiểu tích hợp sẵn mà Tailwind CSS cung cấp, thì chúng tôi có thể tùy chỉnh chúng theo nhu cầu của mình một cách rất dễ dàng. Chúng tôi không chỉ có thể thêm các giá trị mới mà còn có thể thay đổi các giá trị mặc định cho điểm dừng, kích thước văn bản và phông chữ
Nói tóm lại, Tailwind CSS là một công cụ tuyệt vời để bắt đầu các dự án mới và đã được thiết kế theo cách giúp nó mở rộng quy mô phù hợp với sự phát triển của ứng dụng. Nói chung, chắc chắn bạn nên học Tailwind CSS, sử dụng nó trong các dự án của bạn và xây dựng các thiết kế trang web hấp dẫn với nó
Và trải nghiệm của bạn khi sử dụng các lớp CSS của Tailwind là gì?