Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add nth-* variants #13661

Open
wants to merge 5 commits into
base: next
Choose a base branch
from
Open

Add nth-* variants #13661

wants to merge 5 commits into from

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented May 8, 2024

This adds variants for the :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type() pseudo classes. These variants support arbitrary values as well as numeric bare values. Refer to the table below for example usasges on what selectors these variants produce:

Variant Selector
nth-3:* &:nth-child(3)
nth-[2n+1]:* &:nth-child(2n+1)
nth-[2n+1_of_.item]:* &:nth-child(2n+1 of .item)
nth-last-3:* &:nth-last-child(3)
nth-last-[2n+1]:* &:nth-last-child(2n+1)
nth-last-[2n+1_of_.item]:* &:nth-last-child(2n+1 of .item)
nth-of-type-3:* &:nth-of-type(3)
nth-of-type-[2n+1]:* &:nth-of-type(2n+1)
nth-last-of-type-3:* &:nth-last-of-type(3)
nth-last-of-type-[2n+1]:* &:nth-last-of-type(2n+1)

Copy link
Contributor

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing it doesn't really do is read from a config, but I think think that even makes sense so this is looking good to me 👍

packages/tailwindcss/src/variants.test.ts Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants