Hang when editing certain tailwind class names

[steveruizok]

Summary

When editing tailwind classnames, the suggestion box causes a significant delay.

Video

Kapture.2025-08-15.at.06.47.47.mp4

Snippet

```tsx export function Hello() { return

hello

; } ```

Description

When I edit the classnames of a React component in a project that uses tailwind, certain keywords appear to freeze the UI while the suggestions are created. I have turned off AI autocomplete. In the attached video, I'm pressing 0 constantly during the hang. You'll see the first zero, then the hang, and then the rest of the zeroes once the UI becomes responsive again.

Steps to reproduce:

1. In a [nextjs? project that includes tailwind]... create a react component
2. In the classname of that component, write a classname that involves a breakpoint modifier
3. Enter a pixel value

Expected Behavior: The traditional Zed snappiness
Actual Behavior: A ~2s freeze on the UI

Zed Version and System Specs

Zed: v0.199.6 (Zed)
OS: macOS 15.5.0
Memory: 16 GiB
Architecture: aarch64

[notpeter]

@steveruizok or @lixiaoyan Can you provide a set of steps to reproduce from an empty folder?

Thanks

[lixiaoyan]

@notpeter

Create two files in an empty directory, tailwind.css:

@import "tailwindcss";

and index.html:

<div class="*:m-[]"></div>

The issue can be reproduced by input some characters to index.html, inside the brackets, like *:m-[xxxxxxxxxx]

[notpeter]

Wonderful @lixiaoyan I can reproduce with your steps:

mkdir -p /tmp/issue36223
cd $_
echo '@import "tailwindcss";' > tailwind.css
echo '<div class="*:m-[]"></div>' > index.html
zed . index.html

Then quickly type some characters inside the [] brackets (e.g. 123456) and it will lag (nearly a second on my machine).

video with timer showing ~800ms lag

Screen.Recording.2025-09-17.at.15.25.32.mov

Thanks for reporting and following up.