git404hub

what is prettier-plugin-tailwindcss fr?

tailwindlabs/prettier-plugin-tailwindcss — explained in plain English

Analysis updated 2026-06-22

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

tl;dr

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.

vibe map

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

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

what do people make with this?

VIBE 1

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

VIBE 2

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

VIBE 3

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

what's the stack?

TypeScriptPrettierTailwind CSS

how it stacks up fr

tailwindlabs/prettier-plugin-tailwindcssixartz/saas-boilerplatekulshekhar/ts-jest
Stars7,0807,0787,077
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity1/53/52/5
Audiencedevelopervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 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.

prompts (copy fr)

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.

Frequently asked questions

what is prettier-plugin-tailwindcss fr?

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.

What language is prettier-plugin-tailwindcss written in?

Mainly TypeScript. The stack also includes TypeScript, Prettier, Tailwind CSS.

How hard is prettier-plugin-tailwindcss to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is prettier-plugin-tailwindcss for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.