Pseudo-Classes and Conditional Styling in Tailwind CSS

Pseudo-classes in Tailwind CSS allow you to apply styles based on the position or condition of an element within its parent.

Using the first: Pseudo-Class

The first: pseudo-class applies styles to the first child of a parent element.

Example: Styling the First Child

<ul>
    <li class="first:text-red-500">First item (red)</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

• first:text-red-500: The first list item will have red text.

Using the last: Pseudo-Class

The last: pseudo-class applies styles to the last child of a parent element.

Example: Styling the Last Child

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li class="last:text-blue-500">Last item (blue)</li>
</ul>

• last:text-blue-500: The last list item will have blue text.

Using the odd: and even: Pseudo-Classes

The odd: and even: pseudo-classes apply styles to odd- and even-numbered children, respectively.

Example: Styling Odd and Even Rows in a Table

<table class="min-w-full">
    <tr class="odd:bg-gray-100 even:bg-gray-200">
        <td>Row 1</td>
    </tr>
    <tr class="odd:bg-gray-100 even:bg-gray-200">
        <td>Row 2</td>
    </tr>
    <tr class="odd:bg-gray-100 even:bg-gray-200">
        <td>Row 3</td>
    </tr>
</table>

• odd:bg-gray-100: Odd rows have a light gray background.
• even:bg-gray-200: Even rows have a slightly darker gray background.

Using the nth-child(n) Pseudo-Class (with nth: Variant)

Though not a built-in Tailwind feature, you can extend Tailwind CSS to support nth-child(n) by adding custom variants. This approach allows you to apply styles to any nth-child.

Example: Using nth-child(3n+1) for Custom Styling

First, extend Tailwind’s configuration (if using a plugin):

module.exports = {
  plugins: [
    function({ addVariant }) {
      addVariant('nth', '&:nth-child(3n+1)');
    }
  ],
}

Then, use the custom nth: variant in your HTML:

<ul>
    <li class="nth:text-purple-500">Styled every third item</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="nth:text-purple-500">Styled every third item</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

• nth:text-purple-500: Every third list item (starting from the first) will have purple text.

Tailwind’s group and group-hover classes allow you to apply styles to multiple elements when a parent element is hovered over or focused.

Using group and group-hover

The group class is added to a parent element, while the group-hover or group-focus classes are used on child elements to style them based on the parent’s state.

Example: Changing Child Element Styles on Parent Hover

<div class="group bg-gray-200 p-4">
    <h2 class="text-lg group-hover:text-blue-500">Hover over this box</h2>
    <p class="text-gray-600 group-hover:text-blue-300">The text color changes on hover</p>
</div>

• group: Applied to the parent element.
• group-hover:text-blue-500: Changes the text color of the child element when the parent is hovered.

Using group-focus

Similar to group-hover, group-focus changes styles when a parent element is focused.

Example: Changing Styles on Parent Focus

<div class="group p-4 border border-gray-300 focus-within:border-blue-500">
    <label class="block text-gray-700 group-focus:text-blue-500">Focus me</label>
    <input type="text" class="form-input mt-1 block w-full">
</div>

• group-focus:text-blue-500: Changes the text color when the input is focused.

Tailwind’s responsive design utilities can be combined with state variants to apply styles based on both screen size and user interaction.

Combining Screen Size with State Variants

You can combine responsive utilities like sm:, md:, lg:, and xl: with state variants like hover:, focus:, and active: to apply styles conditionally based on both screen size and state.

Example: Conditional Hover Styles Based on Screen Size

<button class="bg-green-500 text-white py-2 px-4 rounded md:bg-blue-500 lg:hover:bg-red-500">
    Responsive Button
</button>

• md:bg-blue-500: The button background is blue on medium screens (768px and up).
• lg:hover:bg-red-500: The button background changes to red when hovered on large screens (1024px and up).

Example: Applying Focus Styles Conditionally

<input type="text" class="border p-2 border-gray-300 focus:border-blue-500 sm:focus:border-green-500 md:focus:border-red-500" placeholder="Responsive input" />

• focus:border-blue-500: The border color changes to blue on focus.
• sm:focus:border-green-500: On small screens (640px and up), the border changes to green instead.
• md:focus:border-red-500: On medium screens (768px and up), the border changes to red instead.

Advanced Example: Responsive Grid with State Variants

You can create a responsive grid where items change appearance based on screen size and interaction.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <div class="group bg-gray-200 p-4 sm:hover:bg-blue-500 md:hover:bg-green-500">
        <h2 class="group-hover:text-white">Grid Item 1</h2>
    </div>
    <div class="group bg-gray-200 p-4 sm:hover:bg-blue-500 md:hover:bg-green-500">
        <h2 class="group-hover:text-white">Grid Item 2</h2>
    </div>
    <div class="group bg-gray-200 p-4 sm:hover:bg-blue-500 md:hover:bg-green-500">
        <h2 class="group-hover:text-white">Grid Item 3</h2>
    </div>
</div>

• grid-cols-1 sm:grid-cols-2 md:grid-cols-3: The grid adjusts from 1 to 2 to 3 columns based on screen size.
• sm:hover:bg-blue-500 md:hover:bg-green-500: The background color changes on hover, depending on screen size.
• group-hover:text-white: The text color changes to white when the parent is hovered.

Tailwind CSS provides powerful utilities for handling pseudo-classes and conditional styling. By leveraging pseudo-classes like first:, last:, odd:, and even:, along with the group and group-hover classes, you can create dynamic, responsive UI components. Additionally, combining screen size breakpoints with state variants allows you to tailor your designs to different devices and user interactions, ensuring a flexible and adaptable user experience across your web application.