❮ Previous Next ❯

Utility Variants

  • Learn hover, focus, active and dark mode utility variants.

  • What Are Utility Variants in Tailwind CSS ?

    In Tailwind CSS, utility variants allow you to apply styles based on state, condition, or position.

    In simple terms:

    Utility variants are prefixes that modify when or how a utility class applies.

    They replace traditional CSS like:

    button:hover { }

    input:focus { }

    p::first-child { }

    With inline, readable utilities.

    Why Utility Variants Are Important

    Variants allow you to:

    • Handle interactions (hover, focus, active)

    • Style pseudo-elements (::before, ::after)

    • Style form states (required, placeholder)

    • Avoid writing custom CSS

    • Keep styles close to markup

    This is modern CSS workflow, not a shortcut.

    Hover Variant

    What Is hover: ?

    The hover: variant applies styles when the user hovers over an element.

    Syntax:

    hover:{utility}

Hover Background Change

hover:bg-blue-700 changes the button background color when the user hovers over it. 

<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Hover Me
</button>

  • Meaning:

    • Normal → blue background

    • On hover → darker blue

    No CSS selector required.


Hover Text Effects

hover:text-blue-800 changes text color and hover:underline adds an underline when hovering. 

<a class="text-blue-600 hover:text-blue-800 hover:underline">
  Read more
</a>

  • Hover can modify:

    • Color

    • Decoration

    • Background

    • Shadow

    • Transform (later lessons)

      Focus & Active Variants 

      Focus Variant

      focus: applies styles when an element receives keyboard or mouse focus.

      Very important for:

      • Accessibility

      • Forms

      • Keyboard navigation

    Focus Style for Input

    focus:ring-2 and focus:ring-blue-500 add a blue ring around the input when it receives focus. 

    <input
  class="border p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

    • This shows:

      • Clear visual focus

      • Better accessibility

      Active Variant

    Active Button Effect

    active:bg-green-700 changes the button background while the button is being clicked. 

    <button class="bg-green-600 active:bg-green-700 text-white px-4 py-2">
  Click Me
</button>

    • Active state gives:

      • Immediate feedback

      • Better user experience

      First-child Variant

      What Is first: ?

      The first: variant targets the first child element inside a parent.

      Equivalent to:

      :first-child

    First Child Styling

    first:font-bold applies bold style only to the first child element inside the parent. 

    <ul>
  <li class="first:font-bold">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

    • Result:

      • First list item is bold

      • Others are normal

      Used commonly in:

      • Lists

      • Menus

      • Tables

        What is required ?

        The required: variant applies styles when an input has the required attribute.

      Required Input

      required:border-red-500 applies a red border when the input field has the required attribute. 

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

      • This helps:

        • Visually indicate required fields

        • Improve form clarity

        No JavaScript required.

        Before & After Variants

        What Are before: and after: ?

        These variants style pseudo-elements:

        • ::before

        • ::after

        They allow decorative UI without extra HTML.

      Before Pseudo Element

      before: utilities create a decorative element before the heading, often used for underline or design effects. 

      <h2 class="relative before:content-[''] before:absolute before:left-0 before:bottom-0 before:w-full before:h-1 before:bg-blue-500">
  Section Title
</h2>

      • This creates:

        • A decorative underline

        • Using only utilities

      After Pseudo Element

      after:content-['→'] adds an arrow symbol after the button text using a pseudo-element. 

      <button class="relative after:content-['→'] after:ml-2">
  Continue
</button>

      • Used for:

        • Icons

        • Decorations

        • Visual cues

      • Placeholder Variant

        What is placeholder ?

        The placeholder: variant styles placeholder text inside inputs.

      Placeholder Text Styling

      placeholder: utilities style the placeholder text, like changing color or making it italic. 

      <input
  placeholder="Enter email"
  class="border p-2 placeholder:text-gray-400 placeholder:italic"
/>

      • This improves:

        • Visual clarity

        • Input affordance

        Selection Variant

        What Is selection: ?

        The selection: variant styles text when the user selects it.

        Equivalent to:

        ::selection

      Custom Text Selection

      selection:bg-yellow-300 and selection:text-black change the background and text color when the user selects the text. 

      <p class="selection:bg-yellow-300 selection:text-black">
  Select this text to see the effect.
</p>

      • Used for:

        • Branding

        • Editorial websites

        • Polished UI experience

          Combining Variants

        Multiple Variant Button

        Combines hover, active, and focus variants to apply different styles during hover, click, and focus states. 

        <button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:ring-2 focus:ring-blue-400 text-white px-4 py-2">
  Advanced Button
</button>

        • This handles:

          • Hover

          • Active

          • Focus

          All without CSS.

          Common Mistakes

          • Overusing hover effects

          • Ignoring focus states (accessibility issue)

          • Using before/after without content

          • Styling placeholder text too lightly

          • Forgetting variants can be combined

          Variants should enhance, not overwhelm.

          Best Practices for Utility Variants

          • Always include focus styles

          • Keep hover effects subtle

          • Use before/after for decoration, not structure

          • Use required variant for form clarity

          • Test interactions on keyboard and mouse

        ❮ Previous Next ❯