A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
by tailwindlabsLast 12 weeks · 21 commits
2 of 6 standards met
What version of are you using? v0.7.2 What version of Tailwind CSS are you using? v4.2.0 What version of Node.js are you using? v22.20.0 What package manager are you using? npm What operating system are you using? macOS Reproduction URL https://github.com/alexschcom/prettier-plugin-tw-demo Describe your issue** → `` class list should change to
Repository: tailwindlabs/prettier-plugin-tailwindcss. Description: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. Stars: 7021, Forks: 174. Primary language: TypeScript. Languages: TypeScript (97.6%), JavaScript (2.4%). License: MIT. Latest release: v0.7.2 (2mo ago). Open PRs: 2, open issues: 5. Last activity: 2w ago. Community health: 50%. Top contributors: thecrypticace, bradlc, reinink, Dunqing, adamwathan, Boshen, RobinMalfait, akx, AngusMorton, AlexanderOpran and others.
TypeScript
What version of are you using? 0.6.9 What version of Tailwind CSS are you using? 3.4.1 What version of Node.js are you using? 22.21.1 What package manager are you using? pnpm What operating system are you using? macOS Reproduction URL https://github.com/danteissaias/prettier-plugin-tailwindcss-bug-repro Describe your issue** Given the following code: The classes are already properly sorted. However, when formatting with , the character inside is removed. This results in the following code: Expected behavior: Prettier should not remove the newline character.
Continue work on https://github.com/tailwindlabs/prettier-plugin-tailwindcss/tree/feat/public-api close: #430 Some differences from #430 1. Export sorting APIs to , which is a more descriptive entry point 2. Removed , I found this is useless, it is only used to log a warning, I think log is okay. 3. Minor API modification Extra Optimization https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/438/commits/843a4dc603c32b1b2ca19c538578743971c54b73 made an optimization to avoid unnecessary resolution of the Prettier configuration, which is quite expensive! I think the following benchmark is at least half as fast due to this optimization because this repo has no Tailwind configuration set. Benchmark Note: means the current branch, means the latest package in npm, so it includes a few optimizations that have already been merged into the main branch, not all in this branch. Benchmark repo: https://github.com/dubinc/dub Benchmark repo: https://github.com/tailwindcsslab/headlessui
An error occurred when I formatted the code (apps\web\index.html) using this plugin, the error is RangeError: Maximum call stack size exceeded. Here is a link to a minimized project that can be run directly: [prettier-plugin-tailwindcss-format-demo]. It works fine when I downgrade to a lower version (such as 0.6.14).