nth-child(n) pseudo-class as a plugin?

[riha]

Would it be possible to just use the addVariant function in Tailwind to add a nth-child(n) pseudo-class?

Can really see how I would deal with the n parameter that should be passed in.

[adamwathan]

You would just do something like this 👍

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('third-child', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`third-child${separator}${className}`)}:nth-child(3)`
        })
      })
    })
  ]
}

I'm not totally sure what you are asking when you say "Can really see how I would deal with the n parameter that should be passed in" though.

[riha]

That was quick! Thanks!

The question about the parameter was how to pass in the index of the element to the variant. So if one could do something like child(3) instead of third-child - but maybe that isn't so "tailwindy"? 😊

[adamwathan]

The question about the parameter was how to pass in the index of the element to the variant. So if one could do something like child(3) instead of third-child - but maybe that isn't so "tailwindy"? 😊

CSS is just static right, so you can't exactly have dynamic parameters in class names. But you can name the variant child(3) if you wanted:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('child(3)', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`child(3)${separator}${className}`)}:nth-child(3)`
        })
      })
    })
  ]
}

There's no way to do like a "function call" from inside the class attribute of your HTML though.

[riha]

Ok - right, I see. Thanks.

[asimpletune]

Now with jit I mode, can we really do child[3]? or child[3n+1] etc..?

[crswll]

You'll be able to when arbitrary variants arrive. It's unforunate you can't use a custom propery for the time being.

[frei-x]

https://dev.to/wheelmaker24/why-you-don-t-need-every-css-pseudo-selector-in-tailwind-css-3kn1

[PositiveUser]

I have tried, but this does not work

// tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant(`nth-child-var`, ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`nth-child-var${separator}${className}`)}:nth-child(var(--variable-number))`
        })
      })
    }),
  ],
}

[Noitidart]

Did you figure this out, I'm also stuck. I'm tryign this lib https://www.npmjs.com/package/tailwind-nth-child