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

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.

✨ 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)
• 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",
 version = "*", -- remove this if you want to follow `main` branch
 event = "VeryLazy",
 dependencies = { "nvim-treesitter/nvim-treesitter" },
 ---@type TailwindAutoSort.Config
 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:

---@class TailwindAutoSort.Config
---@field enable_autocmd? boolean
---@field notify_line_changed? boolean
{
 -- enabling autocommand will let tailwind-autosort to update the text at 'BufWritePre'
 -- If your editor does format on save after write, it should work together
 enable_autocmd = true,
 -- This option will notify you number of lines that is affected via vim.notify
 notify_line_changed = true,
}

🚀 Commands

Available commands:

• TailwindAutoSortRun: sorts all classes in the current buffer without saving.
• 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

🤝 Contributing

Read the documentation carefully before submitting any issue.

Feature and pull requests are welcome.