no-unnecessary-whitespace

oxlint rule that collapses repeated spaces and trims leading and trailing whitespace in Tailwind CSS class strings, with an autofix.

At a glance

Autofix	Editor suggestions	Design system	Options
Yes	No	Not used	None

What this rule does

Normalizes whitespace inside Tailwind class strings: runs of spaces or tabs collapse to one space, leading and trailing whitespace gets trimmed (with one carve-out at template-expression boundaries — see below), and the rule autofixes everything in a single pass.

DS-independent — works without settings.tailwindcss.entryPoint. Pure whitespace transform.

The rule is multiline-aware: it deliberately preserves \n + the indentation that follows each newline. That's the format enforce-consistent-line-wrapping produces with classesPerLine, and collapsing it back would set up an unfixable cycle between the two rules (issue #14). This includes the indented closing backtick of the block convention (a \n + spaces before the closing `) — that trailing indentation is intentional formatting and is never trimmed (issue #109). Inside one line, tabs and double spaces still collapse normally.

Template literals get one extra rule: a single trailing space before an expression (`flex ${x}`) or a single leading space after one (`${x} flex`) is preserved — those are intentional spaces that prevent classes from being smashed together at runtime.

Options

This rule has no options. The behavior is "collapse runs to single spaces, preserve intentional newlines and template-boundary spaces" — there's no useful axis to configure.

Examples

✗ Incorrect

// Leading + trailing + internal double spaces
<div className="  flex   items-center  " />
//              ~~~~~~~~~~~~~~~~~~~~~~~~  → "flex items-center"

// Internal double space
<div className="flex  items-center" />
//              ~~~~~~~~~~~~~~~~~~  → "flex items-center"

// Tab as separator inside a single line
const className = `flex	items-center`
//                 ~~~~~~~~~~~~~~~~~  → "flex items-center"

✓ Correct

// Single spaces
<div className="flex items-center" />

// Template literal: boundary spaces preserved
<div className={`flex ${x}`} />
<div className={`${x} flex`} />

// Multiline (e.g. from enforce-consistent-line-wrapping): preserved
const className = `bg-red-500 text-white
                   hover:bg-red-600 focus:ring-2`

// Block convention: the indented closing backtick is preserved (#109)
const className = `
  bg-red-500 text-white
  hover:bg-red-600 focus:ring-2
`

Interactions with other rules

• enforce-consistent-line-wrapping: designed to coexist. This rule preserves the \n + indent that wrapping inserts; without that, the two would fight on every autofix pass.
• enforce-sort-order and every other class-rewriting rule: those rebuild the string via rebuildClassString, which always emits canonical single-space separators — running them first makes no-unnecessary-whitespace a no-op.
• All extractor-driven rules: the cleaned-up string is what every other rule sees on the next pass, so running this rule early in a fix cycle keeps downstream errors readable.

When to disable it

• You rely on a formatter like prettier or oxfmt to handle whitespace globally. They cover the same ground, and disabling the lint rule removes redundant work.
• Class strings that intentionally use unusual whitespace (very rare — almost always a bug in extractor configuration rather than intent).