Hover, focus và các trạng thái khác

Mọi utility class trong Tailwind đều có thể được áp dụng có điều kiện bằng cách thêm một biến thể vào đầu tên class để mô tả điều kiện bạn muốn nhắm đến.

Ví dụ, để áp dụng class bg-sky-700 khi hover, hãy sử dụng class hover:bg-sky-700:

<button class="bg-sky-500 hover:bg-sky-700 ...">Lưu thay đổi</button>

.btn-primary {  background-color: #0ea5e9;}.btn-primary:hover {  background-color: #0369a1;}

.bg-sky-500 {  background-color: #0ea5e9;}.hover\:bg-sky-700:hover {  background-color: #0369a1;}

Tailwind bao gồm các biến thể cho hầu hết mọi thứ bạn cần, bao gồm:

• Pseudo-classes, như :hover, :focus, :first-child, và :required
• Pseudo-elements, như ::before, ::after, ::placeholder, và ::selection
• Media và feature queries, như responsive breakpoints, dark mode, và prefers-reduced-motion
• Attribute selectors, như [dir="rtl"] và [open]
• Child selectors, như & > * và & *

Các biến thể này thậm chí có thể được xếp chồng để nhắm đến các tình huống cụ thể hơn, ví dụ như thay đổi màu nền ở chế độ tối, tại breakpoint medium, khi hover:

<button class="dark:md:hover:bg-fuchsia-600 ...">Lưu thay đổi</button>

Trong hướng dẫn này, bạn sẽ tìm hiểu về mọi biến thể có sẵn trong framework, cách sử dụng chúng với các class tùy chỉnh của riêng bạn, và thậm chí cách tạo biến thể của riêng bạn.

Pseudo-classes

:hover, :focus, và :active

Tạo kiểu cho các phần tử khi hover, focus, và active bằng cách sử dụng các biến thể hover, focus, và active:

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">  Lưu thay đổi</button>

Tailwind cũng bao gồm các biến thể cho các trạng thái tương tác khác như :visited, :focus-within, :focus-visible, và nhiều hơn nữa.

Xem tham chiếu pseudo-class để biết danh sách đầy đủ các biến thể pseudo-class có sẵn.

:first, :last, :odd, và :even

Tạo kiểu cho một phần tử khi nó là first-child hoặc last-child bằng cách sử dụng các biến thể first và last:

<ul role="list">  {#each people as person}    <!-- Loại bỏ padding trên/dưới khi là con đầu tiên/cuối cùng -->    <li class="flex py-4 first:pt-0 last:pb-0">      <img class="h-10 w-10 rounded-full" src={person.imageUrl} alt="" />      <div class="ml-3 overflow-hidden">        <p class="text-sm font-medium text-gray-900 dark:text-white">{person.name}</p>        <p class="truncate text-sm text-gray-500 dark:text-gray-400">{person.email}</p>      </div>    </li>  {/each}</ul>

Bạn cũng có thể tạo kiểu cho một phần tử khi nó là con ở vị trí lẻ hoặc chẵn bằng cách sử dụng các biến thể odd và even:

<table>  <!-- ... -->  <tbody>    {#each people as person}      <!-- Sử dụng màu nền khác nhau cho các hàng lẻ và chẵn -->      <tr class="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">        <td>{person.name}</td>        <td>{person.title}</td>        <td>{person.email}</td>      </tr>    {/each}  </tbody></table>

Sử dụng các biến thể nth-* và nth-last-* để tạo kiểu cho các con dựa trên vị trí của chúng trong danh sách:

<div class="nth-3:underline">  <!-- ... --></div><div class="nth-last-5:underline">  <!-- ... --></div><div class="nth-of-type-4:underline">  <!-- ... --></div><div class="nth-last-of-type-6:underline">  <!-- ... --></div>

Bạn có thể truyền bất kỳ số nào bạn muốn vào các biến thể này theo mặc định, và sử dụng các giá trị tùy ý cho các biểu thức phức tạp hơn như nth-[2n+1_of_li].

Tailwind cũng bao gồm các biến thể cho các pseudo-class cấu trúc khác như :only-child, :first-of-type, :empty, và nhiều hơn nữa.

Xem tham chiếu pseudo-class để biết danh sách đầy đủ các biến thể pseudo-class có sẵn.

:required và :disabled

Tạo kiểu cho các phần tử form ở các trạng thái khác nhau bằng cách sử dụng các biến thể như required, invalid, và disabled:

<input  type="text"  value="tbone"  disabled  class="invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20 ..."/>

Using variants for this sort of thing can reduce the amount of conditional logic in your templates, letting you use the same set of classes regardless of what state an input is in and letting the browser apply the right styles for you.

Sử dụng các biến thể cho những việc như thế này có thể giảm bớt lượng logic điều kiện trong template của bạn, cho phép bạn sử dụng cùng một tập hợp các class bất kể input đang ở trạng thái nào và để trình duyệt áp dụng các kiểu phù hợp cho bạn.

Tailwind also includes variants for other form states like :read-only, :indeterminate, :checked, and more.

Tailwind cũng bao gồm các biến thể cho các trạng thái form khác như :read-only, :indeterminate, :checked, và nhiều hơn nữa.

See the pseudo-class reference for a complete list of available pseudo-class variants.

Xem tham chiếu pseudo-class để biết danh sách đầy đủ các biến thể pseudo-class có sẵn.

:has()

Use the has-* variant to style an element based on the state or content of its descendants:

Sử dụng biến thể has-* để tạo kiểu cho một phần tử dựa trên trạng thái hoặc nội dung của các phần tử con của nó:

<label  class="has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900 ...">  <svg fill="currentColor">    <!-- ... -->  </svg>  Google Pay  <input type="radio" class="checked:border-indigo-500 ..." /></label>

Bạn có thể sử dụng has-* với một pseudo-class, như has-[:focus], để tạo kiểu cho một phần tử dựa trên trạng thái của các phần tử con. Bạn cũng có thể sử dụng các element selector, như has-[img] hoặc has-[a], để tạo kiểu cho một phần tử dựa trên nội dung của các phần tử con.

Tạo kiểu dựa trên các phần tử con của một nhóm

Nếu bạn cần tạo kiểu cho một phần tử dựa trên các phần tử con của một phần tử cha, bạn có thể đánh dấu phần tử cha bằng class group và sử dụng biến thể group-has-* để tạo kiểu cho phần tử đích:

Spencer Sharp

Product Designer tại planeteria.tech

Casey Jordan

Chỉ vui khi được ở đây.

Alex Reed

Một nhà thiết kế đa ngành, làm việc tại giao điểm của nghệ thuật và công nghệ.

alex-reed.com

Taylor Bailey

Đẩy pixel. Quăng div.

<div class="group ...">  <img src="..." />  <h4>Spencer Sharp</h4>  <svg class="hidden group-has-[a]:block ..."><!-- ... --></svg>  <p>Product Designer at <a href="...">planeteria.tech</a></p></div>

Tạo kiểu dựa trên các phần tử con của một peer

Nếu bạn cần tạo kiểu cho một phần tử dựa trên các phần tử con của một phần tử anh em, bạn có thể đánh dấu phần tử anh em bằng class peer và sử dụng biến thể peer-has-* để tạo kiểu cho phần tử đích:

<div>  <label class="peer ...">    <input type="checkbox" name="todo[1]" checked />    Create a to do list  </label>  <svg class="peer-has-checked:hidden ..."><!-- ... --></svg></div>

:not()

Sử dụng biến thể not- để tạo kiểu cho một phần tử khi một điều kiện không đúng.

Nó đặc biệt mạnh mẽ khi kết hợp với các biến thể pseudo-class khác, ví dụ kết hợp not-focus: với hover: để chỉ áp dụng kiểu hover khi một phần tử không được focus:

<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">  <!-- ... --></button>

Bạn cũng có thể kết hợp biến thể not- với các biến thể media query như forced-colors hoặc supports để chỉ tạo kiểu cho một phần tử khi một điều kiện nào đó về môi trường của người dùng không đúng:

<div class="not-supports-[display:grid]:flex">  <!-- ... --></div>

Tạo kiểu dựa trên trạng thái cha

Khi bạn cần tạo kiểu cho một phần tử dựa trên trạng thái của một phần tử cha nào đó, hãy đánh dấu phần tử cha bằng class group, và sử dụng các biến thể group-* như group-hover để tạo kiểu cho phần tử đích:

<a href="#" class="group ...">  <div>    <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24">      <!-- ... -->    </svg>    <h3 class="text-gray-900 group-hover:text-white ...">New project</h3>  </div>  <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p></a>

Mẫu này hoạt động với mọi biến thể pseudo-class, ví dụ như group-focus, group-active, hoặc thậm chí group-odd.

Phân biệt các nhóm lồng nhau

Khi lồng các group, bạn có thể tạo kiểu cho một cái gì đó dựa trên trạng thái của một nhóm cha cụ thể bằng cách đặt cho nhóm cha đó một tên duy nhất sử dụng class group/{name}, và bao gồm tên đó trong các biến thể sử dụng các class như group-hover/{name}:

<ul role="list">  {#each people as person}    <li class="group/item ...">      <!-- ... -->      <a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}">        <span class="group-hover/edit:text-gray-700 ...">Call</span>        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ..."><!-- ... --></svg>      </a>    </li>  {/each}</ul>

Các nhóm có thể được đặt tên theo bất kỳ cách nào bạn thích và không cần phải cấu hình theo bất kỳ cách nào — chỉ cần đặt tên cho các nhóm của bạn trực tiếp trong markup và Tailwind sẽ tự động tạo ra CSS cần thiết.

Nhóm tùy ý

Bạn có thể tạo các biến thể group-* dùng một lần ngay lập tức bằng cách cung cấp selector của riêng bạn dưới dạng một giá trị tùy ý giữa các dấu ngoặc vuông:

<div class="group is-published">  <div class="hidden group-[.is-published]:block">    Đã xuất bản  </div></div>

Để kiểm soát nhiều hơn, bạn có thể sử dụng ký tự & để đánh dấu nơi .group sẽ xuất hiện trong selector cuối cùng so với selector mà bạn đang truyền vào:

<div class="group">  <div class="group-[:nth-of-type(3)_&]:block">    <!-- ... -->  </div></div>

Nhóm ngầm định

Biến thể in-* hoạt động tương tự như group ngoại trừ việc bạn không cần thêm group vào phần tử cha:

<div tabindex="0" class="group">  <div class="opacity-50 group-focus:opacity-100"><div tabindex="0">  <div class="opacity-50 in-focus:opacity-100">    <!-- ... -->  </div></div>

Biến thể in-* phản hồi các thay đổi trạng thái trong bất kỳ phần tử cha nào, vì vậy nếu bạn muốn kiểm soát chi tiết hơn, bạn sẽ cần sử dụng group thay thế.

Tạo kiểu dựa trên trạng thái anh em

Khi bạn cần tạo kiểu cho một phần tử dựa trên trạng thái của một phần tử anh em nào đó, hãy đánh dấu phần tử anh em bằng class peer, và sử dụng các biến thể peer-* như peer-invalid để tạo kiểu cho phần tử đích:

<form>  <label class="block">    <span class="...">Email</span>    <input type="email" class="peer ..." />    <p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p>  </label></form>

Điều này giúp bạn có thể thực hiện đủ loại thủ thuật hay ho, ví dụ như floating labels mà không cần bất kỳ JS nào.

Mẫu này hoạt động với mọi biến thể pseudo-class, ví dụ như peer-focus, peer-required, và peer-disabled.

Điều quan trọng cần lưu ý là marker peer chỉ có thể được sử dụng trên các phần tử anh em trước đó do cách hoạt động của subsequent-sibling combinator trong CSS:

<label>  <span class="peer-invalid:text-red-500 ...">Email</span>  <input type="email" class="peer ..." /></label>

Phân biệt các peer

Khi sử dụng nhiều peer, bạn có thể tạo kiểu cho một cái gì đó dựa trên trạng thái của một peer cụ thể bằng cách đặt cho peer đó một tên duy nhất sử dụng class peer/{name}, và bao gồm tên đó trong các biến thể sử dụng các class như peer-checked/{name}:

<fieldset>  <legend>Published status</legend>  <input id="draft" class="peer/draft" type="radio" name="status" checked />  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>  <input id="published" class="peer/published" type="radio" name="status" />  <label for="published" class="peer-checked/published:text-sky-500">Published</label>  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div></fieldset>

Các peer có thể được đặt tên theo bất kỳ cách nào bạn thích và không cần phải cấu hình theo bất kỳ cách nào — chỉ cần đặt tên cho các peer của bạn trực tiếp trong markup và Tailwind sẽ tự động tạo ra CSS cần thiết.

Peer tùy ý

Bạn có thể tạo các biến thể peer-* dùng một lần ngay lập tức bằng cách cung cấp selector của riêng bạn dưới dạng một giá trị tùy ý giữa các dấu ngoặc vuông:

<form>  <label for="email">Email:</label>  <input id="email" name="email" type="email" class="is-dirty peer" required />  <div class="peer-[.is-dirty]:peer-required:block hidden">Trường này là bắt buộc.</div>  <!-- ... --></form>

Để kiểm soát nhiều hơn, bạn có thể sử dụng ký tự & để đánh dấu nơi .peer sẽ xuất hiện trong selector cuối cùng so với selector mà bạn đang truyền vào:

<div>  <input type="text" class="peer" />  <div class="hidden peer-[:nth-of-type(3)_&]:block">    <!-- ... -->  </div></div>

Pseudo-element

::before và ::after

Tạo kiểu cho các pseudo-element ::before và ::after bằng cách sử dụng các biến thể before và after:

<label>  <span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...">Email</span>  <input type="email" name="email" class="..." placeholder="you@example.com" /></label>

Khi sử dụng các biến thể này, Tailwind sẽ tự động thêm content: '' theo mặc định để bạn không phải chỉ định nó trừ khi bạn muốn một giá trị khác:

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white">  When you look  <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">    <span class="relative text-white dark:text-gray-950">annoyed</span>  </span>  all the time, people think that you're busy.</blockquote>

Cần lưu ý rằng bạn thực sự không cần các pseudo-element ::before và ::after cho hầu hết mọi thứ trong các dự án Tailwind — thường đơn giản hơn là chỉ sử dụng một phần tử HTML thực.

Ví dụ, đây là cùng một thiết kế từ phía trên nhưng sử dụng một <span> thay vì pseudo-element ::before, dễ đọc hơn một chút và thực sự ít mã hơn:

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic">  When you look  <span class="relative">    <span class="absolute -inset-1 block -skew-y-3 bg-pink-500" aria-hidden="true"></span>    <span class="relative text-white">annoyed</span>  </span>  all the time, people think that you're busy.</blockquote>

Dành before và after cho các tình huống mà điều quan trọng là nội dung của pseudo-element không thực sự nằm trong DOM và không thể được chọn bởi người dùng.

::placeholder

Tạo kiểu cho văn bản placeholder của bất kỳ input hoặc textarea nào bằng cách sử dụng biến thể placeholder:

<input  class="placeholder:text-gray-500 placeholder:italic ..."  placeholder="Search for anything..."  type="text"  name="search"/>

::file

Tạo kiểu cho nút trong các input file bằng cách sử dụng biến thể file:

Chọn ảnh hồ sơ

<input  type="file"  class="file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 dark:hover:file:bg-violet-500 ..."/>

::marker

Tạo kiểu cho các bộ đếm hoặc dấu đầu dòng trong danh sách bằng cách sử dụng biến thể marker:

<ul role="list" class="list-disc marker:text-sky-400 ...">  <li>5 cups chopped Porcini mushrooms</li>  <li>1/2 cup of olive oil</li>  <li>3lb of celery</li></ul>

Chúng tôi đã thiết kế biến thể marker để có thể kế thừa, vì vậy mặc dù bạn có thể sử dụng trực tiếp trên phần tử <li>, bạn cũng có thể sử dụng nó trên phần tử cha để tránh lặp lại.

::selection

Tạo kiểu cho lựa chọn văn bản đang hoạt động bằng cách sử dụng biến thể selection:

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">  <p>    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my    way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all    living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.  </p></div>

Chúng tôi đã thiết kế biến thể selection để có thể kế thừa, vì vậy bạn có thể thêm nó vào bất kỳ đâu trong cây và nó sẽ được áp dụng cho tất cả các phần tử con.

Điều này giúp dễ dàng thiết lập màu lựa chọn để phù hợp với thương hiệu của bạn trên toàn bộ trang web:

<html>  <head>    <!-- ... -->  </head>  <body class="selection:bg-pink-300">    <!-- ... -->  </body></html>

::first-line và ::first-letter

Tạo kiểu cho dòng đầu tiên trong một khối nội dung bằng cách sử dụng biến thể first-line, và chữ cái đầu tiên bằng cách sử dụng biến thể first-letter:

<div class="text-gray-700">  <p    class="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase"  >    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"?  </p>  <p class="mt-6">Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p></div>

::backdrop

Tạo kiểu cho backdrop của một phần tử <dialog> gốc bằng cách sử dụng biến thể backdrop:

<dialog class="backdrop:bg-gray-50">  <form method="dialog">    <!-- ... -->  </form></dialog>

Nếu bạn đang sử dụng các phần tử <dialog> gốc trong dự án của mình, bạn cũng có thể muốn đọc về tạo kiểu cho các trạng thái mở/đóng bằng cách sử dụng biến thể open.

Media và feature query

Responsive breakpoint

Để tạo kiểu cho một phần tử tại một breakpoint cụ thể, hãy sử dụng các biến thể responsive như md và lg.

Ví dụ, điều này sẽ hiển thị lưới 3 cột trên thiết bị di động, lưới 4 cột trên màn hình có chiều rộng trung bình và lưới 6 cột trên màn hình có chiều rộng lớn:

<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">  <!-- ... --></div>

Để tạo kiểu cho một phần tử dựa trên chiều rộng của một phần tử cha thay vì viewport, hãy sử dụng các biến thể như @md và @lg:

<div class="@container">  <div class="flex flex-col @md:flex-row">    <!-- ... -->  </div></div>

Xem tài liệu Responsive design để có cái nhìn sâu sắc về cách các tính năng này hoạt động.

prefers-color-scheme

Media query prefers-color-scheme cho bạn biết liệu người dùng thích giao diện sáng hay tối, và thường được cấu hình ở cấp hệ điều hành.

Sử dụng các utility không có biến thể để nhắm mục tiêu chế độ sáng, và sử dụng biến thể dark để cung cấp các ghi đè cho chế độ tối:

<div class="bg-white dark:bg-gray-900 ...">  <!-- ... -->  <h3 class="text-gray-900 dark:text-white ...">Writes upside-down</h3>  <p class="text-gray-500 dark:text-gray-400 ...">    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.  </p></div>

Xem tài liệu Chế độ tối để có cái nhìn sâu sắc về cách tính năng này hoạt động.

prefers-reduced-motion

Media query prefers-reduced-motion cho bạn biết liệu người dùng có yêu cầu bạn giảm thiểu chuyển động không cần thiết hay không.

Sử dụng biến thể motion-reduce để thêm các kiểu có điều kiện khi người dùng đã yêu cầu giảm chuyển động:

<button type="button" class="bg-indigo-500 ..." disabled>  <svg class="animate-spin motion-reduce:hidden ..." viewBox="0 0 24 24"><!-- ... --></svg>  Processing...</button>

Tailwind cũng bao gồm một biến thể motion-safe chỉ thêm các kiểu khi người dùng không yêu cầu giảm chuyển động. Điều này có thể hữu ích khi việc sử dụng helper motion-reduce có nghĩa là phải "hoàn tác" rất nhiều kiểu:

<!-- Using `motion-reduce` can mean lots of "undoing" styles --><button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ...">  Save changes</button><!-- Using `motion-safe` is less code in these situations --><button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</button>

prefers-contrast

Media query prefers-contrast cho bạn biết liệu người dùng có yêu cầu độ tương phản nhiều hơn hay ít hơn hay không.

Sử dụng biến thể contrast-more để thêm các kiểu có điều kiện khi người dùng đã yêu cầu độ tương phản nhiều hơn:

<form>  <label class="block">    <span class="block text-sm font-medium text-gray-700">Social Security Number</span>    <input      class="border-gray-200 placeholder-gray-400 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 ..."    />    <p class="text-gray-600 opacity-10 contrast-more:opacity-100 ...">We need this to steal your identity.</p>  </label></form>

Tailwind cũng bao gồm một biến thể contrast-less mà bạn có thể sử dụng để thêm các kiểu có điều kiện khi người dùng đã yêu cầu độ tương phản ít hơn.

forced-colors

Media query forced-colors cho biết liệu người dùng có đang sử dụng chế độ màu bắt buộc hay không, điều này khá phổ biến đối với những người dùng có nhu cầu về khả năng truy cập.

Sử dụng biến thể forced-colors để thêm các kiểu có điều kiện khi người dùng đã bật chế độ màu bắt buộc:

<button>  <svg class="forced-colors:hidden ..." viewBox="0 0 20 20"><!-- ... --></svg>  Adjust settings</button>

Tailwind cũng bao gồm một utility forced-color-adjust mà bạn có thể sử dụng để chọn không tham gia màu bắt buộc cho một phần tử cụ thể, điều này có thể hữu ích khi bạn cần sử dụng màu riêng của mình cho một cái gì đó như bộ chọn màu.

inverted-colors

Media query inverted-colors cho bạn biết liệu người dùng có yêu cầu đảo ngược màu hay không, điều này đôi khi được sử dụng bởi những người dùng bị khiếm thị.

Sử dụng biến thể inverted-colors để thêm các kiểu có điều kiện khi người dùng đã yêu cầu đảo ngược màu:

<button class="bg-black text-white inverted-colors:outline ...">  <!-- ... --></button>

Hỗ trợ 3D Touch và con trỏ

Media query pointer cho bạn biết liệu người dùng đang sử dụng thiết bị trỏ có độ chính xác cao (như chuột) hay độ chính xác thấp (như ngón tay).

Sử dụng các biến thể pointer-fine và pointer-coarse để thêm các kiểu có điều kiện dựa trên thiết bị trỏ của người dùng:

<a href="#" class="pointer-coarse:p-2 pointer-fine:hover:text-sky-500">  <!-- ... --></a>

Tailwind cũng bao gồm các biến thể pointer-none, any-pointer-fine, any-pointer-coarse, và any-pointer-none.

orientation

Sử dụng các biến thể portrait và landscape để thêm các kiểu có điều kiện khi viewport ở một hướng cụ thể:

<div>  <div class="portrait:hidden">    <!-- ... -->  </div>  <div class="landscape:hidden">    <!-- ... -->  </div></div>

scripting

Media query scripting cho bạn biết liệu người dùng có bật JavaScript hay không.

Sử dụng các biến thể script và noscript để thêm các kiểu có điều kiện khi JavaScript được bật hoặc tắt:

<div class="hidden noscript:block">  <!-- ... --></div>

print

Sử dụng biến thể print để thêm các kiểu có điều kiện chỉ áp dụng khi tài liệu đang được in:

<div>  <article class="print:hidden">    <h1>Invoice</h1>    <!-- ... -->  </article>  <div class="hidden print:block">    Are you seriously printing a web page?  </div></div>

@supports

At-rule @supports cho bạn biết liệu trình duyệt của người dùng có hỗ trợ một tính năng CSS cụ thể hay không.

Sử dụng biến thể supports-[...] để tạo kiểu cho mọi thứ dựa trên việc một tính năng nhất định có được hỗ trợ hay không:

<div class="flex supports-[display:grid]:grid ...">  <!-- ... --></div>

Biến thể supports-[...] sử dụng giá trị tùy ý ở bên dưới, nhưng bạn cũng có thể cấu hình các phím tắt của riêng mình trong file tailwind.config.js.

@starting-style

At-rule @starting-style cho phép bạn định nghĩa các kiểu ban đầu của một phần tử trước khi nó được render lần đầu tiên.

Sử dụng biến thể starting để thiết lập các kiểu ban đầu cho một phần tử mà bạn muốn chuyển đổi (transition) vào:

<div class="transition-all duration-500 starting:opacity-0 starting:-translate-y-2">  <!-- ... --></div>

Điều này đặc biệt hữu ích để chuyển đổi các phần tử đang được thêm vào DOM, hoặc khi chuyển đổi thuộc tính display.

Attribute selector

Trạng thái ARIA

Sử dụng biến thể aria-* để tạo kiểu có điều kiện cho mọi thứ dựa trên các thuộc tính ARIA.

Ví dụ, bạn có thể sử dụng biến thể aria-checked để áp dụng các kiểu khi thuộc tính aria-checked="true" hiện diện:

<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700 aria-checked:text-white">  <!-- ... --></div>

Tailwind bao gồm các biến thể cho tất cả các thuộc tính ARIA boolean phổ biến nhất theo mặc định:

| Variant | CSS | | --- | --- | | aria-busy | &[aria-busy="true"] | | aria-checked | &[aria-checked="true"] | | aria-disabled | &[aria-disabled="true"] | | aria-expanded | &[aria-expanded="true"] | | aria-hidden | &[aria-hidden="true"] | | aria-pressed | &[aria-pressed="true"] | | aria-readonly | &[aria-readonly="true"] | | aria-required | &[aria-required="true"] | | aria-selected | &[aria-selected="true"] |

Bạn có thể tùy chỉnh các biến thể aria-* nào có sẵn bằng cách chỉnh sửa theme.aria trong file tailwind.config.js của bạn:

// tailwind.config.jsmodule.exports = {  theme: {    extend: {      aria: {        asc: 'sort="ascending"',        desc: 'sort="descending"',      },    },  },};

Nếu bạn cần sử dụng một biến thể aria dùng một lần mà không hợp lý để đưa vào theme của bạn, bạn có thể sử dụng một giá trị tùy ý để tạo ra một biến thể aria ngay lập tức:

<th  aria-sort="ascending"  class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]">  Invoice #</th>

Thuộc tính Data

Sử dụng biến thể data-* để tạo kiểu có điều kiện cho mọi thứ dựa trên các thuộc tính data.

Vì không có các thuộc tính data chuẩn theo định nghĩa, nên theo mặc định chúng tôi chỉ hỗ trợ các giá trị tùy ý ngay lập tức, ví dụ:

<div data-checked class="data-[checked]:bg-indigo-500 data-[checked]:text-white">  <!-- ... --></div>

Bạn có thể cấu hình các phím tắt cho các selector thuộc tính data phổ biến trong phần theme.data của file tailwind.config.js của bạn:

// tailwind.config.jsmodule.exports = {  theme: {    data: {      checked: 'ui~="checked"',    },  },};

<div data-ui="checked active" class="data-checked:underline">  <!-- ... --></div>

Hỗ trợ RTL

Sử dụng các biến thể rtl và ltr để thêm các kiểu trong các chế độ phải-sang-trái hoặc trái-sang-phải tương ứng khi xây dựng các layout đa hướng:

<div class="group flex items-center">  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />  <div class="ltr:ml-3 rtl:mr-3">    <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">...</p>    <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">...</p>  </div></div>

Lưu ý rằng biến thể ltr sẽ không hoạt động trừ khi thuộc tính dir được thiết lập rõ ràng là ltr trong HTML của bạn.

Hãy nhớ rằng đối với rất nhiều thứ như margin, padding, border radius, và positioning, bạn có thể sử dụng các thuộc tính logic thay thế, chúng sẽ tự động xử lý cả hai hướng cho bạn.

Trạng thái Mở/Đóng

Sử dụng biến thể open để thêm các kiểu có điều kiện khi một phần tử <details> hoặc <dialog> đang ở trạng thái mở:

<div class="max-w-lg mx-auto p-8">  <details class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>    <summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">      Why do they call it Ovaltine?    </summary>    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">      <p>The mug is round. The jar is round. They should call it Roundtine.</p>    </div>  </details></div>

Biến thể tùy chỉnh

Sử dụng biến thể tùy ý

Giống như các giá trị tùy ý cho phép bạn sử dụng các giá trị tùy chỉnh với các utility class của mình, các biến thể tùy ý cho phép bạn viết các modifier selector tùy chỉnh trực tiếp trong HTML của bạn.

Các biến thể tùy ý chỉ là các chuỗi định dạng đại diện cho selector, được bao bọc trong các dấu ngoặc vuông. Ví dụ, biến thể tùy ý này nhắm mục tiêu một phần tử chỉ khi nó là phần tử con thứ ba:

<ul role="list">  {#each items as item}    <li class="[&:nth-child(3)]:underline">{item}</li>  {/each}</ul>

Chuỗi định dạng giống như những gì bạn sẽ sử dụng với addVariant plugin API, với & đại diện cho selector được sửa đổi.

Bạn cũng có thể sử dụng các at-rule như @media hoặc @supports trong các biến thể tùy ý:

<div class="flex [@media(min-width:900px)]:block">  <!-- ... --></div>

Bạn thậm chí có thể xếp chồng các biến thể tùy ý để kết hợp chúng:

<div class="[@media(min-width:900px)]:[&_p]:mt-4">  <!-- ... --></div>

Tạo biến thể tùy chỉnh

Nếu bạn thấy mình sử dụng cùng một biến thể tùy ý nhiều lần trong dự án của mình, có thể đáng để tạo một biến thể tùy chỉnh cho nó bằng cách sử dụng directive @custom-variant trong CSS của bạn:

@custom-variant pointer-coarse (@media (pointer: coarse));@custom-variant pointer-fine (@media (pointer: fine));

Tìm hiểu thêm về cách tạo các biến thể tùy chỉnh trong tài liệu biến thể tùy chỉnh.

Tạo plugin

Nếu bạn muốn chia sẻ một biến thể tùy chỉnh qua nhiều dự án, bạn cũng có thể định nghĩa các biến thể bằng cách sử dụng plugin API:

// tailwind.config.jsconst plugin = require('tailwindcss/plugin')module.exports = {  plugins: [    plugin(function({ addVariant }) {      addVariant('third', '&:nth-child(3)')    })  ]}

Tìm hiểu thêm về cách tạo plugin trong tài liệu plugin.

Phụ lục

Tham chiếu nhanh

Một bảng tham chiếu nhanh của mọi biến thể được bao gồm trong Tailwind theo mặc định.

You can customize which aria-* variants are available by creating a new variant:

@custom-variant aria-asc (&[aria-sort="ascending"]);@custom-variant aria-desc (&[aria-sort="descending"]);

If you need to use a one-off aria variant that doesn’t make sense to include in your project, or for more complex ARIA attributes that take specific values, use square brackets to generate a property on the fly using any arbitrary value:

<table>  <thead>    <tr>      <th        aria-sort="ascending"        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"      >        Invoice #      </th>      <!-- ... -->    </tr>  </thead>  <!-- ... --></table>

ARIA state variants can also target parent and sibling elements using the group-aria-* and peer-aria-* variants:

<table>  <thead>    <tr>    <th aria-sort="ascending" class="group">      Invoice #      <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg>    </th>    <!-- ... -->    </tr>  </thead>  <!-- ... --></table>

Data attributes

Use the data-* variant to conditionally apply styles based on data attributes.

To check if a data attribute exists (and not a specific value), you can just specify the attribute name:

<!-- Will apply --><div data-active class="border border-gray-300 data-active:border-purple-500">  <!-- ... --></div><!-- Will not apply --><div class="border border-gray-300 data-active:border-purple-500">  <!-- ... --></div>

If you need to check for a specific value you may use an arbitrary value:

<!-- Will apply --><div data-size="large" class="data-[size=large]:p-8">  <!-- ... --></div><!-- Will not apply --><div data-size="medium" class="data-[size=large]:p-8">  <!-- ... --></div>

Alternatively, you can configure shortcuts for common data attributes you're using in your project by creating a new variant in the data-* namespace:

@import "tailwindcss";@custom-variant data-checked (&[data-ui~="checked"]);

You can then use these custom data-* variants in your project:

<div data-ui="checked active" class="data-checked:underline">  <!-- ... --></div>

RTL support

Use the rtl and ltr variants to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

Left-to-right

Tom Cook

Director of Operations

Right-to-left

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />  <div class="ltr:ml-3 rtl:mr-3">    <p class="text-gray-700 group-hover:text-gray-900 ...">...</p>    <p class="text-gray-500 group-hover:text-gray-700 ...">...</p>  </div></div>

Remember, these variants are only useful if you are building a site that needs to support both left-to-right and right-to-left layouts. If you're building a site that only needs to support a single direction, you don't need these variants — just apply the styles that make sense for your content.

Open/closed state

Use the open variant to conditionally add styles when a <details> or <dialog> element is in an open state:

<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary>  <div class="mt-3 text-sm leading-6 text-gray-600">    <p>The mug is round. The jar is round. They should call it Roundtine.</p>  </div></details>

This variant also targets the :popover-open pseudo-class for popovers:

<div>  <button popovertarget="my-popover">Open Popover</button>  <div popover id="my-popover" class="opacity-0 open:opacity-100 ...">    <!-- ... -->  </div></div>

Styling inert elements

The inert variant lets you style elements marked with the inert attribute:

<form>  <legend>Notification preferences</legend>  <fieldset>    <input type="radio" />    <label> Custom </label>    <fieldset inert class="inert:opacity-50">      <!-- ... -->    </fieldset>    <input type="radio" />    <label> Everything </label>  </fieldset></form>

This is useful for adding visual cues that make it clear that sections of content aren't interactive.

Child selectors

Styling direct children

While it's generally preferable to put utility classes directly on child elements, you can use the * variant in situations where you need to style direct children that you don’t have control over:

<div>  <h2>Categories<h2>  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">    <li>Sales</li>    <li>Marketing</li>    <li>SEO</li>    <!-- ... -->  </ul></div>

It's important to note that overriding a style with a utility directly on the child itself won't work since children rules are generated after the regular ones and they have the same specificity:

<ul class="*:bg-sky-50 ...">  <li class="bg-red-50 ...">Sales</li>  <li>Marketing</li>  <li>SEO</li>  <!-- ... --></ul>

Styling all descendants

Like *, the ** variant can be used to style children of an element. The main difference is that ** will apply styles to all descendants, not just the direct children. This is especially useful when you combine it with another variant for narrowing the thing you're selecting:

<ul class="**:data-avatar:size-12 **:data-avatar:rounded-full ...">  <li>    <img data-avatar src="..." class="bg-gray-200" />    <span>Kristen Ramos</span>  </li>  <li>    <img data-avatar src="..." class="bg-gray-200" />    <span>Ted Fox</span>  </li></ul>

Tham chiếu Pseudo-class

Đây là danh sách đầy đủ các ví dụ cho tất cả các biến thể pseudo-class được bao gồm trong Tailwind để bổ sung cho tài liệu pseudo-class ở đầu hướng dẫn này.

:hover

Tạo kiểu cho một phần tử khi người dùng di chuột qua nó bằng cách sử dụng biến thể hover:

<div class="bg-black hover:bg-white ..."><!-- ... --></div>

:focus

Tạo kiểu cho một phần tử khi nó được focus bằng cách sử dụng biến thể focus:

<input class="border-gray-300 focus:border-blue-400 ..." />

:focus-within

Tạo kiểu cho một phần tử khi nó hoặc một trong các phần tử con của nó được focus bằng cách sử dụng biến thể focus-within:

<div class="focus-within:shadow-lg ...">  <input type="text" /></div>

:focus-visible

Tạo kiểu cho một phần tử khi nó được focus bằng bàn phím bằng cách sử dụng biến thể focus-visible:

<button class="focus-visible:outline-2 ...">Submit</button>

:active

Tạo kiểu cho một phần tử khi nó đang được nhấn bằng cách sử dụng biến thể active:

<button class="bg-blue-500 active:bg-blue-600 ...">Submit</button>

:visited

Tạo kiểu cho một liên kết khi nó đã được truy cập bằng cách sử dụng biến thể visited:

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ..."> Inspiration </a>

:target

Tạo kiểu cho một phần tử nếu ID của nó khớp với URL fragment hiện tại bằng cách sử dụng biến thể target:

<div id="about" class="target:shadow-lg ...">  <!-- ... --></div>

:first-child

Tạo kiểu cho một phần tử nếu nó là phần tử con đầu tiên bằng cách sử dụng biến thể first:

<ul>  {#each people as person}    <li class="py-4 first:pt-0 ...">      <!-- ... -->    </li>  {/each}</ul>

:last-child

Tạo kiểu cho một phần tử nếu nó là phần tử con cuối cùng bằng cách sử dụng biến thể last:

<ul>  {#each people as person}    <li class="py-4 last:pb-0 ...">      <!-- ... -->    </li>  {/each}</ul>

:only-child

Tạo kiểu cho một phần tử nếu nó là phần tử con duy nhất bằng cách sử dụng biến thể only:

<ul>  {#each people as person}    <li class="py-4 only:py-0 ...">      <!-- ... -->    </li>  {/each}</ul>

:nth-child(odd)

Tạo kiểu cho một phần tử nếu nó là phần tử con có số thứ tự lẻ bằng cách sử dụng biến thể odd:

<table>  {#each people as person}    <tr class="bg-white odd:bg-gray-100 ...">      <!-- ... -->    </tr>  {/each}</table>

:nth-child(even)

Tạo kiểu cho một phần tử nếu nó là phần tử con có số thứ tự chẵn bằng cách sử dụng biến thể even:

<table>  {#each people as person}    <tr class="bg-white even:bg-gray-100 ...">      <!-- ... -->    </tr>  {/each}</table>

:first-of-type

Tạo kiểu cho một phần tử nếu nó là phần tử con đầu tiên của loại đó bằng cách sử dụng biến thể first-of-type:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="ml-2 first-of-type:ml-6 ...">      <!-- ... -->    </a>  {/each}</nav>

:last-of-type

Tạo kiểu cho một phần tử nếu nó là phần tử con cuối cùng của loại đó bằng cách sử dụng biến thể last-of-type:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mr-2 last-of-type:mr-6 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:only-of-type

Tạo kiểu cho một phần tử nếu nó là phần tử con duy nhất của loại đó bằng cách sử dụng biến thể only-of-type:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 only-of-type:mx-6 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-child()

Tạo kiểu cho một phần tử ở một vị trí cụ thể bằng cách sử dụng biến thể nth:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-3:mx-6 nth-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-last-child()

Tạo kiểu cho một phần tử ở một vị trí cụ thể từ cuối lên bằng cách sử dụng biến thể nth-last:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-last-3:mx-6 nth-last-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-of-type()

Tạo kiểu cho một phần tử ở một vị trí cụ thể, của cùng một loại bằng cách sử dụng biến thể nth-of-type:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-of-type-3:mx-6 nth-of-type-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-last-of-type()

Tạo kiểu cho một phần tử ở một vị trí cụ thể từ cuối lên, của cùng một loại bằng cách sử dụng biến thể nth-last-of-type:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-last-of-type-3:mx-6 nth-last-of-type-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:empty

Tạo kiểu cho một phần tử nếu nó không có nội dung bằng cách sử dụng biến thể empty:

<ul>  {#each people as person}    <li class="empty:hidden ...">{person.hobby}</li>  {/each}</ul>

:disabled

Tạo kiểu cho một input khi nó bị vô hiệu hóa bằng cách sử dụng biến thể disabled:

<input class="disabled:opacity-75 ..." />

:enabled

Tạo kiểu cho một input khi nó được kích hoạt bằng cách sử dụng biến thể enabled, hữu ích nhất khi bạn chỉ muốn áp dụng một kiểu khác khi một phần tử không bị vô hiệu hóa:

<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

:checked

Tạo kiểu cho checkbox hoặc radio button khi nó được chọn bằng cách sử dụng biến thể checked:

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

:indeterminate

Tạo kiểu cho checkbox hoặc radio button ở trạng thái không xác định bằng cách sử dụng biến thể indeterminate:

<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

:default

Tạo kiểu cho option, checkbox hoặc radio button là giá trị mặc định khi trang được tải ban đầu bằng cách sử dụng biến thể default:

<input type="checkbox" class="default:outline-2 ..." />

:optional

Tạo kiểu cho một input khi nó là tùy chọn bằng cách sử dụng biến thể optional:

<input class="border optional:border-red-500 ..." />

:required

Tạo kiểu cho một input khi nó là bắt buộc bằng cách sử dụng biến thể required:

<input required class="border required:border-red-500 ..." />

:valid

Tạo kiểu cho một input khi nó hợp lệ bằng cách sử dụng biến thể valid:

<input required class="border valid:border-green-500 ..." />

:invalid

Tạo kiểu cho một input khi nó không hợp lệ bằng cách sử dụng biến thể invalid:

<input required class="border invalid:border-red-500 ..." />

:user-valid

Tạo kiểu cho một input khi nó hợp lệ và người dùng đã tương tác với nó, bằng cách sử dụng biến thể user-valid:

<input required class="border user-valid:border-green-500" />

:user-invalid

Tạo kiểu cho một input khi nó không hợp lệ và người dùng đã tương tác với nó, bằng cách sử dụng biến thể user-invalid:

<input required class="border user-invalid:border-red-500" />

:in-range

Tạo kiểu cho một input khi giá trị của nó nằm trong giới hạn phạm vi được chỉ định bằng cách sử dụng biến thể in-range:

<input min="1" max="5" class="in-range:border-green-500 ..." />

:out-of-range

Tạo kiểu cho một input khi giá trị của nó nằm ngoài giới hạn phạm vi được chỉ định bằng cách sử dụng biến thể out-of-range:

<input min="1" max="5" class="out-of-range:border-red-500 ..." />

:placeholder-shown

Tạo kiểu cho một input khi placeholder được hiển thị bằng cách sử dụng biến thể placeholder-shown:

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

:details-content

Tạo kiểu cho nội dung của một phần tử <details> bằng cách sử dụng biến thể details-content:

<details class="details-content:bg-gray-100 ...">  <summary>Chi tiết</summary>  Đây là một bí mật.</details>

:autofill

Tạo kiểu cho một input khi nó đã được trình duyệt tự động điền bằng cách sử dụng biến thể autofill:

<input class="autofill:bg-yellow-200 ..." />

:read-only

Tạo kiểu cho một input khi nó là chỉ đọc bằng cách sử dụng biến thể read-only:

<input class="read-only:bg-gray-100 ..." />