Sử dụng các biến thể tiện ích responsive để xây dựng giao diện người dùng thích ứng.
Mọi lớp tiện ích trong Tailwind đều có thể được áp dụng có điều kiện tại các breakpoint khác nhau, điều này giúp việc xây dựng các giao diện responsive phức tạp trở nên dễ dàng mà không cần rời khỏi HTML của bạn.
Đầu tiên, hãy đảm bảo bạn đã thêm thẻ meta viewport vào <head> của tài liệu:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Sau đó, để thêm một tiện ích nhưng chỉ cho nó có hiệu lực tại một breakpoint nhất định, tất cả những gì bạn cần làm là thêm tiền tố tên breakpoint vào trước tiện ích, theo sau là ký tự ::
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens --><img class="w-16 md:w-32 lg:w-48" src="..." />Có năm breakpoint mặc định, lấy cảm hứng từ các độ phân giải thiết bị phổ biến:
| Tiền tố Breakpoint | Chiều rộng tối thiểu | CSS |
|---|---|---|
sm | 40rem (640px) | @media (width >= 40rem) { ... } |
md | 48rem (768px) | @media (width >= 48rem) { ... } |
lg | 64rem (1024px) | @media (width >= 64rem) { ... } |
xl | 80rem (1280px) | @media (width >= 80rem) { ... } |
2xl | 96rem (1536px) | @media (width >= 96rem) { ... } |
Điều này hoạt động cho mọi lớp tiện ích trong framework, nghĩa là bạn có thể thay đổi bất cứ thứ gì tại một breakpoint nhất định — ngay cả những thứ như khoảng cách chữ hoặc kiểu con trỏ.
Dưới đây là một ví dụ đơn giản về thành phần trang tiếp thị sử dụng bố cục xếp chồng trên màn hình nhỏ và bố cục song song trên màn hình lớn hơn:
<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl"> <div class="md:flex"> <div class="md:shrink-0"> <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture" /> </div> <div class="p-8"> <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Company retreats</div> <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline"> Incredible accommodation for your team </a> <p class="mt-2 text-gray-500"> Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that. </p> </div> </div></div>Dưới đây là cách ví dụ trên hoạt động:
div bên ngoài là display: block, nhưng bằng cách thêm tiện ích md:flex, nó trở thành display: flex trên màn hình trung bình và lớn hơn.md:shrink-0 để ngăn thu nhỏ trên màn hình trung bình và lớn hơn. Về mặt kỹ thuật, chúng ta có thể chỉ cần sử dụng shrink-0 vì nó sẽ không làm gì trên màn hình nhỏ hơn, nhưng vì nó chỉ quan trọng trên màn hình md, nên việc làm rõ điều đó trong tên lớp là một ý tưởng hay.md:h-full md:w-48.Chúng ta chỉ sử dụng một breakpoint trong ví dụ này, nhưng bạn có thể dễ dàng tùy chỉnh thành phần này ở các kích thước khác bằng cách sử dụng các tiền tố responsive sm, lg, xl hoặc 2xl.
Tailwind sử dụng hệ thống breakpoint mobile-first, tương tự như những gì bạn có thể đã quen trong các framework khác như Bootstrap.
Điều này có nghĩa là các tiện ích không có tiền tố (như uppercase) có hiệu lực trên tất cả các kích thước màn hình, trong khi các tiện ích có tiền tố (như md:uppercase) chỉ có hiệu lực tại breakpoint được chỉ định trở lên.
Điểm khiến mọi người ngạc nhiên nhất về cách tiếp cận này là để tạo kiểu cho thiết bị di động, bạn cần sử dụng phiên bản không có tiền tố của tiện ích, chứ không phải phiên bản có tiền tố sm:. Đừng nghĩ sm: có nghĩa là "trên màn hình nhỏ", hãy nghĩ về nó là "tại breakpoint nhỏ".
Đừng sử dụng sm: để nhắm mục tiêu thiết bị di động
<!-- This will only center text on screens 640px and wider, not on small screens --><div class="sm:text-center"></div>Sử dụng các tiện ích không có tiền tố để nhắm mục tiêu thiết bị di động và ghi đè chúng tại các breakpoint lớn hơn
<!-- This will center text on mobile, and left align it on screens 640px and wider --><div class="text-center sm:text-left"></div>Vì lý do này, thường là một ý tưởng hay khi triển khai bố cục di động cho một thiết kế trước, sau đó xếp lớp các thay đổi hợp lý cho màn hình sm, tiếp theo là màn hình md, v.v.
Theo mặc định, các kiểu được áp dụng bởi các quy tắc như md:flex sẽ áp dụng tại breakpoint đó và duy trì áp dụng tại các breakpoint lớn hơn.
Nếu bạn muốn áp dụng một tiện ích chỉ khi một khoảng breakpoint cụ thể đang hoạt động, hãy xếp chồng một biến thể responsive như md với một biến thể max-* để giới hạn kiểu đó trong một khoảng cụ thể:
<div class="md:max-xl:flex"> <!-- ... --></div>Tailwind tạo ra một biến thể max-* tương ứng cho mỗi breakpoint, vì vậy các biến thể sau có sẵn ngay lập tức:
| Biến thể | Media query |
|---|---|
max-sm | @media (width < 40rem) { ... } |
max-md | @media (width < 48rem) { ... } |
max-lg | @media (width < 64rem) { ... } |
max-xl | @media (width < 80rem) { ... } |
max-2xl | @media (width < 96rem) { ... } |
Để nhắm mục tiêu một breakpoint đơn lẻ, hãy nhắm mục tiêu khoảng cho breakpoint đó bằng cách xếp chồng một biến thể responsive như md với biến thể max-* cho breakpoint tiếp theo:
<div class="md:max-lg:flex"> <!-- ... --></div>Đọc về nhắm mục tiêu khoảng breakpoint để tìm hiểu thêm.
Sử dụng các biến theme --breakpoint-* để tùy chỉnh các breakpoint của bạn:
@import "tailwindcss";@theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem;}Điều này cập nhật breakpoint 2xl sử dụng 100rem thay vì mặc định 96rem, và tạo các breakpoint xs và 3xl mới có thể được sử dụng trong markup của bạn:
<div class="grid xs:grid-cols-2 3xl:grid-cols-6"> <!-- ... --></div>Lưu ý rằng điều quan trọng là luôn sử dụng cùng một đơn vị để xác định các breakpoint của bạn, nếu không các tiện ích được tạo có thể được sắp xếp theo thứ tự không mong muốn, khiến các lớp breakpoint ghi đè lẫn nhau theo những cách không mong muốn.
Tailwind sử dụng rem cho các breakpoint mặc định, vì vậy nếu bạn thêm các breakpoint bổ sung vào mặc định, hãy đảm bảo bạn cũng sử dụng rem.
Tìm hiểu thêm về tùy chỉnh theme của bạn trong tài liệu theme.
Để xóa một breakpoint mặc định, hãy đặt lại giá trị của nó thành từ khóa initial:
@import "tailwindcss";@theme { --breakpoint-2xl: initial;}Bạn cũng có thể đặt lại tất cả các breakpoint mặc định bằng cách sử dụng --breakpoint-*: initial, sau đó xác định tất cả các breakpoint của bạn từ đầu:
@import "tailwindcss";@theme { --breakpoint-*: initial; --breakpoint-tablet: 40rem; --breakpoint-laptop: 64rem; --breakpoint-desktop: 80rem;}Tìm hiểu thêm về việc xóa các giá trị theme mặc định trong tài liệu theme.
Nếu bạn cần sử dụng một breakpoint dùng một lần không hợp lý để đưa vào theme của mình, hãy sử dụng các biến thể min hoặc max để tạo một breakpoint tùy chỉnh ngay lập tức bằng cách sử dụng bất kỳ giá trị tùy ý nào.
<div class="max-[600px]:bg-sky-300 min-[320px]:text-center"> <!-- ... --></div>Tìm hiểu thêm về hỗ trợ giá trị tùy ý trong tài liệu giá trị tùy ý.
Container queries là một tính năng CSS hiện đại cho phép bạn tạo kiểu cho thứ gì đó dựa trên kích thước của phần tử cha thay vì kích thước của toàn bộ khung nhìn. Chúng cho phép bạn xây dựng các thành phần linh hoạt và có thể tái sử dụng hơn nhiều vì chúng có thể thay đổi dựa trên không gian thực tế có sẵn cho thành phần đó.
Sử dụng lớp @container để đánh dấu một phần tử là container, sau đó sử dụng các biến thể như @sm và @md để tạo kiểu cho các phần tử con dựa trên kích thước của container:
<div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div></div>Giống như các biến thể breakpoint, container queries là mobile-first trong Tailwind CSS và áp dụng tại kích thước container mục tiêu trở lên.
Sử dụng các biến thể như @max-sm và @max-md để áp dụng một kiểu dưới một kích thước container cụ thể:
<div class="@container"> <div class="flex flex-row @max-md:flex-col"> <!-- ... --> </div></div>Xếp chồng một biến thể container query thông thường với một biến thể container query chiều rộng tối đa để nhắm mục tiêu một khoảng cụ thể:
<div class="@container"> <div class="flex flex-row @sm:@max-md:flex-col"> <!-- ... --> </div></div>Đối với các thiết kế phức tạp sử dụng nhiều container lồng nhau, bạn có thể đặt tên cho các container bằng cách sử dụng @container/{name} và nhắm mục tiêu các container cụ thể bằng các biến thể như @sm/{name} và @md/{name}:
<div class="@container/main"> <!-- ... --> <div class="flex flex-row @sm/main:flex-col"> <!-- ... --> </div></div>Điều này giúp bạn có thể tạo kiểu cho thứ gì đó dựa trên kích thước của một container ở xa, thay vì chỉ container gần nhất.
Sử dụng các biến theme --container-* để tùy chỉnh kích thước container của bạn:
@import "tailwindcss";@theme { --container-8xl: 96rem;}Điều này thêm một biến thể container query 8xl mới có thể được sử dụng trong markup của bạn:
<div class="@container"> <div class="flex flex-col @8xl:flex-row"> <!-- ... --> </div></div>Tìm hiểu thêm về tùy chỉnh theme của bạn trong tài liệu theme.
Sử dụng các biến thể như @min-[475px] và @max-[960px] cho các kích thước container query dùng một lần mà bạn không muốn thêm vào theme của mình:
<div class="@container"> <div class="flex flex-col @min-[475px]:flex-row"> <!-- ... --> </div></div>Sử dụng đơn vị độ dài container query như cqw làm giá trị tùy ý trong các lớp tiện ích khác để tham chiếu kích thước container:
<div class="@container"> <div class="w-[50cqw]"> <!-- ... --> </div></div>Theo mặc định, Tailwind bao gồm các kích thước container từ 16rem (256px) đến 80rem (1280px):
| Biến thể | Chiều rộng tối thiểu | CSS |
|---|---|---|
@3xs | 16rem (256px) | @container (width >= 16rem) { … } |
@2xs | 18rem (288px) | @container (width >= 18rem) { … } |
@xs | 20rem (320px) | @container (width >= 20rem) { … } |
@sm | 24rem (384px) | @container (width >= 24rem) { … } |
@md | 28rem (448px) | @container (width >= 28rem) { … } |
@lg | 32rem (512px) | @container (width >= 32rem) { … } |
@xl | 36rem (576px) | @container (width >= 36rem) { … } |
@2xl | 42rem (672px) | @container (width >= 42rem) { … } |
@3xl | 48rem (768px) | @container (width >= 48rem) { … } |
@4xl | 56rem (896px) | @container (width >= 56rem) { … } |
@5xl | 64rem (1024px) | @container (width >= 64rem) { … } |
@6xl | 72rem (1152px) | @container (width >= 72rem) { … } |
@7xl | 80rem (1280px) | @container (width >= 80rem) { … } |