Trying to create a mask divider library but stuck on one crucial aspect

[joezappie]

Here is a tailwind play example of what I'm working on:
https://play.tailwindcss.com/PGbJiyqxsT?file=css

My goal is to be able to add shape dividers between elements. I want to be able to add an element between my two elements to specify which shape to use. Using a tailwind utility class I can set the "size" of the divider such as divider-30 and the shape like divider-double-triangle-down.

With divider-30 it makes the divider take up 120px in height. I want to automatically apply:

• -120px bottom margin and 120px bottom padding to the previous element
• 120px top padding to the next element.

This is needed to ensure it looks like the backgrounds flow under each other.

The issue is that there is no actual previous selector in css. The best you can do is previous:has(+ next). I need to set the divider height as a variable on the previous element.

I could get this working if I manually defined the divider sizes I'm allowed to use, but I'm not a huge fan of that. I'm wondering if there's any tailwind magic that can be used here to autogenerate those needed classes. Or if anyone else has a clever idea on how to make this work.

TLDR: Is there a way to automate the generation of this kind of code:

.accepts-divider:has(+ .divider-10) {
    margin-bottom: calc(var(--spacing) * -10);
    padding-bottom: calc(var(--spacing) * 10);
}

.accepts-divider:has(+ .divider-30) {
    margin-bottom: calc(var(--spacing) * -30);
    padding-bottom: calc(var(--spacing) * 30);
}

Previous attempt:

I originally was just setting the divider on the previous element which is easy to get working as it only requires the next sibling selector. This felt confusing however as its setting the divider after the element. I often was going to the wrong element to modify the divider then remembering I need to actually go to the previous element. Moving it to its own element in between makes the most sense and means individual components don't know about the divider being used.

[joezappie]

Basically, I'm hoping theres a way to get tailwind to generate an additional global class when a utility class is used:

@utility divider-* {
  .accepts-divider:has(+ .divider-(--value(integer))) {
      margin-bottom: calc(var(--spacing) * --value(integer) * -1);
    padding-bottom: calc(var(--spacing) * --value(integer));
  }
}

Obviously that doesn't work as its scoped to the element and not global, but I hope that gets the gist across. I feel like this would have been possible with a JS tailwind v3 plugin so I'm curious if theres a way to do this in v4.

[wongjn]

You could consider adding the .accepts-divider inside the @utility, and having the nesting & anchor inside :has(): https://play.tailwindcss.com/2qxwuIZIc1?file=css

[joezappie]

Incredible! Thank you I believe that's exactly what I'm looking for.

I originally tried something very close but since it wasn't working I assumed that nesting the .accepts-divider meant that it wouldn't be global and would only match on something like .divider-8.accepts-divider. I guess thats not the case. Also I had no clue you could do + & so I appreciate the help!

  // One of my attemps being so close
  .accepts-divider:has(+ .divider) {
    --divider-bottom: calc(var(--spacing) * --value(integer));
  }