tqwewe / prettier-plugin-tailwind

Sort tailwind classes in HTML with Prettier.

Home Page:https://www.npmjs.com/package/prettier-plugin-tailwind

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

⚠️ WARNING: this package is no longer maintained. ⚠️
Please use the official prettier-plugin-tailwindcss package instead.

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


npm version

Prettier Plugin Tailwind

Sort tailwind classes with Prettier.

Supports

  • HTML
  • CSS (@apply directive)
  • ReactJS (JSX, TSX)
  • VueJS
  • twin.macro

Go from this:

<div class="z-50 z-10 container  text-left md:text-center justify-center">
	...
</div>

To this:

<div class="container justify-center text-left z-10 z-50 md:text-center">
	...
</div>

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:

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.

More details can be found in 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!

Buy Me A Coffee

About

Sort tailwind classes in HTML with Prettier.

https://www.npmjs.com/package/prettier-plugin-tailwind

License:MIT License


Languages

Language:TypeScript 57.7%Language:JavaScript 42.3%