oxlint-tailwindcss — плагин
27 правил oxlint для Tailwind CSS v4 плюс скилл и плагин Claude Code: опечатки в классах, конфликты и устаревшие утилиты.
- 108 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Правила читают ваш код и CSS и только сообщают о находках, автоисправления вносят правки в файлы.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/oxlint-tailwindcssОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Правила читают ваш код и CSS и только сообщают о находках, автоисправления вносят правки в файлы.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Набор из 27 правил линтера oxlint для Tailwind CSS v4: он ловит неизвестные классы и называет верный вариант (для `itms-center` это `items-center`), конфликтующие утилиты вроде `text-red-500` и `text-blue-500`, устаревшие классы (вместо `flex-grow` нужен `grow`) и сортирует классы так же, как oxfmt и prettier-plugin-tailwindcss. Правила читают вашу реальную дизайн-систему: токены `@theme`, переменные shadcn и плагины вроде `@tailwindcss/typography`. Для агентов в репозитории лежат скилл `oxlint-tailwindcss`, который ставится командой `npx skills add`, и плагин Claude Code. Плагин показывает диагностику, пока Claude правит файлы, и проверяет затронутые файлы перед завершением. Результаты детерминированы: одинаковый вход дает одинаковый вывод на любой машине и в CI.
Для кого. Фронтенд-разработчикам на Tailwind v4 с oxlint, которые хотят одинаковой проверки классов у людей, агентов и в CI.
Подходит, если
- Агент пишет разметку на Tailwind, а опечатки в классах ловятся только в браузере.
- В строке классов оказались конфликтующие утилиты, и одна перекрывает другую.
- Код переходит на v4, и устаревшие классы вроде `flex-grow` нужно найти автоматически.
- Сортировка классов должна совпадать с oxfmt и Prettier.
Не подходит, если
- Проект на Tailwind v3 или более раннем релизе v4: нужен Tailwind v4.1.15 и новее.
- Линтером служит ESLint без oxlint.
- Классы строятся динамически из переменных, а правило `no-dynamic-classes` для этого слишком строгое.
Пример запроса к агенту
Проверь компоненты в src на конфликтующие и устаревшие классы Tailwind и исправь найденное.Ограничения
Нужен Tailwind CSS v4.1.15 и новее: в более ранних выпусках нет интерфейса дизайн-системы, на который опираются правила. Нужно указать входной CSS-файл в `.oxlintrc.json`, иначе вместо молчаливого пропуска правил выдается диагностика `designSystemUnavailable` с подсказкой. В файлах `.vue`, `.svelte` и `.astro` oxlint передает плагинам только блоки `<script>`, подробности на странице про фреймворки. Для монорепозитория нужна общая конфигурация с сопоставлением путей и CSS или отдельный файл на пакет. Плагин проверяет только классы и не заменяет форматтер.
Как отключить. Уберите `oxlint-tailwindcss` из `jsPlugins` в `.oxlintrc.json` и удалите пакет, затем отключите плагин через `/plugin`.
Частые вопросы
Как поставить правила в проект?
Выполните `pnpm add -D oxlint-tailwindcss`, добавьте `oxlint-tailwindcss` в `jsPlugins` в `.oxlintrc.json` и укажите свой входной CSS-файл Tailwind.
Как поставить скилл для агента?
Командой `npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss`. Он подходит любому агенту, который читает формат скиллов.
Как поставить плагин в Claude Code?
Выполните `/plugin marketplace add sergioazoc/oxlint-tailwindcss`, затем `/plugin install oxlint-tailwindcss@oxlint-tailwindcss`.
Какие категории у правил?
Четыре категории, включая корректность (`no-unknown-classes`, `no-conflicting-classes`) и модернизацию (`no-deprecated-classes`, `enforce-canonical`). У каждого правила есть страница с примерами.
Что будет при неверной настройке?
Появится одна диагностика `designSystemUnavailable` с подсказкой. Правила не пропускаются молча. Опечатка в настройке называется вместе с верным вариантом.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныСкилл правит интерфейс в живом коде без лишних зависимостей: компоненты, секции, страницы и RTL с арабским под ваш стек
Tailwind CSS Shades — палитры Tailwind и MCP
Tailwind CSS Shades
Палитра Tailwind от 50 до 950 из любого цвета: расширение для VS Code, CLI и MCP-сервер, чтобы агенты не гадали оттенки
Скилл дает агенту подборку современных приемов CSS: одно правило вместо набора брейкпоинтов и CSS-возможность прежде скрипта.
Скиллы Preline UI для агентов: сборка интерфейсов из компонентов Tailwind CSS и генерация тем по токенам
Проверка по 147 правилам дизайна: находит признаки ИИ-интерфейса, чинит механические и передает остальное скиллу агента
Swiss Design Skill
swiss-design-skill
Скилл задает агенту швейцарский стиль на Tailwind: сетка из 12 колонок, IBM Plex Sans, один акцент и много воздуха.
Коротко о README
Плагин oxlint читает дизайн-систему Tailwind v4 и проверяет строки классов, а скилл и плагин Claude Code включают эту проверку в работу агента.