Pseudo-Classes and Conditional Styling in Tailwind CSS

Tailwind CSS makes it easy to apply styles conditionally based on pseudo-classes, screen size, and element states. This guide will cover how to use pseudo-classes like first:, last:, odd:, and even:, how to use group and group-hover for more complex UI components, and how to combine screen size breakpoints with state variants for conditional styling.

Applying Pseudo-Classes Like first:, last:, odd:, even:

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.

Using group and group-hover for Complex UI Components

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.

Conditional Styling Based on Screen Size and State

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.

Summary

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.

Contents

Pseudo-Classes and Conditional Styling in Tailwind CSS

Applying Pseudo-Classes Like first:, last:, odd:, even:

Using the `first:` Pseudo-Class

Using the `last:` Pseudo-Class

Using the `odd:` and `even:` Pseudo-Classes

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

Using group and group-hover for Complex UI Components

Using `group` and `group-hover`

Using `group-focus`

Conditional Styling Based on Screen Size and State

Combining Screen Size with State Variants

Example: Applying Focus Styles Conditionally

Advanced Example: Responsive Grid with State Variants

Summary

Related Chapters

CATEGORY

ABOUT US

GET IN TOUCH

FOLLOW US

Contents

Pseudo-Classes and Conditional Styling in Tailwind CSS

Applying Pseudo-Classes Like first:, last:, odd:, even:

Using the first: Pseudo-Class

Using the last: Pseudo-Class

Using the odd: and even: Pseudo-Classes

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

Using group and group-hover for Complex UI Components

Using group and group-hover

Using group-focus

Conditional Styling Based on Screen Size and State

Combining Screen Size with State Variants

Example: Applying Focus Styles Conditionally

Advanced Example: Responsive Grid with State Variants

Summary

Related Chapters

CATEGORY

ABOUT US

GET IN TOUCH

FOLLOW US

Using the `first:` Pseudo-Class

Using the `last:` Pseudo-Class

Using the `odd:` and `even:` Pseudo-Classes

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

Using `group` and `group-hover`

Using `group-focus`