Kako popraviti grešku "Tailwind CSS stilovi se ne ažuriraju" u Vite React aplikaciji

Ažurirano 13. rujna 2026.: Trenutna dokumentacija Tailwind CSS-a identificira okvir kao v4.3 , a njegova preporučena Vite integracija je namjenski @tailwindcss/vitedodatak plus @import "tailwindcss";. Službena stranica s izdanjima Vitea navodi Vite 8.3.0 kao objavljen 10. rujna 2026. To je važno jer mnogi ispravci "Tailwind stilova koji se ne ažuriraju" kopirani iz starijih tutorijala ciljaju Tailwind v3 i mogu poslati v4 projekt u krivom smjeru.

Ako se stilovi Tailwinda renderiraju jednom, ali se prestanu mijenjati ili se nove uslužne klase pojavljuju u vašem JSX-u bez promjene stranice, problem rješavajte u četiri sloja: provjerite glavnu verziju Tailwinda i integraciju Vitea, provjerite je li CSS datoteka Tailwinda stvarno učitana, provjerite može li Tailwind prepoznati nazive klasa i izvorne datoteke, a zatim izolirajte Vite HMR ili predmemoriju preglednika. Ovaj redoslijed izbjegava nepotrebne ponovne instalacije i destruktivno brisanje predmemorije.

Brza dijagnostička tablica

1. Utvrdite je li projekt Tailwind v4 ili naslijeđena v3 konfiguracija

Započnite ovdje jer ispravan popravak ovisi o glavnoj verziji Tailwinda. Pokrenite:

npm ls tailwindcss @tailwindcss/vite vite

Za trenutni Tailwind v4 + Vite projekt, službeni vodič za instalaciju Vitea za Tailwind preporučuje instaliranje tailwindcssi @tailwindcss/vite, registraciju dodatka u vite.config.jsili vite.config.ts, te uvoz Tailwinda iz vašeg CSS-a jednom linijom:

@import "tailwindcss";

Odgovarajuća Vite konfiguracija je konceptualno sljedeća:

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

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

Ako vaš projekt umjesto toga ima tailwind.config.jss contentnizom i stilskim listom koji sadrži @tailwind base, @tailwind componentsi @tailwind utilities, gledate postavke iz v3 ere. To se ne pokvari automatski ako je projekt namjerno još uvijek na Tailwindu v3, ali ne bi se trebalo slijepo miješati s v4 uputama. Službeni vodič za nadogradnju Tailwinda na v4 posebno objašnjava da su se Vite dodatak i tijek uvoza CSS-a promijenili u v4.

Praktično pravilo: prije promjene konfiguracijskih datoteka, odlučite koju glavnu verziju zapravo pokrećete. Polumigrirani projekt čest je uzrok zbunjujućeg ponašanja jer verzije paketa, konfiguracija PostCSS-a, dodatak Vite i CSS direktive mogu pripadati različitim generacijama Tailwinda.

2. Provjerite učitava li Vite CSS datoteku koja uvozi Tailwind

Čak ni savršena Tailwind konfiguracija ne može ažurirati stranicu ako stilski list nije dio grafa Vite modula. U tipičnoj React datoteci za unos provjerite uvoz kao što je:

import "./index.css";

Zatim otvorite tu datoteku i potvrdite da sadrži trenutni uvoz s Tailwinda:

@import "tailwindcss";

U službenoj dokumentaciji značajki Vitea navodi se da se uvezeni CSS ubrizgava u stranicu i podržava Hot Module Replacement (HMR). Drugim riječima, ako index.cssje ispravno uvezen, promjena običnog CSS-a bi se trebala normalno ažurirati bez ponovnog učitavanja cijele stranice. To vam daje koristan kontrolni test.

Provedite kontrolni test u dva dijela

1. Dodajte privremeno obično CSS pravilo u uvezeni stilski list, kao što je vidljivi obrub na testnom elementu.
2. Također promijenite statički uslužni program Tailwind na istom elementu, na primjer s bg-blue-500na bg-emerald-500.

Ako se obični CSS odmah promijeni, ali uslužni program Tailwind ne, Vite učitava stilski list i HMR je aktivan; usredotočite se na otkrivanje ili generiranje Tailwinda. Ako se ne pojavi nijedna promjena, prvo se usredotočite na uvoz CSS-a, Vite dev poslužitelj, putanju datoteke ili stanje preglednika.

3. Ispravite otkrivanje izvora i dinamička imena klasa

Tailwind generira CSS skeniranjem izvornih datoteka u potrazi za tokenima sličnim klasama. Trenutna dokumentacija za otkrivanje klasa u izvornim datotekama objašnjava dva detalja koja izravno uzrokuju simptome "stilovi se ne ažuriraju".

Ne gradite imena klasa od fragmenata stringova

Tailwind tretira izvorne datoteke kao tekst; ne procjenjuje vaš JavaScript kako bi otkrio konačnu vrijednost niza predloška. Ovaj uzorak nije pouzdan:

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

Potpuni nizovi bg-red-500, bg-blue-500i tako dalje nikada se ne pojavljuju u izvornom kodu, pa Tailwind nema ništa određeno za generirati. Umjesto toga, mapirajte vrijednosti na potpune, statički detektabilne nizove klase:

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

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

Ako se čvrsto kodirana testna klasa ažurira, ali se klasa generirana prop-om ne ažurira, ovo je prva stvar koju treba popraviti.

Registrirajte izvore koje Tailwind namjerno preskače

Tailwind v4 automatski detektira izvorne datoteke, ali u dokumentaciji piše da ignorira datoteke u .gitignore, node_modules, binarnim datotekama, CSS datotekama i uobičajenim datotekama zaključavanja. To postaje relevantno u monorepozitorijama i paketima dijeljenog korisničkog sučelja.

Ako vaša React aplikacija koristi paket u stilu Tailwinda koji se nalazi izvan automatski detektiranog izvornog stabla, registrirajte ga eksplicitno iz stilskog lista:

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

Za paket unutar node_modules, Tailwindova dokumentacija prikazuje isti @sourcemehanizam za eksplicitno uključivanje te biblioteke. Za monorepo gdje se naredba dev pokreće iz drugog radnog direktorija, izvornu bazu možete postaviti i na temelju uvoza:

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

Koristite eksplicitne izvore samo kada su vam potrebni. Dodavanje ogromnih direktorija "za svaki slučaj" otežava rasuđivanje o projektu i može stvoriti nepotrebno skeniranje.

4. Odvojite probleme Tailwinda od Vite HMR-a, zastarjelog stanja i CSS prioriteta

Nakon što su v4 integracija, uvoz stilskih listova i otkrivanje izvora ispravni, ponovno pokrenite dev server. Promjene na razini konfiguracije dobar su razlog za zaustavljanje trenutnog procesa i pokretanje:

npm run dev

Nemojte započeti brisanjem node_modules, lockfile-a ili svakog direktorija predmemorije. Ti koraci mogu sakriti stvarni uzrok i uzrokovati pomicanje ovisnosti. Vite ima vlastito ponašanje optimizacije predmemorije i ovisnosti, ali njegova službena dokumentacija za rješavanje problema posebno navodi vite --forceslučajeve kao što su zastarjele optimizirane ovisnosti nakon povezivanja ili odvezivanja lokalnih paketa. Koristite prisilnu ponovnu optimizaciju kada se to dogodi, a ne kao prvo univerzalno rješenje.

Koristite DevTools kako biste utvrdili što zapravo ne funkcionira

Pregledajte element koji se trebao promijeniti i postavite tri pitanja:

• Je li očekivana klasa prisutna u DOM-u? Ako nije, problem je u stanju Reacta ili logici komponente, a ne u Tailwindu.
• Je li generirano odgovarajuće CSS pravilo? Ako je klasa prisutna, ali ne postoji pravilo, istražite otkrivanje izvora Tailwind-a, dinamičku konstrukciju klase ili postavljanje dodatka.
• Je li pravilo prisutno, ali prekriženo ili poništeno? Tada je Tailwind uspješno generirao uslužni program; problem je CSS redoslijed, specifičnost, umetnuti stil, drugi stilski list ili specifičniji selektor.

Brza kontrolna lista za Vite React projekt na Tailwind v4

• tailwindcssi @tailwindcss/viteinstalirani su u projektu koji pokreće Vite.
• vite.config.jsili vite.config.tsse registrira tailwindcss()uz React dodatak.
• CSS datoteka koju je uvezla vaša React ulazna točka sadrži @import "tailwindcss";.
• JSX koristi classNamei kompletna imena uslužnih programa Tailwind pojavljuju se doslovno u izvornom kodu.
• Datoteke koje sadrže uslužne programe nalaze se unutar automatski otkrivenih izvora Tailwinda ili se dodaju s nastavkom @source.
• Razvojni poslužitelj je ponovno pokrenut nakon promjene konfiguracije Vite/Tailwind-a.
• DevTools potvrđuje nedostaje li klasa, nedostaje li pravilo ili se pravilo poništava.

Uobičajeni popravci koji ovise o verziji

Ako se stilovi i dalje ne ažuriraju

Napravite najmanji mogući test u istom projektu: jedan React element s doslovnim nizom klase kao što je className="bg-red-500 p-8 text-white", uvezen kroz normalnu ulaznu točku. Ako taj element radi, integracija Tailwind/Vite je u osnovi ispravna, a preostala greška je lokalna za otkrivanje izvora, dinamičku konstrukciju klase, logiku komponenti ili CSS prioritet.

Ako minimalni element i dalje ne radi, usporedite svoje datoteke redak po redak s trenutnim uputama za instalaciju Vitea na Tailwindu. Potvrdite da slučajno ne pokrećete Vite iz nadređenog radnog prostora s drugačijim package.json, da instalirana glavna verzija Tailwinda odgovara stilu konfiguracije i da je CSS datoteka koju ste uredili ona koju je React zapravo uvezao.

Najučinkovitija navika rješavanja problema je izbjegavanje tretiranja svake stranice koja izgleda ustajalo kao HMR greške. U modernoj Tailwind v4 + Vite React aplikaciji, CSS uvozi već sudjeluju u Vite HMR-u. Kada se obični CSS ažurira, ali određeni uslužni program ne, otkrivanje Tailwind klase obično je bolje mjesto za istraživanje od predmemorije preglednika.

Službene reference

• Tailwind CSS: Instalacija s Viteom
• Tailwind CSS: Detekcija klasa u izvornim datotekama
• Tailwind CSS: Vodič za nadogradnju
• Vite: Značajke, uključujući CSS i HMR ponašanje
• Vite: Rješavanje problema
• Izdanje Vite 8.3.0