Prettier Tailwind Plugin

"Make it work, make it right, make it fast"

• Kent Beck

Intro

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

This plugin adds support for the Tailwind CSS library.

How it works

This plugin will sort tailwind classes as headwind does and will also remove duplicates classes.

Actually the plugin works for the following languages:

1. html
2. js
3. jsx
4. ts
5. tsx
6. vue

Input

<div class="mx-auto flex h-16 justify-between items-center max-w-6xl h-16">
  <p>Hello World</p>
</div>

Output

<div class="flex items-center justify-between h-16 max-w-6xl mx-auto">
  <p>Hello World</p>
</div>

Install

Install prettier-plugin-tailwind-css:

npm install --save-dev prettier-plugin-tailwind-css

yarn add -D prettier-plugin-tailwind-css

Configuration

Prettier for Tailwind supports the following options.

Name	Default	Description
removeDuplicatesClasses	true	If set to "true", all duplicate classes found will be deleted
classRegex	./src/regex.json	See file
classSorter	./src/sorter.json	See file