Skip to content

feat: add Tailwind class name sorting (#552)#795

Open
todor-a wants to merge 2 commits into
dprint:mainfrom
todor-a:issue-552-tailwind-class-sorting
Open

feat: add Tailwind class name sorting (#552)#795
todor-a wants to merge 2 commits into
dprint:mainfrom
todor-a:issue-552-tailwind-class-sorting

Conversation

@todor-a
Copy link
Copy Markdown
Contributor

@todor-a todor-a commented May 28, 2026

Fixes #552. Adds opt-in Tailwind class sorting aligned with prettier-plugin-tailwindcss.

Problem

Tailwind users often rely on Prettier's Tailwind plugin to keep utility classes in a stable recommended order.

const value = <div className="p-4 flex bg-red-500 text-white" />;

Currently dprint-plugin-typescript preserves the input order, so projects that use dprint cannot opt into that Tailwind ordering for JSX class attributes or common class helper calls.

Fix

Add jsx.sortClassNames with a new tailwind value. The default remains maintain.

When enabled, the formatter sorts Tailwind class lists in:

  • JSX class and className string attributes
  • string literals, object keys, and simple template literals inside className={...} expression containers
  • configured helper calls via jsx.sortClassNames.functions, for example cn, classnames, or tw
  • configured tagged template literals via the same function list

The sorter follows the same broad behavior as prettier-plugin-tailwindcss for the covered cases: custom classes stay first, whitespace is collapsed, duplicate classes are removed, and variants sort after base utilities.

Behavior

input config after
<div className="p-4 flex" /> default unchanged
<div className="p-4 flex" /> jsx.sortClassNames: tailwind <div className="flex p-4" />
className={cn("p-4 flex")} jsx.sortClassNames: tailwind string inside expression sorted
cn("p-4 flex") jsx.sortClassNames.functions: ["cn"] cn("flex p-4")
tw`p-4 flex` jsx.sortClassNames.functions: ["tw"] tw`flex p-4`

Spec and docs updates

New JSX attribute specs cover:

  • default no-op behavior
  • Tailwind ordering for class and className
  • public prettier-plugin-tailwindcss examples
  • custom class ordering
  • whitespace collapse and duplicate removal
  • className={...} expression containers
  • configured function calls and tagged templates

Docs updates cover:

  • README configuration example
  • generated schema descriptions for jsx.sortClassNames and jsx.sortClassNames.functions

Cross-referenced against prettier-plugin-tailwindcss docs/source and Oxc's Tailwind sorting tests.

cargo test passes.

@todor-a todor-a changed the title [codex] Add Tailwind class name sorting feat: add Tailwind class name sorting (#552) May 28, 2026
@todor-a todor-a marked this pull request as ready for review May 28, 2026 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tailwind class sorting

1 participant