Skip to content

[v4] Utility modifiers only work with arguments #16824

@royduin

Description

@royduin

With Tailwind 4 (4.0.9 currently); modifiers only seem to work with utilities that do have an argument, this works:

@utility text-* {
  --alpha: calc(--modifier(integer) * 1%);
  color: --alpha(--value(--*, [color]) / var(--alpha, 100%));
}

With text-default, text-default/50, text-blue, text-blue/50, etc.

This doesn't work:

@utility text {
  --alpha: calc(--modifier(integer) * 1%);
  color: --alpha(red / var(--alpha, 100%));
}

With just text, text/50, etc. as the modifier isn't parsed.

Demo: https://play.tailwindcss.com/ECphsE1vzA?file=css


Related discussion: #15775

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions