Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tim-janik/tw-reorder
Emacs script to run the Tailwind CSS Prettier plugin for class sorting via key binding
https://github.com/tim-janik/tw-reorder
emacs html javascript prettier tailwindcss tailwindcss-prettier
Last synced: 9 days ago
JSON representation
Emacs script to run the Tailwind CSS Prettier plugin for class sorting via key binding
- Host: GitHub
- URL: https://github.com/tim-janik/tw-reorder
- Owner: tim-janik
- License: mpl-2.0
- Created: 2024-03-11T03:04:01.000Z (10 months ago)
- Default Branch: trunk
- Last Pushed: 2024-06-19T00:07:36.000Z (6 months ago)
- Last Synced: 2024-06-20T07:42:16.770Z (6 months ago)
- Topics: emacs, html, javascript, prettier, tailwindcss, tailwindcss-prettier
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS Sorting for Emacs
Emacs script to run the [Tailwind CSS Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) 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:
```sh
npm install # prettier prettier-plugin-tailwindcss
```
- Run the script on any HTML or JavaScript file that contains Tailwind CSS classes, e.g.:
```sh
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](https://www.gnu.org/software/emacs/manual/html_node/elisp/Named-Features.html#index-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](https://github.com/tim-janik/tw-reorder/blob/trunk/LICENSE) license.
## Example
```html
```