Question Details

No question body available.

Tags

tailwind-css tailwind-css-4

Answers (1)

Accepted Answer Available
Accepted Answer
September 8, 2025 Score: 2 Rep: 19,905 Quality: High Completeness: 100%

You can use the odd and even variants.

Use the max-breakpoint variants alongside the breakpoint variants, so you can revoke the odd-item styling above the XL breakpoint.

And then you just need to chain the variants together. From left to right, in order of importance: first, declare the breakpoint, then use to select the nested child elements, and finally, with odd/even, target the child elements and specify the styling for odd or even.

By default, up to the XL breakpoint, the odd children of the current element should have a blue background.

max-xl::odd:bg-blue-500

From the XL breakpoint onward, the even children of the current element should have a blue background.

xl::even:bg-blue-500

Example:


  
1

  
2

  
3

  
4

  
5

  
6

  
7

  
8

  
9

  
10

Now that clarified this, you can replace odd and even with special arbitrary variants using the requested child selectors:

Make every odd item (1, 3, 5, 7, 9) blue

max-xl::odd:bg-blue-500

Only make every 4th starting at 1 (1, 5, 9) blue

xl::[:nth-child(4n+1)]:bg-blue-500

Example:


  
1

  
2

  
3

  
4

  
5

  
6

  
7

  
8

  
9

  
10