Handling Hover, Focus, and Other States - TailwindCSS中文文档 | TailwindCSS中文网Tailwind CSS home pagev3.4.17Introducing CatalystA modern application UI kit for ReactThemeTailwind CSS on GitHubSearchNavigationNavigation核心概念Handling Hover, Focus, and Other Statesv4.0 Beta Documentation →Preview the next Tailwind CSS.Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target. For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class: Hover over this button to see the background color change Save changes &lt;button class="bg-sky-500 hover:bg-sky-700 ..."> Save changes &lt;/button> How does this compare to traditional CSS?When writing CSS the traditional way, a single class name would do different things based on the current state.Traditionally the same class name applies different styles on hover.btn-primary { background-color: #0ea5e9; } .btn-primary:hover { background-color: #0369a1; }In Tailwind, rather than adding the styles for a hover state to an existing class, you add another class to the element that only does something on hover.In Tailwind, separate classes are used for the default state and the hover state.bg-sky-500 { background-color: #0ea5e9; } .hover\:bg-sky-700:hover { background-color: #0369a1; }Notice how hover:bg-sky-700 only defines styles for the :hover state? It does nothing by default, but as soon as you hover over an element with that class, the background color will change to sky-700.This is what we mean when we say a utility class can be applied conditionally — by using modifiers you can control exactly how your design behaves in different states, without ever leaving your HTML. Tailwind includes modifiers for just about everything you’ll ever need, including: Pseudo-classes, like :hover, :focus, :first-child, and :required Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection Media and feature queries, like responsive breakpoints, dark mode, and prefers-reduced-motion Attribute selectors, like [dir=&quot;rtl&quot;] and [open] These modifiers can even be stacked to target more specific situations, for example changing the background color in dark mode, at the medium breakpoint, on hover: &lt;button class="dark:md:hover:bg-fuchsia-600 ..."> Save changes &lt;/button> In this guide you’ll learn about every modifier available in the framework, how to use them with your own custom classes, and even how to create your own. ​Pseudo-classes ​Hover, focus, and active Style elements on hover, focus, and active using the hover, focus, and active modifiers: Try interacting with this button to see the hover, focus, and active states Save changes &lt;button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ..."> Save changes &lt;/button> Tailwind also includes modifiers for other interactive states like :visited, :focus-within, :focus-visible, and more. See the pseudo-class reference for a complete list of available pseudo-class modifiers. ​First, last, odd, and even Style an element when it is the first-child or last-child using the first and last modifiers: Kristen Ramos kristen.ramos@example.com Floyd Miles floyd.miles@example.com Courtney Henry courtney.henry@example.com Ted Fox ted.fox@example.com &lt;ul role="list" class="p-6 divide-y divide-slate-200"> {#each people as person} &lt;!-- Remove top/bottom padding when first/last child --> &lt;li class="flex py-4 first:pt-0 last:pb-0"> &lt;img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" /> &lt;div class="ml-3 overflow-hidden"> &lt;p class="text-sm font-medium text-slate-900">{person.name}&lt;/p> &lt;p class="text-sm text-slate-500 truncate">{person.email}&lt;/p> &lt;/div> &lt;/li> {/each} &lt;/ul> You can also style an element when it’s an odd or even child using the odd and even modifiers: Name Title Email Jane Cooper Regional Paradigm Technician jane.cooper@example.com Cody Fisher Product Directives Officer cody.fisher@example.com Leonard Krasner Senior Designer leonard.krasner@example.com Emily Selman VP, Hardware Engineering emily.selman@example.com Anna Roberts Chief Strategy Officer anna.roberts@example.com &lt;table> &lt;!-- ... --> &lt;tbody> {#each people as person} &lt;!-- Use a white background for odd rows, and slate-50 for even rows --> &lt;tr class="odd:bg-white even:bg-slate-50"> &lt;td>{person.name}&lt;/td> &lt;td>{person.title}&lt;/td> &lt;td>{person.email}&lt;/td> &lt;/tr> {/each} &lt;/tbody> &lt;/table> Tailwind also includes modifiers for other structural pseudo-classes like :only-child, :first-of-type, :empty, and more. See the pseudo-class reference for a complete list of available pseudo-class modifiers. ​Form states Style form elements in different states using modifiers like required, invalid, and disabled: Try making the email address valid to see the styles change Username Email Password Save changes &lt;form> &lt;label class="block"> &lt;span class="block text-sm font-medium text-slate-700">Username&lt;/span> &lt;!-- Using form state modifiers, the classes can be identical for every input --> &lt;input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500 "/> &lt;/label> &lt;!-- ... --> &lt;/form> Using modifiers 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. Tailwind also includes modifiers for other form states like :read-only, :indeterminate, :checked, and more. See the pseudo-class reference for a complete list of available pseudo-class modifiers. ​Styling based on parent state (group-{modifier}) When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* modifiers like group-hover to style the target element: Hover over the card to see both text elements change color New project Create a new project from a variety of starting templates. &lt;a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"> &lt;div class="flex items-center space-x-3"> &lt;svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24">&lt;!-- ... -->&lt;/svg> &lt;h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project&lt;/h3> &lt;/div> &lt;p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.&lt;/p> &lt;/a> This pattern works with every pseudo-class modifier, for example group-focus, group-active, or even group-odd. ​Differentiating nested groups When nesting groups, you can style something based on the state of a specific parent group by giving that parent a unique group name using a group/{name} class, and including that name in modifiers using classes like group-hover/{name}: Leslie Abbott Co-Founder / CEO Call Hector Adams VP, Marketing Call Blake Alexander Account Coordinator Call &lt;ul role="list"> {#each people as person} &lt;li class="group/item hover:bg-slate-100 ..."> &lt;img src="{person.imageUrl}" alt="" /> &lt;div> &lt;a href="{person.url}">{person.name}&lt;/a> &lt;p>{person.title}&lt;/p> &lt;/div> &lt;a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}"> &lt;span class="group-hover/edit:text-gray-700 ...">Call&lt;/span> &lt;svg class="group-hover/edit:translate-x-0.5 group-hover/edit:t
