Classes sorteren en de Prettier-plugin
Installeer prettier-plugin-tailwindcss om utility-classes automatisch in een canonieke volgorde te sorteren, de leesbaarheid te verbeteren en mergeconflicten te verminderen.
Classes sorteren en de Prettier-plugin is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Waarom de volgorde van klassen belangrijk is
Wanneer meerdere Tailwind-ontwikkelaars aan hetzelfde project werken, verschijnen hulpprogrammaklassen onvermijdelijk in verschillende volgordes in verschillende bestanden. Hoewel de volgorde van klassen zelden invloed heeft op de weergave, maakt een inconsistente volgorde codebeoordelingen onoverzichtelijk en verschillen moeilijk te lezen. Een consistente canonieke volgorde helpt iedereen de structuur van componenten in één oogopslag te begrijpen.
Kennismaken met prettier-plugin-tailwindcss
prettier-plugin-tailwindcss is de officiële Prettier-plug-in voor Tailwind CSS, onderhouden door het Tailwind-team. De plug-in sorteert hulpprogrammaklassen in je markup automatisch volgens een canonieke volgorde telkens wanneer Prettier een bestand opmaakt. Handmatig werk is niet nodig: sla het bestand gewoon op en de klassen worden opnieuw geordend.
npm install -D prettier prettier-plugin-tailwindcssDe plug-in configureren
Voeg de plug-in na de installatie toe aan je Prettier-configuratiebestand. Voor de meeste projecten werkt de plug-in automatisch zonder extra opties. Als je tailwind.config.js zich op een niet-standaardlocatie bevindt, verwijs je ernaar met de optie tailwindConfig in Prettier.
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}De canonieke sorteervolgorde
De plug-in sorteert klassen volgens de aanbevolen volgorde van Tailwind: eerst layout-hulpprogramma's (weergave, positie, overflow), daarna het boxmodel (breedte, hoogte, opvulling, marge), vervolgens typografie, daarna visuele eigenschappen (achtergrond, rand, schaduw) en ten slotte interactieve statussen en responsieve varianten. Dit weerspiegelt hoe de specificiteit van CSS zich trapsgewijs toepast.
<!-- 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">Prettier uitvoeren op je project
Als je alles hebt geconfigureerd, voer je Prettier uit op al je templates om de sortering in één keer toe te passen. Voeg een format-script toe aan je package.json zodat je dit eenvoudig kunt uitvoeren. Ontwikkelaars moeten dit vóór elke commit uitvoeren, of het nog beter koppelen aan een pre-commit-hook met Husky.
// package.json
{
"scripts": {
"format": "prettier --write \"src/**/*.{html,jsx,tsx,vue}\"",
"format:check": "prettier --check \"src/**/*.{html,jsx,tsx,vue}\""
}
}Integratie met de editor
Configureer je editor voor de beste ontwikkelervaring zodat deze bij het opslaan formatteert. Installeer in VS Code de Prettier-extensie en stel editor.formatOnSave: true in bij je instellingen. Hierdoor worden klassen automatisch gesorteerd wanneer je een bestand opslaat, zodat je markup netjes blijft zonder extra stappen.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}Pre-commit-hook met Husky
Door het formatteren tijdens het committen te automatiseren met Husky en lint-staged, zorg je ervoor dat er nooit ongesorteerde klassen in de repository terechtkomen. Wanneer een ontwikkelaar commit, worden alleen de gestagede bestanden geformatteerd en opnieuw gestaged — een snelle, gerichte bewerking, zelfs in grote projecten.
npm install -D husky lint-staged
npx husky init
// package.json
{
"lint-staged": {
"*.{html,jsx,tsx,vue}": "prettier --write"
}
}Sorteren in JSX- en TSX-bestanden
De plugin verwerkt ook JSX- en TSX-bestanden. Klassen in className-attributen en tekenreeksargumenten van hulpprogramma's zoals clsx en tailwind-merge worden gesorteerd. De plugin gebruikt statische analyse om klassentekenreeksen te vinden, dus dynamisch samengestelde tekenreeksen blijven ongewijzigd — alleen statische tekenreekswaarden worden gesorteerd.
// 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>
);Sorteren in template literals en clsx
De plugin herkent klassentekenreeksen die aan populaire hulpfuncties zoals clsx, cn en tailwind-merge worden doorgegeven wanneer deze met tekenreeksargumenten worden aangeroepen. Hierdoor blijft je voorwaardelijke klassenlogica gesorteerd, ook wanneer die over meerdere argumenten is verdeeld, zodat compositiepatronen overzichtelijk en leesbaar blijven.
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-controle met Prettier Check
Voeg de modus --check van Prettier toe aan je CI-pijplijn, zodat builds mislukken wanneer bestanden ongesorteerde klassen bevatten. Zo wordt zelfs wanneer een ontwikkelaar de pre-commit-hook overslaat, voorkomen dat ongesorteerde code in de hoofdbranch wordt samengevoegd. De controle wordt afgesloten met een statuscode die niet nul is wanneer er formatteringsverschillen worden gevonden.
# .github/workflows/ci.yml
jobs:
format-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npm run format:checkRandgevallen en aangepaste klassen verwerken
De plugin sorteert bekende Tailwind-klassen, maar laat niet-herkende klassen aan het einde staan. Als je aangepaste hulpprogramma's gebruikt die via plugins zijn toegevoegd, configureer je de optie tailwindConfig zodat de plugin ervan op de hoogte is. Aangepaste klassen die de plugin niet kan identificeren, blijven zichtbaar, maar verstoren het sorteren van herkende hulpprogramma's niet.
// .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)' } });
}),
],Korte toets
Toets je begrip van de concepten van Tailwind CSS Mastery uit deze les.
Samenvatting van de les
In deze les heb je geleerd hoe je prettier-plugin-tailwindcss installeert en configureert om het sorteren van klassen te automatiseren, hoe je de plugin integreert met formatteren bij het opslaan in de editor voor een soepele workflow, en hoe je met de controlemodus van Prettier gesorteerde klassen in CI afdwingt. Hierna bekijken we hoe je Tailwind met ESLint kunt linten.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Classes sorteren en de Prettier-plugin” gratis?
Ja — de volledige tekst van “Classes sorteren en de Prettier-plugin” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Classes sorteren en de Prettier-plugin”?
Installeer prettier-plugin-tailwindcss om utility-classes automatisch in een canonieke volgorde te sorteren, de leesbaarheid te verbeteren en mergeconflicten te verminderen. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Classes sorteren en de Prettier-plugin”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Uw CSS-output controleren
- Classes sorteren en de Prettier-plugin
- Tailwind linten met ESLint
- Teamconventies en stijlgids