Kako instalirati Tailwind CSS: Korak-po-korak vodič s primjerima
Tailwind CSS možete postaviti u radni projekt za manje od pet minuta, bez obzira radite li u Next.js-u, Vite-u ili običnom HTML-u. U ovom vodiču prolazimo kroz cijeli proces — od instalacije i konfiguracije do prvih komponenti — uz aktualne korake za Tailwind CSS v4, koji je danas standardna verzija u novim projektima. Ako ste do sada pisali CSS ručno ili koristili Bootstrap, ovdje ćete vidjeti zašto je utility-first pristup postao dominantan izbor za moderne web stranice i aplikacije, te kako izbjeći najčešće greške s kojima se developeri susreću pri prvoj instalaciji.
Sadržaj
Što je Tailwind CSS i zašto ga vrijedi koristiti
Tailwind CSS je utility-first CSS framework — umjesto pisanja prilagođenih klasa i odvojenih .css datoteka, stilizirate elemente direktno u markupu pomoću gotovih utility klasa poput flex, text-center ili bg-blue-500. Tailwind skenira sve vaše HTML, JSX i template datoteke, generira samo CSS koji stvarno koristite i isporučuje minimalnu, optimiziranu datoteku za produkciju.
Za razliku od component-based frameworka kao što je Bootstrap, Tailwind ne nameće vizualni stil — dobivate punu kontrolu nad dizajnom, manji produkcijski bundle zahvaljujući automatskom uklanjanju neiskorištenih stilova, te brže Core Web Vitals rezultate, što je izravno povezano s boljim rankingom i nižim bounce rateom.
Preduvjeti prije instalacije
Prije nego krenete, provjerite imate li sljedeće:
- Node.js 18 ili noviji (preporučeno 20+, jer ga zahtijevaju noviji Tailwind alati za migraciju)
- npm, pnpm ili yarn kao package manager
- Code editor poput VS Code-a — preporučujemo i ekstenziju Tailwind CSS IntelliSense, o kojoj više govorimo u nastavku
- Svijest o podržanim preglednicima — Tailwind CSS v4 cilja moderne preglednike (Safari 16.4+, Chrome 111+, Firefox 128+); ako morate podržavati starije preglednike, ostanite na v3.4
Korak 1: Odaberite metodu instalacije prema vašem projektu
Metoda instalacije ovisi o tome u kakvom okruženju radite. Sljedeća tablica vam pomaže brzo odlučiti:
| Tip projekta | Preporučena metoda |
|---|---|
| Next.js (App Router) | @tailwindcss/postcss |
| React, Vue, Svelte ili vanilla projekt s Vite-om | @tailwindcss/vite |
| Statičan HTML/CSS bez build alata | @tailwindcss/cli |
| Brzo testiranje u pregledniku, bez ikakvog setupa | Play CDN |
Instalacija u Next.js projektu (App Router)
Instalirajte Tailwind i PostCSS plugin:
npm install -D tailwindcss @tailwindcss/postcss
Kreirajte postcss.config.mjs u rootu projekta:
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
U app/globals.css dodajte import:
@import "tailwindcss";
Budući da je globals.css već uvezen u root layout.tsx (import "@/app/globals.css"), nema dodatnih koraka — pokrenite npm run dev i Tailwind klase su odmah dostupne u svim komponentama.
Instalacija s Vite-om (React, Vue, Svelte, vanilla)
Kreirajte projekt i instalirajte Tailwind:
npm create vite@latest moj-projekt
cd moj-projekt
npm install tailwindcss @tailwindcss/vite
Dodajte plugin u vite.config.ts:
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});
U svojoj glavnoj CSS datoteci (npr. src/index.css) dodajte:
@import "tailwindcss";
Pokrenite npm run dev i Tailwind je spreman.
Instalacija putem Tailwind CLI-a (bez frameworka)
Za statične HTML projekte bez build alata:
npm install tailwindcss @tailwindcss/cli
Kreirajte input.css:
@import "tailwindcss";
Pokrenite CLI u watch modu:
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
Uvezite generirani output.css u <head> svoje HTML datoteke i klase su odmah aktivne.
Play CDN (samo za testiranje)
Za brzo isprobavanje, bez instalacije ičega:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Ova metoda je namijenjena isključivo razvojnim svrhama i isprobavanju — nikada je nemojte koristiti u produkciji jer generira CSS u stvarnom vremenu u pregledniku, što značajno utječe na performanse.
Korak 2: Konfiguracija i prilagodba teme
Velika promjena u Tailwind CSS v4 je da konfiguracija postaje CSS-first. Više ne morate ručno definirati content putanje u tailwind.config.js — Tailwind automatski detektira datoteke u kojima se koriste klase.
Za prilagodbu boja, fontova ili razmaka koristite @theme direktivu direktno u CSS datoteci:
@import "tailwindcss";
@theme {
--color-brand: #4f46e5;
--font-display: "Fraunces", serif;
}
Nakon ovoga, klase poput bg-brand ili font-display postaju dostupne u cijelom projektu, bez ikakve dodatne registracije.
Ako migrirate stariji projekt i još trebate koristiti postojeći tailwind.config.js, to je moguće preko @config direktive:
@config "../../tailwind.config.js";
Za dark mode, Tailwind v4 po defaultu koristi prefers-color-scheme iz operativnog sustava korisnika. Ako želite ručno upravljanje (npr. toggle gumb), prebacite strategiju na class-based pristup:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
Nakon ovoga, dark: klase se aktiviraju kad je klasa dark prisutna na <html> ili roditeljskom elementu, neovisno o postavkama sustava.
Korak 3: Provjerite da je sve ispravno postavljeno
Dodajte sljedeći test u bilo koju komponentu ili HTML datoteku:
<h1 class="text-3xl font-bold underline">Tailwind radi!</h1>
Pokrenite dev server i otvorite stranicu u pregledniku. Ako je tekst podebljan, povećan i podcrtan, instalacija je uspješna. Ako ne vidite promjenu, provjerite sljedeće prije nego nastavite:
- Je li CSS datoteka s
@import "tailwindcss";stvarno uvezena u root komponentu ili layout - Je li dev server ponovno pokrenut nakon promjene konfiguracije
- Postoji li konflikt s nekim drugim CSS frameworkom u istom projektu
Praktični primjeri korištenja
Gumb s hover i fokus stanjima
<button class="bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors">
Pošalji upit
</button>
Kartica s jasnom vizualnom hijerarhijom
<div class="max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
<h3 class="text-lg font-semibold text-gray-900">Naslov usluge</h3>
<p class="mt-2 text-sm text-gray-600">
Kratak opis koji jasno komunicira vrijednost, bez nepotrebnog teksta.
</p>
</div>
Responsive navigacija
<nav class="flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
<span class="text-xl font-display">Moja Tvrtka</span>
<div class="flex flex-col gap-3 md:flex-row md:gap-6">
<a href="#" class="text-gray-700 hover:text-indigo-600">Usluge</a>
<a href="#" class="text-gray-700 hover:text-indigo-600">O nama</a>
<a href="#" class="text-gray-700 hover:text-indigo-600">Kontakt</a>
</div>
</nav>
Komponenta koja se prilagođava dark modu
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-6 rounded-lg">
Sadržaj koji se automatski prilagođava tamnoj temi.
</div>
Tailwind CSS v4 u odnosu na v3
Ako dolazite s nekog starijeg projekta, korisno je znati što se promijenilo:
| Značajka | Tailwind v3 | Tailwind v4 |
|---|---|---|
| Konfiguracija | tailwind.config.js (JavaScript) | CSS-first, @theme direktiva |
| Detekcija sadržaja | Ručni content niz putanja | Automatska, bez konfiguracije |
| Setup za Vite | tailwindcss + postcss + autoprefixer | Samo @tailwindcss/vite |
| Dark mode | darkMode: 'class' u configu | @custom-variant u CSS-u |
| Brzina build-a | Standardna | Do 8x brži incremental build |
Za migraciju postojećeg projekta s v3 na v4, Tailwind nudi automatizirani alat koji odrađuje većinu posla:
npx @tailwindcss/upgrade
Alat zahtijeva Node.js 20+, a preporuka je pokrenuti ga u zasebnoj git granci i pažljivo provjeriti razlike prije spajanja.
Najčešće greške pri instalaciji i kako ih riješiti
| Problem | Uzrok | Rješenje |
|---|---|---|
| Klase se ne primjenjuju na elemente | CSS datoteka s @import "tailwindcss" nije uvezena u root komponentu | Provjerite import u layout.tsx, main.tsx ili index.html |
Cannot find module 'tailwindcss' | Paket nije instaliran ili je pokrenut u krivom direktoriju | Pokrenite npm install ponovno unutar root foldera projekta |
| Stara v3 konfiguracija ne radi u v4 projektu | Mješanje uputa iz različitih verzija dokumentacije | Koristite @import "tailwindcss" i @theme, ili uvezite stari config preko @config |
| Stilovi rade lokalno, ali ne na produkciji | Build proces nije pokrenut prije deploya | Provjerite generira li npm run build finalnu CSS datoteku |
| IntelliSense ne predviđa Tailwind klase u editoru | Ekstenzija nije instalirana ili workspace nije prepoznat | Instalirajte “Tailwind CSS IntelliSense” i restartajte VS Code |
Korisni alati za svakodnevni rad
- Tailwind CSS IntelliSense — službena VS Code ekstenzija s autocomplete, linting i hover pregledom vrijednosti klasa
- prettier-plugin-tailwindcss — automatski sortira utility klase u dosljedan redoslijed prilikom formatiranja
- Tailwind Play — online playground za brzo isprobavanje ideja bez lokalnog projekta
- Headless UI / Tailwind UI — gotovi, pristupačni komponentni obrasci koji se uklapaju u Tailwind sustav
Najčešća pitanja
Treba li mi React ili neki drugi framework da koristim Tailwind CSS? Ne. Tailwind radi s običnim HTML-om, bilo kojim frameworkom (React, Vue, Svelte) i bilo kojim CMS-om koji generira HTML, uključujući WordPress.
Koja je razlika između Tailwind CSS-a i Bootstrap-a? Bootstrap je component-based i dolazi s gotovim vizualnim stilom, dok je Tailwind utility-first i daje potpunu kontrolu nad dizajnom bez nametnutog izgleda, uz manji produkcijski CSS zahvaljujući uklanjanju neiskorištenih klasa.
Mogu li koristiti Tailwind CSS bez Node.js-a? Da. Postoji standalone CLI izvršna datoteka koja ne zahtijeva Node.js niti npm, dostupna direktno s GitHub releasea projekta.
Utječe li Tailwind CSS na brzinu učitavanja stranice? Generalno pozitivno — Tailwind generira samo CSS koji se stvarno koristi, što rezultira manjim datotekama i bržim Core Web Vitals metrikama u odnosu na velike, neiskorištene CSS bibilioteke.
Kako nadograditi postojeći projekt s Tailwind v3 na v4? Koristite službeni alat npx @tailwindcss/upgrade, koji automatski migrira CSS, JavaScript konfiguraciju i template datoteke. Preporučujemo testiranje u zasebnoj git grani prije spajanja u glavnu.
Radi li Tailwind CSS dobro s WordPress-om? Da. CSS se kompajlira tijekom build procesa i uključuje u temu ili headless frontend, što je čest pristup kod decoupled arhitektura gdje WordPress služi kao backend a frontend je razvijen zasebno.
Trebate li produkcijski Next.js setup bez gubljenja vremena na konfiguraciju?
Postavljanje Tailwind CSS-a je jednostavno, ali pretvaranje toga u stabilan, brz i SEO-optimiziran produkcijski sustav traži više od jedne instalacije. Ako razvijate web aplikaciju ili web stranicu i želite da arhitektura, performanse i struktura komponenti budu riješene odmah ispravno, javite nam se — rado prolazimo kroz vaš projekt i predlažemo konkretan sljedeći korak.
