tim-janik / tw-reorder

Emacs script to run the Tailwind CSS Prettier plugin for class sorting via key binding

Tailwind CSS Sorting for Emacs

Emacs script to run the Tailwind CSS Prettier plugin for class sorting via key binding.

The logic is split into two files:

• tw-reorder.js - NodeJS script to reorder Tailwind CSS classes in class="..." or @apply...; strings using Prettier. The script searches for class(Name)?="tailwindclasses..." assignments in the input via regular expressions and invokes prettier-plugin-tailwindcss to sort these snippets. No other contents are modified.
• tw-reorder.el - Emacs Lisp script to run tw-reorder.js on the current buffer via key binding

Usage

1. tw-reorder.js:
   • Install prettier-plugin-tailwindcss and its dependencies:

     npm install	# prettier prettier-plugin-tailwindcss

   • Run the script on any HTML or JavaScript file that contains Tailwind CSS classes, e.g.:

     node tw-reorder.js index.html            # reorder classes in index.html, write to stdout
     node tw-reorder.js -b component.js       # ignore assignment whitespacs in: className = "..."
     node tw-reorder.js --inplace index.html  # reorder and write the result back into index.html

2. tw-reorder.el:
   • To add support to emacs, execute (load-file "tw-reorder.el") in emacs or use require. This defines a function that pastes the current buffer contents into the command node tw-reorder.js -b and replaces the current buffer contents with the result.
   • Open a file containing Tailwind CSS classes in Emacs, e.g. an HTML or JavaScript file.
   • Press F8 to reformat and sort the Tailwind CSS classes in the current buffer.
   • The key binding can be modified by changing the global-set-key command in tw-reorder.el.

License

This project is licensed under the MPL-2.0 license.

Example

<!-- Before: -->
<div class="flex-col bg-gray-100 text-gray-900 flex rounded-lg justify-center shadow-md items-center py-8 mt-4 px-6 lg:w-1/2 w-full max-w-xl"></div>
<!-- After: -->
<div class="mt-4 flex w-full max-w-xl flex-col items-center justify-center rounded-lg bg-gray-100 px-6 py-8 text-gray-900 shadow-md lg:w-1/2"></div>