prettier-plugin-tailwind-css

src="https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-icon-light.png">
src="https://i.pinimg.com/originals/61/f5/e0/61f5e0d554161a814ddc713d3ff9c3fe.png">

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.

$3

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

$3

``html


`html


`
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 |