Can I loop while defining a style?

[FabianoLothor]

I am adding this to a .css. Is it possible to create them using some sort of loop like @for on Saas?

    &.app-task-progress-5 td:first-child::after { @apply w-[5%]; }
    &.app-task-progress-10 td:first-child::after { @apply w-[10%]; }
    &.app-task-progress-15 td:first-child::after { @apply w-[15%]; }
    &.app-task-progress-10 td:first-child::after { @apply w-[20%]; }
    &.app-task-progress-25 td:first-child::after { @apply w-[25%]; }
    &.app-task-progress-30 td:first-child::after { @apply w-[30%]; }
    &.app-task-progress-35 td:first-child::after { @apply w-[35%]; }
    &.app-task-progress-40 td:first-child::after { @apply w-[40%]; }
    &.app-task-progress-45 td:first-child::after { @apply w-[45%]; }
    &.app-task-progress-50 td:first-child::after { @apply w-[50%]; }
    &.app-task-progress-55 td:first-child::after { @apply w-[55%]; }
    &.app-task-progress-60 td:first-child::after { @apply w-[60%]; }
    &.app-task-progress-65 td:first-child::after { @apply w-[65%]; }
    &.app-task-progress-70 td:first-child::after { @apply w-[70%]; }
    &.app-task-progress-75 td:first-child::after { @apply w-[75%]; }
    &.app-task-progress-80 td:first-child::after { @apply w-[80%]; }
    &.app-task-progress-85 td:first-child::after { @apply w-[85%]; }
    &.app-task-progress-90 td:first-child::after { @apply w-[90%]; }
    &.app-task-progress-95 td:first-child::after { @apply w-[95%]; }
    &.app-task-progress-100 td:first-child::after { @apply w-[100%]; }

It is also possible to add the after:w-[?%] class directly to the first td of the table, but in my scenario is easier and more logical add styles on the tr, that is "why" I am doing this.

[wongjn]

No, there is no looping with CSS.

Assuming the app-task-progress-* class is added dynamically, I'd suggest using a style attribute alongside to set a CSS variable like:

<tr class="app-task-progress-50" style="--progress: 50%">
  <td class="first:after:w-(--progress)">

Otherwise, you could define a @utility with @source inline to emulate a loop:

@utility app-task-progress-* {
  td:first-child::after {
    width: calc(--value(integer) * 1%);
  }
}

@source inline("app-task-progress-{0..100..5}");

[FabianoLothor]

I'm astonished! Really thank you!

I was bothered with that amount of repetitive css rules, the utility feature is beautiful!

I'm not used to create custom utilities, certainly learned something today.

You helped me to create this nice progress-bar in the bottom of each TR with a combination of ::before and ::after.

I was spacing the width by 5 to not overload my css file with 100 of similar rules, now with the utility I can easily get the progress-bar working for each % unit.

[rozsazoltan]

So, in the case of @utility name-* { ... }, the value written in * can be handled with --value(), reused multiple times, and you can apply various calculations depending on whether the received value is, for example, a number, a ratio, etc.

Additionally, you can use a modifier, like in bg-sky-500/60, where the modifier is 60 and can be accessed with --modifier().

Related examples for functional utilities:

• https://tailwindcss.com/docs/adding-custom-styles#functional-utilities
• Combining multiple utilities to avoid code duplication; attaching a prefix to --value due to utility name shortening
• Tailwind functional utilities
• tailwind using in-between classes
• Why not working {min-,max-,}w-screen-{breakpoint} following the pattern of {min-,max-,}w-{container_breakpoint}
• How to implement background-position-x and background-position-y utilities?

To include all classes in the code without using them, you can use @source inline, where a special syntax allows you to avoid a static listing. (But this is actually unnecessary if the only goal is to use the created classes later. TailwindCSS automatically detects classes like app-task-progress-50 written by Wongjn; there's no need to force them into output.css with @source inline.)

• https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities
• Safelist in V4 #15291 (comment)
• Safelist in V4 #15291 (reply in thread)
• How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?

Specifically, for your example, Wongjn's answer is the best.

• Can I loop while defining a style? #18941 (comment)