How do I add the first-line pseudo-class?

[afuno]

I'm trying to implement it with this code:

function({ addVariant, e }) {
  addVariant('first-line', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${e(`first-line${separator}${className}`)}::first-line`
    })
  })
},

Or by analogy from your source code:

function({ addVariant, e }) {
  addVariant('first-line', ({ modifySelectors, separator }) => {
    modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(sel => {
          sel.value = `first-line${separator}${sel.value}`
          sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `::first-line` }))
        })
      }).processSync(selector)
    })
  })
},

Then I add for the flex item that is on the first line:

<div class="flex flex-row justify-between flex-wrap items-center mt-16 xs:space-y-32">
  <div class="bg-gray-light p-4">1</div>
  <div class="bg-gray-light p-4 first-line:mt-0">2</div>
  <div class="bg-gray-light p-4 first-line:mt-0">3</div>
</div>

Can you please tell me where I made a mistake?

[afuno]

As far as I understood, the two subsequent elements somehow seem to be not on the first line?
Because such static code doesn't work either:

.first-line-mt-0::first-line {
  margin-top: 0;
}

[royvanv]

Margin is not alllowed, see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line#Allowable_properties

In your example it makes no sense to use it, you could just use mt-0.

[afuno]

My example has xs:space-y-32. Using mt-0 will either break this or be ignored.