explaingit

tailwindlabs/prettier-plugin-tailwindcss

★ 7,080TypeScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

A Prettier plugin that automatically sorts your Tailwind CSS class names into a consistent order every time you format your code, no manual effort required.

Mindmap

mindmap
  root((prettier-plugin-tailwindcss))
    What it does
      Sorts Tailwind classes
      Consistent order
      Auto on format
    Tech Stack
      TypeScript
      Prettier
      Tailwind CSS
    Configuration
      Custom attributes
      Function calls
      Template literals
    Setup
      Install plugin
      One config line
      Point to Tailwind config
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add automatic Tailwind class sorting to any project that already uses Prettier as its code formatter.

USE CASE 2

Sort Tailwind classes inside custom attribute names or helper function calls like clsx() and cn().

USE CASE 3

Use the exported public API to sort Tailwind class strings programmatically in custom build scripts.

Tech stack

TypeScriptPrettierTailwind CSS

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

This is a plugin for Prettier, a code formatting tool, that automatically sorts Tailwind CSS class names. Tailwind CSS is a system where you style web pages by adding short class names directly to HTML elements. When a file has many of these classes, they can appear in any order, making code harder to read. This plugin puts them in a consistent order every time you format your code. Setup requires installing the plugin alongside Prettier and adding one line to your Prettier configuration file. After that, whenever you run the formatter, all your Tailwind classes are reordered automatically without any manual effort. By default the plugin sorts classes found in standard HTML attributes and common framework equivalents. You can extend this to custom attribute names through a configuration option. You can also tell the plugin to sort classes inside function calls, which is useful if you use helper libraries that combine class names conditionally. Tagged template literals (a JavaScript string syntax) are also supported. The plugin works with both Tailwind CSS v3 (which uses a JavaScript configuration file) and Tailwind CSS v4 (which uses a CSS file as the entry point). You point the plugin to your Tailwind config or stylesheet, and it uses that to understand your project's custom classes and theme settings when deciding sort order. For developers who want the sorting logic outside of Prettier, the package also exports a public API that can sort class strings or class arrays directly in custom scripts.

Copy-paste prompts

Prompt 1
Set up prettier-plugin-tailwindcss in my Next.js project and show me the exact Prettier config changes needed to activate it.
Prompt 2
How do I configure prettier-plugin-tailwindcss to sort classes inside my custom clsx() function calls?
Prompt 3
My project uses Tailwind CSS v4 with a CSS entry point instead of a JS config file, how do I point prettier-plugin-tailwindcss to it?
Prompt 4
Show me how to use the prettier-plugin-tailwindcss public API to sort a Tailwind class string in a Node.js script without running Prettier.
Open on GitHub → Explain another repo

← tailwindlabs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.