Disabled, First/Last, Odd/Even, and Transitions in Tailwind CSS

1. Styling Disabled Elements

Use the disabled: modifier to target elements when disabled:

<button class="bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-400" disabled>
    Disabled Button
</button>
            

2. First, Last, Odd, and Even

Tailwind provides utilities for targeting specific children:

• first: – First child
• last: – Last child
• odd: – Odd-indexed children
• even: – Even-indexed children

<div class="first:bg-green-100 last:bg-pink-100 odd:bg-gray-50 even:bg-gray-200">
    <p class="first:text-red-600">Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
</div>
            

3. Transitions and Timing

Add smooth transitions using Tailwind’s transition classes:

• transition – enables transition
• duration-* – duration in ms
• ease-in, ease-out, ease-in-out, linear
• delay-* – adds delay before animation

<div class="w-40 h-20 bg-blue-400 hover:bg-blue-600 transition-all duration-300 ease-in-out text-white">
    Hover Me
</div>
            

Conclusion

Tailwind's pseudo-state utilities like disabled:, first:, last:, odd:, and even: offer elegant solutions for styling dynamic UIs. Combined with transition utilities, they enable clean and interactive components without writing custom CSS.