https://github.com/tqwewe/prettier-plugin-tailwind

Sort tailwind classes in HTML with Prettier.
https://github.com/tqwewe/prettier-plugin-tailwind

html prettier prettier-plugin sort-tailwind sorter tailwind vscode

Last synced: 1 day ago
JSON representation

Sort tailwind classes in HTML with Prettier.

• Host: GitHub
• URL: https://github.com/tqwewe/prettier-plugin-tailwind
• Owner: tqwewe
• License: mit
• Created: 2020-01-27T16:59:02.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-07T20:58:38.000Z (over 1 year ago)
• Last Synced: 2025-01-12T12:17:18.446Z (9 days ago)
• Topics: html, prettier, prettier-plugin, sort-tailwind, sorter, tailwind, vscode
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/prettier-plugin-tailwind
• Size: 156 KB
• Stars: 429
• Watchers: 4
• Forks: 25
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
| ⚠️ WARNING: this package is no longer maintained. ⚠️ |

| --- |

| Please use the official [`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) package instead. |

It was a pleasure developing this package and I hope it served you all well (:

---

[![npm version](https://badge.fury.io/js/prettier-plugin-tailwind.svg)](https://badge.fury.io/js/prettier-plugin-tailwind)



  



Prettier Plugin Tailwind




	Sort tailwind classes with Prettier.






Supports

- HTML

- CSS (@apply directive)

- ReactJS (JSX, TSX)

- VueJS

- [twin.macro](https://github.com/ben-rogerson/twin.macro)

**Go from this:**

```html



	...



```


**To this:**

```html



	...



```


This plugin reads your `tailwind.config.js` to sort tailwind classes in your project.

## Installation VSCode

Install Prettier and the plugin into your project locally:

```bash

yarn add --dev prettier prettier-plugin-tailwind

```

**Other IDE's are supported.**

Note: Prettier 2.0.0 or greater is required as a peer dependency.

## Prettier Options

These options can be set in your `.prettierrc` file to change the behavious of this plugin.

- [**`twConfig`**](OPTIONS.md#twconfig) - Path to tailwind config relative to the root of the project.

- [**`twPluginsOrder`**](OPTIONS.md#twpluginsorder) - Comma separated order of tailwind plugins to sort classes by.

- [**`twClassesPosition`**](OPTIONS.md#twclassesposition) - Position of component and utility classes.

- [**`twUnknownClassesPosition`**](OPTIONS.md#twunknownclassesposition) - Position of unknown classes.

- [**`twJsxClassAttributes`**](OPTIONS.md#twjsxclassattributes) - Comma separated list of JSX attributes to sort tailwind classes in.

- [**`twSortFunctions`**](OPTIONS.md#twsortfunctions) - Comma separated list of function names to sort classes in arguments.

More details can be found in [OPTIONS.md](OPTIONS.md)

## Contributing 🙌

Contributions are more than welcome. If you see any changes fit, go ahead and open an issue or PR.

---

Any support is a huge motivation, thank you very much!