https://github.com/airblade/tcs
Tailwind class sorter - sorts the classes in your HTML into Tailwind's recommended class order, without Prettier
https://github.com/airblade/tcs
tailwindcss
Last synced: 4 days ago
JSON representation
Tailwind class sorter - sorts the classes in your HTML into Tailwind's recommended class order, without Prettier
- Host: GitHub
- URL: https://github.com/airblade/tcs
- Owner: airblade
- License: mit
- Created: 2023-01-25T11:13:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-20T12:58:54.000Z (over 2 years ago)
- Last Synced: 2025-02-26T18:57:04.061Z (7 months ago)
- Topics: tailwindcss
- Language: Ruby
- Homepage:
- Size: 34.2 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
# tcs - Tailwind Class Sorter
A standalone script which sorts the classes in your markup following Tailwind's [recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted). It does not require [Prettier](https://tailwindcss.com/docs/editor-setup#automatic-class-sorting-with-prettier).
You can run it on the command line or integrate it with your text editor.
## Features
- It sorts the classes in your markup according to Tailwind's recommended order.
- It leaves the rest of your markup alone.
- It does not require Prettier.
- Supports HTML class attributes (`class="..."`) and Ruby/Rails hashes (`class: "..."`).
## Constraints
- Your class names have to be enclosed with double- (not single-) quotation marks (`
`).
- [Slim] You have to use `class="foo bar"` rather than the `.foo.bar` class shortcut.
## Installation
Requires Ruby.
Copy the `tcs` script onto your PATH and make sure it is executable (e.g. `chmod +x tcs`).
## Usage
```
tcs CSS_FILE HTML_FILE # updates HTML_FILE
tcs CSS_FILE < HTML_FILE # writes HTML to stdout
```
Unknown classes are written to stderr.
The first argument is the CSS file generated by Tailwind (not the one with the `@tailwind` directives).
Either give the HTML file as the second argument, which will update it in place; or feed the source HTML into stdin, which will write the updated HTML to stdout.
## Examples
Write the processed HTML to the console:
```
tcs css/tailwind.css < index.html
```
Write the processed HTML to the source file:
```
tcs css/tailwind.css < index.html > index.html
```
Dry run: see what `tcs` does, without updating your HTML:
```
tcs css/tailwind.css < index.html | git diff --no-index index.html -
```
Find any classes not known by Tailwind:
```
tcs css/tailwind.css < index.html > /dev/null
```
Update your HTML file directly:
```
tcs css/tailwind.css index.html
```
## Text editor integrations
- Vim: [vim-tcs](https://github.com/airblade/vim-tcs)
## Intellectual Property
Copyright Andrew Stewart. Released under the MIT licence.