Automate Tailwind class ordering + tokenize sub-xs text sizes - #2175
Open
maebeale wants to merge 1 commit into
Open
Automate Tailwind class ordering + tokenize sub-xs text sizes#2175maebeale wants to merge 1 commit into
maebeale wants to merge 1 commit into
Conversation
Adopt two Tailwind chaos-prevention practices: automated class ordering (via rustywind, since Prettier's Tailwind plugin can't parse ERB) and semantic design tokens for the tiny font sizes that were scattered as arbitrary text-[…] values. Consolidating them keeps the dense-UI type consistent and adjustable in one place. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
maebeale
marked this pull request as ready for review
August 12, 2026 14:26
Collaborator
Author
|
@jmilljr24 this is in response to the tailwind article. any reservations w adding rustywind? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤖 suggested review level: 3 Read 📖 wide but low-risk — mechanical class reordering + a font-size token rename across 63 view files, plus one dev script and config
Adopts two of the practices from Evil Martians — "5 best practices for preventing chaos in Tailwind CSS": automated class ordering and semantic design tokens for our scattered tiny font sizes.
What & why
prettier-plugin-tailwindcss) can't parse ERB, where ~all our classes live.rustywindis the ERB-native equivalent: it reorders only class-attribute tokens, leaving<%= … %>and markup untouched. Addedai/tw-sort(defaults to files changed vsmainfor gradual convergence;--all/--check) plusnpm run format:classes/lint:classes.text-[10px] / text-[0.6rem] / text-[0.65rem] / text-[0.55rem]with two named@themetokens:text-2xs(0.625rem/10px) andtext-3xs(0.55rem). The ~10px cluster is normalized to 10px (sub-0.5px shift); compiled output isfont-sizeonly, so no line-height change.Notes for reviewer
text-[0.7rem],text-[11px],text-[7px],text-[5px](11 total) left as-is — genuine one-offs / distinct sizes, out of the consolidated cluster.bin/vite buildgreen;.text-2xs{font-size:var(--text-2xs)}/.text-3xs{…}present with no injected line-height.Scorecard — where the codebase stands vs the article's 5 practices
components/buttons.cssextracts.btn*, and CLAUDE.md pushes model presentation into decorators.@themealready has semantic colors; this PR adds the missing tiny-text tokens.ai/tw-sort..btn*variants + CLAUDE.md rules against interpolated classes (static literals + safelist).