skills.rest
tnunamak
tnunamakCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-sort

Sort Tailwind CSS class lists in JSX className and CVA base strings.

Updated Mar 22, 2018
Search Tags:#readability#code style#jsx#tailwindcss#cva#class sorting
One-click install
npx skills add https://github.com/tnunamak/dotfiles --skill tailwind-sort
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-sort
Source: https://github.com/tnunamak/dotfiles/tree/main/ai/skills/local/tailwind-sort
Command: npx skills add https://github.com/tnunamak/dotfiles --skill tailwind-sort

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind class lists become hard to scan and maintain, especially when they grow long or are reused across components.

Core Features & Use Cases

  • Sort long Tailwind class lists for legibility: Reorders Tailwind class names on a single JSX element when there are many static classes.
  • Group classes when extracting styles: Supports clearer “style contract” documentation when classes are stored in constants or used as CVA bases.
  • Avoid unnecessary cn wrappers: Keeps your code clean by only suggesting cn(...) when grouping is warranted for 8+ static classes or when conditional merging is truly needed.

Quick Start

Ask the AI to refactor the Tailwind classes in your JSX element (or CVA base) by sorting them for readability and adding group comments only when the class list is long enough or extracted into a reusable constant.

Frequently Asked Questions about tailwind-sort

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sort Tailwind CSS classes in JSX for better readability?▼

You can sort Tailwind CSS classes in JSX by refactoring long static className values into logical groups. This Skill reorders class names to improve legibility and only applies grouping rules when there are 8+ classes, leaving short strings untouched.

When should I group Tailwind classes using cn or cx wrappers?▼

Use cn or cx wrappers to group Tailwind classes only when you have 8+ static classes or need conditional merging. This prevents unnecessary wrapper usage and keeps code clean by preserving correct cn and cx syntax.

Does this tool work with CVA base strings and extracted style constants?▼

Yes, it sorts Tailwind classes within CVA base strings and arrays, including extracted constants for shared component styles. This improves style contract documentation and reduces maintenance friction for reused static class strings.

What is the best way to maintain consistent Tailwind class order across shared components?▼

To maintain consistent Tailwind class order, sort static class lists when extracting styles into reusable constants or CVA bases. This standardizes the style contract across shared components and reduces maintenance friction for long strings.

Why does my Tailwind class list not get reformatted when it is short?▼

Short Tailwind class lists are not reformatted because they do not benefit from grouping. The tool only applies grouping rules to long static strings with 8+ classes, avoiding unnecessary code churn and keeping short strings clean.

Related Skills

Explore More Design & Creative Skills→
nkabbarankabbara

canonicalize-tailwind

Normalize Tailwind CSS class lists by removing duplicates and sorting classes.

Community
Intermediate
walid-moswalid-mos
2

tailwind

Enforce Tailwind CSS utility class standards with cva and cn().

Community
Basic
moughamirmoughamir

tailwindcss-advanced-components

Standardize Tailwind UI components with CVA variants and data-attribute states.

Community
Intermediate
shawn-sandyshawn-sandy

css-to-class

Convert multi-class HTML strings into a single semantic CSS class.

Community
Intermediate