`prefix(tw)` not applied to nested classes inside utility class, and can't manually prefix

[rashadmehtab]

Version of Tailwind CSS:
v4.1.11

Build Tool (or Framework):
webpack

Node.js Version:
v20.18.3

Browser:
Chrome

Operating System:
Windows

Reproduction URL:
https://play.tailwindcss.com/eRgQvRxyzS?file=css

Description of the Issue:

First, I want to thank the team for the incredible Tailwind CSS framework! That said, I’ve encountered an issue and would greatly appreciate your help.

I'm encountering an issue where utility classes inside a modal are not automatically prefixed when using Tailwind’s prefix(tw) feature, and I can’t manually add the prefix to these classes either. Specifically, the .modal-content class inside the modal utility doesn’t get prefixed as expected.

Example:

modal.css:

@utility modal {
   display: grid;

  &[open] {
    .modal-content {
      visibility: visible;
      opacity: 1;
      /* other css */
    }
  }
}

@utility modal-content {
    opacity: 0;
  /* other css */
}

main.css:

@import "tailwindcss" prefix(tw);

index.html:

<div class="tw:modal">
  <div class="tw:modal-content"></div>
</div>

Issue:

When I use the prefix(tw) feature, the .modal-content class inside the modal utility doesn’t automatically get the tw: prefix, and I can’t manually add the prefix myself, like:

.tw\:modal-content {
  opacity: 1;
  /* other css */
}

This issue occurs because the nested classes inside the modal utility aren’t being prefixed automatically when prefix(tw) is used. I’m unable to manually add the prefix either, as it doesn’t follow the prefix(tw) rule for those nested classes.

Expected Behavior:

The .modal-content class (and any nested classes inside utility declarations) should automatically receive the tw: prefix when using prefix(tw), without needing manual intervention.

[rashadmehtab]

Even :has() selector with prefixed classes not working as expected

@utility breadcrumb-item {
  &:has(.breadcrumb-separator) {
    @variant before {
      content: none;
    }
  }
}

The above code does not work when the generated class is prefixed, for example:

<li class="tw:breadcrumb-item">
  <span class="tw:breadcrumb-separator"></span>
</li>

The issue arises because the selector is looking for:

&:has(.tw\:breadcrumb-separator)

But in my setup, I can't manually specify the prefix (tw) inside the selector — it needs to be automatically derived from the configured prefix.

[Matheun]

@rashadmehtab Give this a try:

@import "tailwindcss" prefix(tw);

@utility modal {
  /* matches .tw:modal-content, .tw-new:modal-content, .anything:modal-content, etc. */
  [class*=":modal-content"] {
    background-color: red;
  }

  /* matches any class that ends with modal-content */
  [class$="modal-content"] {
    background-color: red;
  }
}

@utility modal-content {
  color: blue;
}

Otherwise, maybe look into functional utilities: https://tailwindcss.com/docs/adding-custom-styles#functional-utilities

A custom variant could also be a solution.