Tailwind CSS Academy · Урок

Сортировка классов и плагин Prettier

«Сортировка классов и плагин Prettier» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Why Class Order Matters

When multiple Tailwind developers work on the same project, utility classes inevitably appear in different orders in different files. While class order rarely affects rendering, inconsistent ordering makes code reviews noisy and diff outputs hard to read. A consistent canonical order helps everyone understand component structure at a glance.

Introducing prettier-plugin-tailwindcss

prettier-plugin-tailwindcss is the official Tailwind CSS Prettier plugin maintained by the Tailwind team. It automatically sorts utility classes in your markup into a canonical order every time Prettier formats a file. No manual effort is needed — just save and the classes reorganize themselves.

npm install -D prettier prettier-plugin-tailwindcss

Configuring the Plugin

After installation, add the plugin to your Prettier configuration file. The plugin works automatically with no extra options required for most projects. If your tailwind.config.js is in a non-standard location, point Prettier to it with the tailwindConfig option.

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

The Canonical Sorting Order

The plugin sorts classes following Tailwind's recommended order: layout utilities first (display, position, overflow), then box model (width, height, padding, margin), then typography, then visual properties (background, border, shadow), and finally interactive states and responsive variants. This reflects how CSS specificity cascades.

<!-- BEFORE sorting -->
<div class="text-white hover:bg-blue-700 p-4 rounded-lg bg-blue-500 flex items-center gap-2">

<!-- AFTER prettier-plugin-tailwindcss sorts -->
<div class="flex items-center gap-2 rounded-lg bg-blue-500 p-4 text-white hover:bg-blue-700">

Running Prettier on Your Project

Once configured, run Prettier across all your template files to apply sorting in bulk. Add a format script to your package.json for easy access. Developers should run this before every commit, or better yet, wire it into a pre-commit hook with Husky.

// package.json
{
  "scripts": {
    "format": "prettier --write \"src/**/*.{html,jsx,tsx,vue}\"",
    "format:check": "prettier --check \"src/**/*.{html,jsx,tsx,vue}\""
  }
}

Editor Integration

For the best developer experience, configure your editor to format on save. In VS Code, install the Prettier extension and set editor.formatOnSave: true in your settings. This means classes sort automatically whenever you save a file, keeping your markup tidy without any extra steps.

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Pre-Commit Hook With Husky

Automating formatting at commit time with Husky and lint-staged ensures no unsorted classes ever enter the repository. When a developer commits, only the staged files are formatted and re-staged — a fast, focused operation even in large projects.

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{html,jsx,tsx,vue}": "prettier --write"
  }
}

Sorting in JSX and TSX Files

The plugin handles JSX and TSX files too, sorting classes inside className attributes and string arguments to utilities like clsx and tailwind-merge. It uses static analysis to find class strings, so dynamically constructed strings are left unchanged — only static string literals are sorted.

// Before
const Button = () => (
  <button className="font-semibold text-white hover:bg-blue-700 rounded bg-blue-500 px-4 py-2">
    Click me
  </button>
);

// After sorting
const Button = () => (
  <button className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-700">
    Click me
  </button>
);

Sorting in Template Literals and clsx

The plugin recognizes class strings passed to popular helpers like clsx, cn, and tailwind-merge when called with string arguments. This means your conditional class logic stays sorted even when spread across multiple arguments, keeping composition patterns clean and readable.

import { clsx } from 'clsx';

// The plugin sorts string arguments inside clsx calls
const classes = clsx(
  'rounded bg-blue-500 px-4 py-2 text-white',
  isActive && 'ring-2 ring-blue-300',
  isDisabled && 'cursor-not-allowed opacity-50'
);

CI Enforcement With Prettier Check

Add Prettier's --check mode to your CI pipeline to fail builds when files contain unsorted classes. This ensures that even if a developer skips the pre-commit hook, unsorted code never merges into main. The check exits with a non-zero status code when formatting differences are found.

# .github/workflows/ci.yml
jobs:
  format-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run format:check

Handling Edge Cases and Custom Classes

The plugin sorts known Tailwind classes but leaves unrecognized class names in place at the end. If you use custom utilities added via plugins, configure the tailwindConfig option so the plugin is aware of them. Custom classes that the plugin cannot identify will still appear but will not break the sort of recognized utilities.

// .prettierrc — point to config so custom utilities are recognized
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

// tailwind.config.js — custom utility plugin
plugins: [
  plugin(({ addUtilities }) => {
    addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px 4px rgba(0,0,0,0.5)' } });
  }),
],

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: installing and configuring prettier-plugin-tailwindcss to automate class sorting, integrating with editor format-on-save for a seamless workflow, and enforcing sorted classes in CI with Prettier's check mode. Next up we explore linting Tailwind with ESLint.

Часто задаваемые вопросы

Урок «Сортировка классов и плагин Prettier» бесплатный?

Да — полный текст урока «Сортировка классов и плагин Prettier» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сортировка классов и плагин Prettier»?

Установите prettier-plugin-tailwindcss для автоматической сортировки утилитарных классов в общепринятом порядке, улучшая читаемость и уменьшая число конфликтов при слиянии. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?

Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Сортировка классов и плагин Prettier»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?

Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Проверка результата работы CSS
Сортировка классов и плагин Prettier
Проверка Tailwind с помощью ESLint
Соглашения команды и руководство по стилю

← Назад к Tailwind CSS Academy