airblade / tcs

Tailwind class sorter - sorts the classes in your HTML into Tailwind's recommended class order, without Prettier

tcs - Tailwind Class Sorter

A standalone script which sorts the classes in your markup following Tailwind's recommended class order. It does not require 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 (<p class="...">).
• [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

Intellectual Property

Copyright Andrew Stewart. Released under the MIT licence.