Перейти к содержанию
TextArray1.41.0
100% локально

Сортировщик классов Tailwind

Упорядочивает утилиты в атрибутах class/className согласно рекомендуемому порядку Tailwind.

Входные данные
Выходные данные
Связанные инструменты
CSS-форматерИнструменты разработчика
Калькулятор CSS специфичностиновоеИнструменты разработчика
HTML-форматерИнструменты разработчика
i18n ключевая разницаИнструменты разработчика
Конвертер TOML в JSONИнструменты разработчика
SQL в JSONИнструменты разработчика
Сортировщик классов Tailwind
Вставьте HTML или JSX, и этот инструмент переупорядочит классы в каждом атрибуте class и className в соответствии с рекомендуемым порядком Tailwind CSS — тем же порядком категорий, что используется официальным плагином prettier-plugin-tailwindcss: сначала макет и позиционирование, затем flexbox и grid, отступы, размеры, типография, фоны, границы, эффекты и так далее, причем адаптивные и модификаторы состояния (hover:, sm:, dark:) размещаются после базового утилиты, которую они модифицируют. Согласованный порядок делает diff'ы меньше и pull request'ы проще для проверки, поскольку два разработчика, написавших "flex p-4 text-white" и "text-white p-4 flex", получат идентичный результат.
Выберите, обрабатывать ли весь вставленный документ — сканируя каждый найденный атрибут class и className — или рассматривать входные данные как один список классов без всего остального. Не-Tailwind классы (ваши собственные классы компонентов, названия утилит CSS фреймворка, которые этот инструмент не распознает) остаются вместе в начале или конце каждого списка, а не разбросаны по нему. Включите "Удалить дубликаты классов", чтобы исключить точные повторения, и "Предупреждать о взаимоисключающих классах", чтобы отметить пары, такие как p-4 и p-2, или block и hidden, которые переопределяют друг друга при совместном применении — количество отображается в тактовой цифре ниже результата. "Группировать адаптивные варианты вместе" группирует все классы sm:, md: и lg: в конце вместо чередования каждого рядом с его непрефиксным аналогом, что некоторые команды предпочитают для просмотра с первого взгляда.
Классы внутри шаблонного литерала, содержащие выражение JavaScript, такие как className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, по умолчанию остаются нетронутыми, поскольку инструмент не может знать, что переменная отобразит во время выполнения — отключите "Оставить динамические классы не тронутыми", чтобы вместо этого сортировать вокруг них, рассматривая каждое выражение как непрозрачный токен. Выводите модифицированный исходный код, готовый вставить обратно в ваш редактор, или простой отсортированный список, по одному классу в строке.
Все выполняется локально в вашем браузере — HTML, JSX или список классов, которые вы вставляете, никогда не загружаются никуда. Когда закончите, скопируйте результат, загрузите его как файл .txt или отправьте результат обратно на вход для запуска другого инструмента.
FAQ
В какой порядок он сортирует классы?
В тот же рекомендуемый порядок категорий, что и официальный плагин Tailwind prettier: макет, flexbox/grid, отступы, размеры, типография, фоны, границы, эффекты, фильтры, переходы, трансформации и интерактивность, с модификаторами вроде hover: и sm: размещаемыми после базового класса, к которому они применяются.
Работает ли он с JSX и шаблонными литералами, а не только с простым HTML?
Да. Он распознает class="…", className="…" и шаблонные литералы className={`…`}. className, установленный из переменной или вызова функции вроде clsx(…), не может быть безопасно обработан и остается без изменений.
Что считается "пользовательским" классом?
Любой класс, который инструмент не распознает как утилиту Tailwind — ваши собственные классы компонентов или классы из плагина, который этот инструмент не охватывает. Пользовательские классы сохраняют свой относительный порядок и помещаются в начало или конец списка на основе выбранной вами опции.
Как он обнаруживает конфликтующие классы?
Он отмечает распространенные случаи: два класса, устанавливающие одно и то же масштабируемое свойство (например, p-4 и p-2), и взаимоисключающие ключевые слова (например, block и hidden, или text-left и text-right), применяемые с одинаковыми модификаторами. Это не полный linter, но он выявляет классы, которые чаще всего появляются случайно.
Мой код загружается куда-нибудь?
Нет. Сортировка классов полностью выполняется в вашем браузере — HTML, JSX или список классов, которые вы вставляете, никогда не покидают ваше устройство.