How to use TailwindCSS state variants (hover, focus, active, etc.)? - 面试题

TailwindCSS provides a powerful state variant system that allows developers to apply different styles based on different element states (such as hover, focus, active, etc.).

Basic State Variants

1. Hover State

Styles applied when the mouse hovers over an element.

html
<!-- Basic hover -->
<button class="bg-blue-500 hover:bg-blue-600">
  Hover color change
</button>

<!-- Multiple hover effects -->
<button class="bg-blue-500 hover:bg-blue-600 hover:scale-105 hover:shadow-lg">
  Multiple hover effects
</button>

2. Focus State

Styles applied when an element receives focus.

html
<!-- Basic focus -->
<input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">

<!-- focus-visible (keyboard navigation only) -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
  Keyboard navigation focus
</button>

3. Active State

Styles applied when an element is activated (clicked).

html
<!-- Basic active -->
<button class="bg-blue-500 active:bg-blue-700">
  Click effect
</button>

<!-- Combined states -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 active:scale-95">
  Combined state effects
</button>

Form State Variants

1. Disabled State

Styles for disabled elements.

html
<!-- Basic disabled -->
<button class="bg-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
  Disabled button
</button>

<!-- Form input -->
<input class="border-gray-300 disabled:bg-gray-100 disabled:text-gray-500" disabled>

2. Read-only State

Styles for read-only elements.

html
<input class="border-gray-300 read-only:bg-gray-100 read-only:text-gray-500" readonly>

3. Checked State

Checked state for checkboxes and radio buttons.

html
<!-- Checkbox -->
<input type="checkbox" class="accent-blue-500 checked:accent-blue-600">

<!-- Using peer variant -->
<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer">
  <span class="peer-checked:text-blue-500 peer-checked:font-bold">
    Color change when checked
  </span>
</label>

Pseudo-class Variants

1. First-child and Last-child

html
<!-- First child -->
<ul class="space-y-2">
  <li class="first:font-bold first:text-blue-500">First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Last child -->
<ul class="space-y-2">
  <li>First item</li>
  <li>Second item</li>
  <li class="last:font-bold last:text-blue-500">Last item</li>
</ul>

2. Odd and Even

html
<!-- Odd rows -->
<table class="w-full">
  <tbody>
    <tr class="odd:bg-gray-100">
      <td>Odd row</td>
    </tr>
    <tr>
      <td>Even row</td>
    </tr>
  </tbody>
</table>

<!-- Even rows -->
<table class="w-full">
  <tbody>
    <tr>
      <td>Odd row</td>
    </tr>
    <tr class="even:bg-gray-100">
      <td>Even row</td>
    </tr>
  </tbody>
</table>

3. Before and After

html
<!-- Using before pseudo-element -->
<div class="before:content-[''] before:block before:w-4 before:h-4 before:bg-blue-500">
  Prefix element
</div>

<!-- Using after pseudo-element -->
<div class="after:content-['→'] after:ml-2 after:text-blue-500">
  Suffix element
</div>

Media Query Variants

1. Responsive Variants

html
<!-- Mobile-first responsive -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

<!-- Responsive show/hide -->
<div class="block md:hidden lg:block">
  Conditional display
</div>

2. Dark Mode

html
<!-- Enable dark mode -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Dark mode support
</div>

<!-- Dark mode configuration -->
<script>
// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
}
</script>

3. Print Styles

html
<div class="print:hidden">
  Hide when printing
</div>

<div class="print:block hidden">
  Show only when printing
</div>

Interaction State Variants

1. Group and Group-hover

html
<!-- Parent-child interaction -->
<div class="group">
  <p class="text-gray-600 group-hover:text-blue-500">
    Color change when hovering parent element
  </p>
</div>

<!-- Multi-level nesting -->
<div class="group">
  <div class="group-hover:bg-blue-100">
    <span class="group-hover:text-blue-500">
      Nested hover effect
    </span>
  </div>
</div>

2. Peer and Peer-checked

html
<!-- Sibling element interaction -->
<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer">
  <span class="peer-checked:text-blue-500 peer-checked:font-bold">
    Color change when checked
  </span>
</label>

<!-- Complex interaction -->
<div>
  <input type="checkbox" class="peer" id="toggle">
  <div class="hidden peer-checked:block">
    Content shown when checked
  </div>
</div>

3. Focus-within

html
<!-- When child element receives focus -->
<div class="focus-within:ring-2 focus-within:ring-blue-500">
  <input type="text" placeholder="Parent element will have border when typing">
</div>

Custom State Variants

1. Adding Custom Variants

javascript
// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      // Add custom variant
      addVariant('important', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${className}!`;
        });
      });
    }),
  ],
}

2. Using Custom Variants

html
<!-- Using custom variant -->
<div class="text-gray-500 important:text-blue-500">
  Higher priority style
</div>

State Variant Stacking

TailwindCSS supports stacking multiple state variants to achieve complex interaction effects.

html
<!-- Stack multiple variants -->
<button class="
  bg-blue-500
  hover:bg-blue-600
  focus:bg-blue-700
  active:bg-blue-800
  disabled:bg-gray-400
  disabled:cursor-not-allowed
">
  Multi-state button
</button>

<!-- Responsive + State -->
<div class="
  w-full
  md:w-1/2
  lg:w-1/3
  hover:shadow-lg
  focus:ring-2
">
  Responsive interactive element
</div>

<!-- Dark mode + State -->
<button class="
  bg-white
  dark:bg-gray-800
  hover:bg-gray-100
  dark:hover:bg-gray-700
  text-gray-900
  dark:text-white
">
  Dark mode button
</button>

Best Practices

Reasonable use of state variants: Avoid overuse to maintain code readability
Mobile-first: Write basic styles first, then add state variants
Combined use: Reasonably combine multiple state variants to achieve complex effects
Test interactions: Ensure all state variants work properly on different devices and browsers
Performance consideration: Avoid using too many state variants that may affect performance

Considerations

Variant order: Some variants have specific order requirements (like group-hover)
Browser compatibility: Some pseudo-classes may not be supported in older browsers
Performance impact: Too many state variants may affect CSS file size
Accessibility: Ensure state variants don't affect keyboard navigation and screen readers