Перейти до вмісту
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:) розташовуються після базової утиліти, яку вони модифікують. Послідовний порядок робить дифи меншими та 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), застосовані з однаковими модифікаторами. Це не вичерпний лінтер, але він виявляє класи, які найчастіше з'являються випадково.
Мій код завантажується кудись?
Ні. Сортування класів повністю виконується у вашому браузері — HTML, JSX або список класів, які ви вставляєте, ніколи не залишають вашого пристрою.