--value() in pseudo selector

[SirMetathyst]

not sure if this is even possible but would really love to do something like this:

@utility stack--split-* {
  & > :nth-child(--value(integer)) {
    margin-block-end: auto;
  }
  &:only-child {
    block-size: 100%;
  }
}

so I don't have to do this:

  .stack--split\:1:only-child,
  .stack--split\:2:only-child,
  .stack--split\:3:only-child {
    block-size: 100%;
  }

  .stack--split\:1 > :nth-child(1),
  .stack--split\:2 > :nth-child(2),
  .stack--split\:3 > :nth-child(3) {
    margin-block-end: auto;
  }

[rozsazoltan]

This works, doesn't it?

• https://play.tailwindcss.com/I1okJLsov5

@import "tailwindcss";

@theme inline {
  --block-size-full: 100%;
  --block-size-min: min-content;
  --block-size-max: max-content;
  --block-size-fit: fit-content;
}

@utility block-size-* {
  block-size: calc(var(--spacing) * --value(integer));
  block-size: --value(--block-size-*, 'auto', [*]);
}

<div class="only:block-size-full *:nth-3:me-auto"></div>

I know it's not exactly what you want, but the final result can be achieved with a variant, and ultimately this way you'll have less code duplication, since in your solution the only:block-size-full CSS would be repeated for every single stack--split-* case.

[rozsazoltan]

Or:

<div class="only:block-size-full [&_>_:nth-child(3)]:me-auto"></div>

[SirMetathyst]

Thank you for your suggestion. Unfortunately this is fundamentally different in intent. I have more to stack than just what I wrote and I don't want to use tailwind further than simple utilities + my own components. I actually don't mind the duplication and just wanted a way to generate utilities without having to write them out by hand which also increases the size of my input css files.

[SirMetathyst]

essentially my stack is abstraction over several classes and holds specific meaning but the tailwind approach will obscure that and make it harder to replicate or change when used across the entire codebase.

[SirMetathyst]

I thought that tailwind doesn't include component css which is not used when put into the components layer, but it is still in the output for some reason. Was I mistaken or is there something I'm doing wrong?