rustywind

A CLI tool for sorting Tailwind CSS class names into a consistent canonical order — like Prettier's Tailwind plugin but as a standalone binary.

rustywind is a command-line tool for sorting Tailwind CSS class names into the canonical order recommended by the Tailwind team. It does the same job as the official Prettier Tailwind plugin, but as a standalone binary that works with any file format and integrates into any workflow — no Node.js or Prettier required.

Features

  • Canonical ordering — sorts classes into the same order as the official Prettier plugin, following Tailwind's recommended convention
  • Multi-file support — process a single file, a directory tree, or a glob pattern in one command
  • Format agnostic — works with HTML, JSX, TSX, Vue, Svelte, and any other file format that contains Tailwind class strings
  • Check mode — exit with a non-zero code if any files are unsorted, without modifying them — ideal for CI
  • Dry run — preview what would change without writing anything
  • Fast — a native Rust binary with no Node.js startup overhead

Installation

cargo install rustywind

Or download a pre-built binary from the releases page.

Via npm (if you prefer installing alongside your JS tooling):

npm install -g rustywind
# Debian / Ubuntu / Fedora
# No official apt or dnf package is available.
# Use cargo install or npm install -g rustywind — both work on all Linux distributions.

Usage

# Sort classes in a single file (in-place)
rustywind --write src/index.html

# Sort all files in a directory recursively
rustywind --write src/

# Check if any files have unsorted classes (for CI)
rustywind --check-formatted src/

# Dry run — show what would change without writing
rustywind --dry-run src/

# Process specific file types only
rustywind --write --only-files "*.tsx" src/

# Sort a single file and print to stdout
rustywind src/index.html

CI Integration

Add a formatting check to your GitHub Actions workflow:

- name: Check Tailwind class ordering
  run: rustywind --check-formatted src/

Or as a pre-commit hook:

# .pre-commit-config.yaml
repos:
  - repo: https://github.com/avencera/rustywind
    rev: v0.21.0
    hooks:
      - id: rustywind
        args: [--write]

Example

Before:

<div
  class="text-white flex p-4 bg-blue-500 rounded-lg items-center justify-between font-bold"
></div>

After:

<div
  class="flex items-center justify-between rounded-lg bg-blue-500 p-4 font-bold text-white"
></div>

The ordering follows Tailwind's convention: layout properties first, then box model, then typography, then colours — making class lists predictable and easier to scan across a codebase.

Why not just use the Prettier plugin?

If your project already uses Prettier, the official Prettier Tailwind plugin is the natural choice. rustywind is the better option when:

  • You don't use Prettier (perhaps you use dprint or biome)
  • You want a fast, dependency-free binary in a CI environment without a Node.js install
  • You need to process non-JavaScript files (plain HTML templates, Django/Jinja templates, etc.) that Prettier doesn't handle well