Tailwind CSS Academy · Lektion

Klassortering och Prettier-plugin

Installera prettier-plugin-tailwindcss för att automatiskt sortera verktygsklasser i en kanonisk ordning, vilket förbättrar läsbarheten och minskar mergekonflikter.

Lektion 2 av 413 steg

Klassortering och Prettier-plugin är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.

Varför klassordningen spelar roll

När flera Tailwind-utvecklare arbetar i samma projekt förekommer verktygsklasser oundvikligen i olika ordning i olika filer. Även om klassordningen sällan påverkar renderingen gör en inkonsekvent ordning kodgranskningar röriga och diffar svårlästa. En konsekvent kanonisk ordning hjälper alla att snabbt förstå komponentens struktur.

Introduktion till prettier-plugin-tailwindcss

prettier-plugin-tailwindcss är det officiella Tailwind CSS-plugin-programmet för Prettier, som underhålls av Tailwind-teamet. Det sorterar automatiskt verktygsklasserna i er markup enligt en kanonisk ordning varje gång Prettier formaterar en fil. Ingen manuell insats behövs — spara bara filen så ordnas klasserna om automatiskt.

npm install -D prettier prettier-plugin-tailwindcss

Konfigurera plugin-programmet

Efter installationen lägger Ni till plugin-programmet i Prettiers konfigurationsfil. Plugin-programmet fungerar automatiskt utan extra alternativ i de flesta projekt. Om tailwind.config.js finns på en plats som avviker från standarden anger Ni sökvägen till den i Prettier med alternativet tailwindConfig.

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

Den kanoniska sorteringsordningen

Plugin-programmet sorterar klasser enligt Tailwinds rekommenderade ordning: layout-verktyg först (display, position, overflow), sedan boxmodell (bredd, höjd, padding, marginal), därefter typografi, sedan visuella egenskaper (bakgrund, kantlinje, skugga) och slutligen interaktiva tillstånd och responsiva varianter. Detta återspeglar hur CSS-specificitet kaskaderar.

<!-- 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">

Kör Prettier på projektet

När allt är konfigurerat kör ni Prettier på alla mallfiler för att tillämpa sorteringen i bulk. Lägg till ett format-skript i package.json för enkel åtkomst. Utvecklare bör köra detta före varje commit, eller ännu hellre koppla det till en pre-commit-hook med Husky.

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

Integration med redigeraren

För bästa utvecklarupplevelse konfigurerar ni redigeraren så att den formaterar vid sparning. I VS Code installerar ni Prettier-tillägget och anger editor.formatOnSave: true i inställningarna. Det innebär att klasser sorteras automatiskt varje gång ni sparar en fil, så att er markup hålls välstrukturerad utan extra steg.

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

Pre-commit-hook med Husky

Genom att automatisera formateringen vid commit med Husky och lint-staged säkerställer ni att inga osorterade klasser någonsin hamnar i kodförrådet. När en utvecklare gör en commit formateras och stageas endast de stageade filerna igen — en snabb och fokuserad åtgärd även i stora projekt.

npm install -D husky lint-staged
npx husky init

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

Sortering i JSX- och TSX-filer

Tillägget hanterar även JSX- och TSX-filer genom att sortera klasser i className-attribut och strängargument till verktyg som clsx och tailwind-merge. Det använder statisk analys för att hitta klasssträngar, så dynamiskt konstruerade strängar lämnas oförändrade — endast statiska strängliteraler sorteras.

// 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>
);

Sortering i malliterals och clsx

Tillägget känner igen klasssträngar som skickas till populära hjälpfunktioner som clsx, cn och tailwind-merge när de anropas med strängargument. Det innebär att er villkorliga klasslogik förblir sorterad även när den är fördelad över flera argument, vilket håller kompositionsmönstren rena och lättlästa.

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-kontroll med Prettier Check

Lägg till Prettiers läge --check i er CI-pipeline så att byggen misslyckas när filer innehåller osorterade klasser. På så sätt säkerställer ni att osorterad kod inte kan mergas till main, även om en utvecklare hoppar över pre-commit-hooken. Kontrollen avslutas med en statuskod som inte är noll när formateringsskillnader hittas.

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

Hantering av specialfall och anpassade klasser

Tillägget sorterar kända Tailwind-klasser, men lämnar okända klassnamn på plats sist. Om ni använder anpassade verktygsklasser som lagts till via tillägg konfigurerar ni alternativet tailwindConfig så att tillägget känner till dem. Anpassade klasser som tillägget inte kan identifiera visas fortfarande, men de stör inte sorteringen av de klasser som känns igen.

// .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)' } });
  }),
],

Snabbtest

Testa era kunskaper om begreppen i Tailwind CSS Mastery från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har ni lärt er att installera och konfigurera prettier-plugin-tailwindcss för att automatisera klassortering, integrera med redigerarens formatering vid sparning för ett smidigt arbetsflöde och framtvinga sorterade klasser i CI med Prettiers kontrolläge. Nästa steg är att gå igenom hur Tailwind lintas med ESLint.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Klassortering och Prettier-plugin” gratis?

Ja – hela texten till ”Klassortering och Prettier-plugin” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Klassortering och Prettier-plugin”?

Installera prettier-plugin-tailwindcss för att automatiskt sortera verktygsklasser i en kanonisk ordning, vilket förbättrar läsbarheten och minskar mergekonflikter. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?

Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Klassortering och Prettier-plugin”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?

Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Tailwind CSS Academy