Important

This plugin is a community project and is NOT officially supported by Tailwind Labs.

tailwind-autosort.nvim

Format tailwind classes without prettier-plugin-tailwindcss in class, className, cn, cva, clsx and twMerge

Previews

Sort & Trim in className

class.mp4

Sort & Trim in cva

cva.mp4

Sort & Trim in cn

cn.mp4

Dedupe classes

dedupe.mp4

Motivation

This project is originated, inspired and copied (yes, i copied) some of the functionality from tailwind-tools.nvim. Please please please support the actual creator instead.

In my workflow, I use Prettier and Biome differently across various projects. Sometimes, I don’t use either. However, I still want the capability to sort classes, regardless of the project's formatting setup.

For Prettier, there is prettier-plugin-tailwindcss.
For Biome, there is useSortedClass (still a work in progress).

This project provides a way to achieve similar class sorting functionality.

At the moment I do not need the full suite of tailwind-tools but just class sorting. This project extends sorting capabilities to work with cn, cva, clsx and twMerge, with sort & save functionality, and dedupe repeated classes.

Features
Prerequisites
Installation
Configuration
Commands
Related projects
Contributing

Features

The plugin works with tsx treesitter grammars and provides the following features:

Technically this should work with any other html inherited languages, but need to include relevant treesitter .scm files for it to work. For now, i am using tsx, so it will work with tsx only. Feel free to contribute for more treesitter .scm matching for various filetype like astro, vue, ...

Class sorting (without prettier-plugin)
Autosave after sorting
Trim leading spaces
Trim intermediate spaces within class string
Works with className, cn, cva, clsx and twMerge within single repo or monorepo
Works with tenary conditions within className, cn, clsx, twMerge
Dedupe repeated classes

Note

Language services like autocompletion, diagnostics and hover are already provided by tailwindcss-language-server.

Prerequisites

Neovim v0.9 or higher (v0.10 is recommended)
tailwindcss-language-server >= v0.0.14 (can be installed using Mason)
tsx and your other languages treesitter grammars (using nvim-treesitter)
ripgrep to find prettier-plugin-tailwindcss in tailwind config

Tip

If you are not familiar with neovim LSP ecosystem check out nvim-lspconfig to learn how to setup the LSP.

Installation

Using lazy.nvim:

-- tailwind-autosort.lua
return {
    "y3owk1n/tailwind-autosort.nvim",
    dependencies = { "nvim-treesitter/nvim-treesitter" },
    opts = {} -- your configuration
}

If you are using other package managers you need to call setup:

require("tailwind-autosort").setup({
  -- your configuration
})

Configuration

Here is the default configuration:

---@type TailwindAutoSort.Option
{
    autosort_on_save = {
        enabled = true, -- You can toggle this later with :TailwindSortEnable or :TailwindSortDisable
        notify_after_save = true -- To notify after save
    },
}

Commands

Available commands:

TailwindAutoSortRun: sorts all classes in the current buffer without saving.
TailwindAutoSortGetState: get the current autosave state.
TailwindAutoSortEnable: enable autosave after sorting.
TailwindAutoSortDisable: disable autosave after sorting.
TailwindAutoSortResetCache: reset the cache that saves tailwind config path and has prettier-plugin-tailwindcss, useful when you want to change project without re-opening neovim.

Related projects

Here are some related projects:

tailwindcss-intellisense (official vscode extension)
tailwind-sorter.nvim (uses external scripts)
tailwind-tools.nvim (the one that i copied some code from)

Contributing

Read the documentation carefully before submitting any issue.

Feature and pull requests are welcome.

y3owk1n/tailwind-autosort.nvim