disable suggestCanonicalClasses for the next line

[xloc]

It is generally good to have canonical classes warning and quick fixes.

However, I found it is more straightforward to use w-[?px] sometimes but the warnings always show up. I wonder if there is a way to disable the warning for a certain line/block/file of code rather than disable it for the entire project.

Thanks in advance!

[RobinMalfait]

What's a situation where you prefer the arbitrary value notation?

We recently made a change where large numbers that don't make sense stay as-is. For example left-[99999px] would stay like that.

I wonder if your situation is one that we could also make an exception for.

[AdyaTech]

At the moment, I don't believe the extension supports disabling canonical class warnings on a per-line, per-block, or per-file basis.

The warning is designed to encourage the use of Tailwind's canonical utility classes (for example, w-4 instead of w-[16px]) and is typically configured at the project level rather than the code level.

However, I think there are cases where arbitrary values like w-[123px] are the most practical solution, especially when:

• The value doesn't map cleanly to the Tailwind scale.
• You're matching a design specification exactly.
• Introducing a custom theme token would add unnecessary complexity.

For now, the only available option may be to disable the warning globally in the extension settings, if that's supported.

[xloc]

@RobinMalfait Thank you so much for the quick response!

My use case is a draggable divider used for resizing. I'm not sure if that's the optimal way to style it, but here I set the width to be 11px (as the interactive region) and set the margin-x to be -5px so that there is a 11px-2*5px = 1px line visible to the user.

<div class="flex h-screen w-screen">
  <div class="flex-1"></div>
  <div class="-mx-[5px] w-[11px] flex-none cursor-col-resize border-x-[5px] border-transparent bg-zinc-300 bg-clip-padding transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-500"></div>
  <div class="flex-1"></div>
</div>

I found using the px unit makes me easier to eyeball the numerical relationship and make adjustments.
(to be honest, 0.25/.5/.75 isn't easy to type repeatedly)

[wongjn]

You could consider using CSS variables with descriptive names so that there are less magic numbers like:

<div class="[--width:11px] -mx-[calc(var(--width)/2)] w-(--width) border-x-[calc(var(--width)/2)] …"></div>

[ysulyma]

@RobinMalfait I have an unusual situation where I use JSX to simulate a video, and I dynamically adjust the root font-size so that content scales with the viewport; however, video controls lying over the content do not get this treatment. (It is roughly like setting --spacing: 1vw). So for my situation it is incorrect to simplify p-[4px] to any multiple of var(--spacing).