Sådan rettes "Tailwind CSS-stilarter opdateres ikke" i en Vite React-app

Opdateret 13. september 2026: Tailwind CSS' nuværende dokumentation identificerer frameworket som v4.3 , og den anbefalede Vite-integration er det dedikerede @tailwindcss/viteplugin plus @import "tailwindcss";. Vites officielle udgivelsesside viser Vite 8.3.0 som udgivet den 10. september 2026. Det er vigtigt, fordi mange rettelser til "Tailwind-stile opdateres ikke", der er kopieret fra ældre tutorials, er rettet mod Tailwind v3 og kan sende et v4-projekt i den forkerte retning.

Hvis Tailwind-stilarter gengives én gang, men holder op med at ændre sig, eller hvis nye værktøjsklasser vises i din JSX uden at ændre siden, skal du foretage en fejlfinding af problemet i fire lag: verificer Tailwinds hovedversion og Vite-integrationen, verificer, at Tailwind CSS-filen faktisk er indlæst, verificer, at Tailwind kan registrere klassenavnene og kildefilerne, og isoler derefter Vite HMR eller browsercaching. Denne rækkefølge undgår unødvendige geninstallationer og destruktiv cache-rydning.

Hurtig diagnostisk tabel

1. Identificer om projektet er Tailwind v4 eller en ældre v3-opsætning

Start her, da den korrekte løsning afhænger af den overordnede version af Tailwind. Kør:

npm ls tailwindcss @tailwindcss/vite vite

For et aktuelt Tailwind v4 + Vite-projekt anbefaler Tailwinds officielle Vite-installationsguidetailwindcss at installere og @tailwindcss/vite, registrere plugin'et i vite.config.jseller vite.config.ts, og importere Tailwind fra din CSS med én linje:

@import "tailwindcss";

Den tilsvarende Vite-konfiguration er konceptuelt:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Hvis dit projekt i stedet har et ``` tailwind.config.jsmed et contentarray og et stylesheet, der indeholder ``` @tailwind base, @tailwind components`` og @tailwind utilities``, ser du på opsætningen fra v3-æraen. Det er ikke automatisk ødelagt, hvis projektet bevidst stadig er på Tailwind v3, men det bør ikke blandes blindt med v4-instruktioner. Tailwinds officielle v4-opgraderingsguide forklarer specifikt, at Vite-pluginet og CSS-importflowet blev ændret i v4.

Praktisk regel: Før du ændrer konfigurationsfiler, skal du beslutte, hvilken overordnet version du rent faktisk kører. Et halvt migreret projekt er en almindelig årsag til forvirrende adfærd, fordi pakkeversionerne, PostCSS-konfigurationen, Vite-pluginet og CSS-direktiverne kan tilhøre forskellige generationer af Tailwind.

2. Bekræft, at Vite indlæser den CSS-fil, der importerer Tailwind

Selv en perfekt Tailwind-konfiguration kan ikke opdatere siden, hvis stylesheet ikke er en del af Vite-modulets graf. I en typisk React-indtastningsfil skal du kontrollere for en import som f.eks.:

import "./index.css";

Åbn derefter den præcise fil, og bekræft, at den indeholder den aktuelle Tailwind-import:

@import "tailwindcss";

Vites officielle funktionsdokumentation angiver, at importeret CSS indsættes på siden og understøtter Hot Module Replacement (HMR). Med andre ord, hvis index.cssimporten er korrekt, bør ændring af almindelig CSS normalt opdateres uden at genindlæse hele siden. Det giver dig en nyttig kontroltest.

Kør en kontroltest i to dele

1. Tilføj en midlertidig almindelig CSS-regel til det importerede stylesheet, f.eks. en synlig kant på et testelement.
2. Rediger også et statisk Tailwind-værktøj på det samme element, for eksempel fra bg-blue-500til bg-emerald-500.

Hvis den almindelige CSS ændres med det samme, men Tailwind-værktøjet ikke gør det, indlæser Vite stylesheetet, og HMR er aktiv; fokuser på Tailwind-detektion eller -generering. Hvis ingen af ​​ændringerne vises, fokuser først på CSS-importen, Vite-udviklingsserveren, filstien eller browsertilstanden.

3. Ret kildedetektion og dynamiske klassenavne

Tailwind genererer CSS ved at scanne kildefiler for klasselignende tokens. Den nuværende dokumentation om detektion af klasser i kildefiler forklarer to detaljer, der direkte forårsager symptomer på, at "stilarter ikke opdateres".

Opbyg ikke klassenavne fra strengfragmenter

Tailwind behandler kildefiler som tekst; den evaluerer ikke dit JavaScript for at finde den endelige værdi af en skabelonstreng. Dette mønster er upålideligt:

function Badge({ color }) {
  return <span className={`bg-${color}-500 text-white`}>...</span>;
}

De komplette strenge bg-red-500, bg-blue-500osv. vises aldrig i kildekoden, så Tailwind har intet definitivt at generere. Kortlægger værdier til komplette, statisk detekterbare klassestrenge i stedet:

const variants = {
  red: "bg-red-500 text-white",
  blue: "bg-blue-500 text-white",
};

function Badge({ color }) {
  return <span className={variants[color]}>...</span>;
}

Hvis en hardcodet testklasse opdateres, men en prop-genereret klasse ikke gør, er dette den første ting, der skal rettes.

Registrer kilder, som Tailwind bevidst springer over

Tailwind v4 registrerer automatisk kildefiler, men dokumentationen siger, at den ignorerer filer i .gitignore, node_modules, binære filer, CSS-filer og almindelige låsefiler. Dette bliver relevant i monorepos og pakker med delt brugergrænseflade.

Hvis din React-app bruger en Tailwind-stylet pakke, der ligger uden for det automatisk detekterede kildetræ, skal du registrere den eksplicit fra stylesheet:

@import "tailwindcss";
@source "../packages/ui";

For en pakke indeni node_modulesviser Tailwinds dokumentation den samme @sourcemekanisme til eksplicit at inkludere det pågældende bibliotek. For et monorepo, hvor dev-kommandoen kører fra en anden arbejdsmappe, kan du også indstille kildekoden som base for importen:

@import "tailwindcss" source("../src");

Brug kun eksplicitte kilder, når du har brug for dem. Tilføjelse af store mapper "bare i tilfælde af" gør projektet sværere at ræsonnere over og kan skabe unødvendigt scanningsarbejde.

4. Adskil Tailwind-problemer fra Vite HMR, inaktiv tilstand og CSS-prioritet

Når v4-integrationen, importen af ​​stylesheet og kildekodedetektionen er korrekte, skal du genstarte udviklerserveren. Ændringer på konfigurationsniveau er en god grund til at stoppe den aktuelle proces og køre:

npm run dev

Start ikke med at slette node_modules, låsefilen eller alle cache-mapper. Disse trin kan skjule den faktiske årsag og introducere afhængighedsdrift. Vite har sin egen cache- og afhængighedsoptimeringsadfærd, men dens officielle fejlfindingsdokumentation påpeger specifikt vite --forcetilfælde som forældede optimerede afhængigheder efter linkning eller aflinkning af lokale pakker. Brug tvungen reoptimering, når den situation gælder, ikke som den første universelle løsning.

Brug DevTools til at afgøre, hvad der rent faktisk fejler

Undersøg det element, der burde have ændret sig, og stil tre spørgsmål:

• Er den forventede klasse til stede i DOM'en? Hvis ikke, er det Reacts tilstand eller komponentlogik, der er problemet, ikke Tailwind.
• Genereres der en matchende CSS-regel? Hvis klassen er til stede, men der ikke findes nogen regel, skal du undersøge Tailwind-kildedetektion, dynamisk klassekonstruktion eller plugin-opsætning.
• Er reglen til stede, men overstreget eller tilsidesat? Så genererede Tailwind værktøjet korrekt; problemet er CSS-rækkefølge, specificitet, en inline-stil, et andet stylesheet eller en mere specifik selektor.

Hurtig tjekliste til et Vite React-projekt på Tailwind v4

• tailwindcssog @tailwindcss/viteer installeret i det projekt, der kører Vite.
• vite.config.jseller vite.config.tsregistreres tailwindcss()sammen med React-pluginnet.
• CSS-filen, der importeres af dit React-indgangspunkt, indeholder @import "tailwindcss";.
• JSX-brugerne classNameog de komplette Tailwind-værktøjsnavne vises bogstaveligt talt i kildekoden.
• Filer, der indeholder værktøjer, findes i Tailwinds automatisk detekterede kilder eller tilføjes med @source.
• Udviklerserveren blev genstartet efter ændring af Vite/Tailwind-konfigurationen.
• DevTools bekræfter, om klassen mangler, om reglen mangler, eller om reglen tilsidesættes.

Almindelige rettelser, der er versionsafhængige

Hvis stilarter stadig ikke opdateres

Opret den mindst mulige test i det samme projekt: ét React-element med en literal klassestreng, f.eks. className="bg-red-500 p-8 text-white", importeret via det normale indgangspunkt. Hvis dette element fungerer, er Tailwind/Vite-integrationen fundamentalt sund, og den resterende fejl er lokal for kildekodedetektion, dynamisk klassekonstruktion, komponentlogik eller CSS-præcedens.

Hvis minimal-elementet stadig ikke virker, skal du sammenligne dine filer linje for linje med Tailwinds aktuelle Vite-installationsvejledning. Bekræft, at du ikke ved et uheld kører Vite fra et overordnet arbejdsområde med en anden package.json, at den installerede Tailwind-hovedversion matcher konfigurationsstilen, og at den CSS-fil, du redigerede, er den, der faktisk importeredes af React.

Den mest effektive fejlfindingsvane er at undgå at behandle alle sider, der ser gammeldags ud, som en HMR-fejl. I en moderne Tailwind v4 + Vite React-app deltager CSS-import allerede i Vite HMR. Når almindelig CSS opdateres, men et bestemt værktøj ikke gør, er Tailwind-klassedetektion normalt et bedre sted at undersøge det end browsercachen.

Officielle referencer

• Tailwind CSS: Installation med Vite
• Tailwind CSS: Detektering af klasser i kildefiler
• Tailwind CSS: Opgraderingsvejledning
• Vite: Funktioner, herunder CSS og HMR-adfærd
• Vite: Fejlfinding
• Vite 8.3.0-udgivelse