Tailwind CSS Academy · 课时

类名排序与 Prettier 插件

安装 prettier-plugin-tailwindcss，自动按照规范顺序排列工具类，提高可读性并减少合并冲突。

类名排序与 Prettier 插件 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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 插件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。

「类名排序与 Prettier 插件」这节课中我会学到什么？

安装 prettier-plugin-tailwindcss，自动按照规范顺序排列工具类，提高可读性并减少合并冲突。你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Tailwind CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「类名排序与 Prettier 插件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？

能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Tailwind CSS Academy