Ordenar clases y plugin de Prettier
Instale prettier-plugin-tailwindcss para ordenar automáticamente las clases de utilidad según un orden canónico, mejorar la legibilidad y reducir los conflictos de combinación.
Ordenar clases y plugin de Prettier es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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-tailwindcssConfiguring 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:checkHandling 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.
Preguntas frecuentes
¿La lección «Ordenar clases y plugin de Prettier» es gratis?
Sí — el texto completo de «Ordenar clases y plugin de Prettier» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Ordenar clases y plugin de Prettier»?
Instale prettier-plugin-tailwindcss para ordenar automáticamente las clases de utilidad según un orden canónico, mejorar la legibilidad y reducir los conflictos de combinación. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Ordenar clases y plugin de Prettier»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Auditar la salida CSS
- Ordenar clases y plugin de Prettier
- Analizar Tailwind con ESLint
- Convenciones del equipo y guía de estilo