{"id":507,"date":"2026-06-26T10:17:00","date_gmt":"2026-06-26T09:17:00","guid":{"rendered":"https:\/\/masterymesh.com\/blog\/?p=507"},"modified":"2026-06-17T14:18:01","modified_gmt":"2026-06-17T13:18:01","slug":"instalacija-tailwind-css","status":"publish","type":"post","link":"https:\/\/masterymesh.com\/blog\/web-development\/instalacija-tailwind-css\/","title":{"rendered":"Kako instalirati Tailwind CSS: Korak-po-korak vodi\u010d s primjerima"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Tailwind CSS mo\u017eete postaviti u radni projekt za manje od pet minuta, bez obzira radite li u Next.js-u, Vite-u ili obi\u010dnom HTML-u. U ovom vodi\u010du prolazimo kroz cijeli proces \u2014 od instalacije i konfiguracije do prvih komponenti \u2014 uz aktualne korake za Tailwind CSS v4, koji je danas standardna verzija u novim projektima. Ako ste do sada pisali CSS ru\u010dno ili koristili Bootstrap, ovdje \u0107ete vidjeti za\u0161to je utility-first pristup postao dominantan izbor za moderne web stranice i aplikacije, te kako izbje\u0107i naj\u010de\u0161\u0107e gre\u0161ke s kojima se developeri susre\u0107u pri prvoj instalaciji.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Sadr\u017eaj<\/h2><nav><ul><li class=\"\"><a href=\"#sto-je-tailwind-css-i-zasto-ga-vrijedi-koristiti\">\u0160to je Tailwind CSS i za\u0161to ga vrijedi koristiti<\/a><\/li><li class=\"\"><a href=\"#preduvjeti-prije-instalacije\">Preduvjeti prije instalacije<\/a><\/li><li class=\"\"><a href=\"#korak-1-odaberite-metodu-instalacije-prema-vasem-projektu\">Korak 1: Odaberite metodu instalacije prema va\u0161em projektu<\/a><ul><li class=\"\"><a href=\"#instalacija-u-next-js-projektu-app-router\">Instalacija u Next.js projektu (App Router)<\/a><\/li><li class=\"\"><a href=\"#instalacija-s-vite-om-react-vue-svelte-vanilla\">Instalacija s Vite-om (React, Vue, Svelte, vanilla)<\/a><\/li><li class=\"\"><a href=\"#instalacija-putem-tailwind-cli-a-bez-frameworka\">Instalacija putem Tailwind CLI-a (bez frameworka)<\/a><\/li><li class=\"\"><a href=\"#play-cdn-samo-za-testiranje\">Play CDN (samo za testiranje)<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#korak-2-konfiguracija-i-prilagodba-teme\">Korak 2: Konfiguracija i prilagodba teme<\/a><\/li><li class=\"\"><a href=\"#korak-3-provjerite-da-je-sve-ispravno-postavljeno\">Korak 3: Provjerite da je sve ispravno postavljeno<\/a><\/li><li class=\"\"><a href=\"#prakticni-primjeri-koristenja\">Prakti\u010dni primjeri kori\u0161tenja<\/a><ul><li class=\"\"><a href=\"#gumb-s-hover-i-fokus-stanjima\">Gumb s hover i fokus stanjima<\/a><\/li><li class=\"\"><a href=\"#kartica-s-jasnom-vizualnom-hijerarhijom\">Kartica s jasnom vizualnom hijerarhijom<\/a><\/li><li class=\"\"><a href=\"#responsive-navigacija\">Responsive navigacija<\/a><\/li><li class=\"\"><a href=\"#komponenta-koja-se-prilagodava-dark-modu\">Komponenta koja se prilago\u0111ava dark modu<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#tailwind-css-v-4-u-odnosu-na-v-3\">Tailwind CSS v4 u odnosu na v3<\/a><\/li><li class=\"\"><a href=\"#najcesce-greske-pri-instalaciji-i-kako-ih-rijesiti\">Naj\u010de\u0161\u0107e gre\u0161ke pri instalaciji i kako ih rije\u0161iti<\/a><\/li><li class=\"\"><a href=\"#korisni-alati-za-svakodnevni-rad\">Korisni alati za svakodnevni rad<\/a><\/li><li class=\"\"><a href=\"#najcesca-pitanja\">Naj\u010de\u0161\u0107a pitanja<\/a><\/li><li class=\"\"><a href=\"#trebate-li-produkcijski-next-js-setup-bez-gubljenja-vremena-na-konfiguraciju\">Trebate li produkcijski Next.js setup bez gubljenja vremena na konfiguraciju?<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"sto-je-tailwind-css-i-zasto-ga-vrijedi-koristiti\" class=\"wp-block-heading\">\u0160to je Tailwind CSS i za\u0161to ga vrijedi koristiti<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind CSS je utility-first CSS framework \u2014 umjesto pisanja prilago\u0111enih klasa i odvojenih <code>.css<\/code> datoteka, stilizirate elemente direktno u markupu pomo\u0107u gotovih utility klasa poput <code>flex<\/code>, <code>text-center<\/code> ili <code>bg-blue-500<\/code>. Tailwind skenira sve va\u0161e HTML, JSX i template datoteke, generira samo CSS koji stvarno koristite i isporu\u010duje minimalnu, optimiziranu datoteku za produkciju.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Za razliku od component-based frameworka kao \u0161to je Bootstrap, Tailwind ne name\u0107e vizualni stil \u2014 dobivate punu kontrolu nad dizajnom, manji produkcijski bundle zahvaljuju\u0107i automatskom uklanjanju neiskori\u0161tenih stilova, te br\u017ee Core Web Vitals rezultate, \u0161to je izravno povezano s boljim rankingom i ni\u017eim bounce rateom.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"preduvjeti-prije-instalacije\" class=\"wp-block-heading\">Preduvjeti prije instalacije<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prije nego krenete, provjerite imate li sljede\u0107e:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Node.js 18 ili noviji<\/strong> (preporu\u010deno 20+, jer ga zahtijevaju noviji Tailwind alati za migraciju)<\/li>\n\n\n\n<li><strong>npm, pnpm ili yarn<\/strong> kao package manager<\/li>\n\n\n\n<li><strong>Code editor<\/strong> poput VS Code-a \u2014 preporu\u010dujemo i ekstenziju Tailwind CSS IntelliSense, o kojoj vi\u0161e govorimo u nastavku<\/li>\n\n\n\n<li>Svijest o <strong>podr\u017eanim preglednicima<\/strong> \u2014 Tailwind CSS v4 cilja moderne preglednike (Safari 16.4+, Chrome 111+, Firefox 128+); ako morate podr\u017eavati starije preglednike, ostanite na v3.4<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"korak-1-odaberite-metodu-instalacije-prema-vasem-projektu\" class=\"wp-block-heading\">Korak 1: Odaberite metodu instalacije prema va\u0161em projektu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Metoda instalacije ovisi o tome u kakvom okru\u017eenju radite. Sljede\u0107a tablica vam poma\u017ee brzo odlu\u010diti:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Tip projekta<\/th><th>Preporu\u010dena metoda<\/th><\/tr><\/thead><tbody><tr><td>Next.js (App Router)<\/td><td><code>@tailwindcss\/postcss<\/code><\/td><\/tr><tr><td>React, Vue, Svelte ili vanilla projekt s Vite-om<\/td><td><code>@tailwindcss\/vite<\/code><\/td><\/tr><tr><td>Stati\u010dan HTML\/CSS bez build alata<\/td><td><code>@tailwindcss\/cli<\/code><\/td><\/tr><tr><td>Brzo testiranje u pregledniku, bez ikakvog setupa<\/td><td>Play CDN<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"instalacija-u-next-js-projektu-app-router\" class=\"wp-block-heading\">Instalacija u Next.js projektu (App Router)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Instalirajte Tailwind i PostCSS plugin:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm install -D tailwindcss @tailwindcss\/postcss\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Kreirajte <code>postcss.config.mjs<\/code> u rootu projekta:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nexport default {\n  plugins: {\n    &quot;@tailwindcss\/postcss&quot;: {},\n  },\n};\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">U <code>app\/globals.css<\/code> dodajte import:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@import &quot;tailwindcss&quot;;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Budu\u0107i da je <code>globals.css<\/code> ve\u0107 uvezen u root <code>layout.tsx<\/code> (<code>import \"@\/app\/globals.css\"<\/code>), nema dodatnih koraka \u2014 pokrenite <code>npm run dev<\/code> i Tailwind klase su odmah dostupne u svim komponentama.<\/p>\n\n\n\n<h3 id=\"instalacija-s-vite-om-react-vue-svelte-vanilla\" class=\"wp-block-heading\">Instalacija s Vite-om (React, Vue, Svelte, vanilla)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Kreirajte projekt i instalirajte Tailwind:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm create vite@latest moj-projekt\ncd moj-projekt\nnpm install tailwindcss @tailwindcss\/vite\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Dodajte plugin u <code>vite.config.ts<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { defineConfig } from &quot;vite&quot;;\nimport tailwindcss from &quot;@tailwindcss\/vite&quot;;\n\nexport default defineConfig({\n  plugins: &#x5B;tailwindcss()],\n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">U svojoj glavnoj CSS datoteci (npr. <code>src\/index.css<\/code>) dodajte:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@import &quot;tailwindcss&quot;;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Pokrenite <code>npm run dev<\/code> i Tailwind je spreman.<\/p>\n\n\n\n<h3 id=\"instalacija-putem-tailwind-cli-a-bez-frameworka\" class=\"wp-block-heading\">Instalacija putem Tailwind CLI-a (bez frameworka)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Za stati\u010dne HTML projekte bez build alata:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm install tailwindcss @tailwindcss\/cli\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Kreirajte <code>input.css<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@import &quot;tailwindcss&quot;;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Pokrenite CLI u watch modu:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpx @tailwindcss\/cli -i .\/src\/input.css -o .\/src\/output.css --watch\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Uvezite generirani <code>output.css<\/code> u <code>&lt;head&gt;<\/code> svoje HTML datoteke i klase su odmah aktivne.<\/p>\n\n\n\n<h3 id=\"play-cdn-samo-za-testiranje\" class=\"wp-block-heading\">Play CDN (samo za testiranje)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Za brzo isprobavanje, bez instalacije i\u010dega:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4&quot;&gt;&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Ova metoda je namijenjena isklju\u010divo razvojnim svrhama i isprobavanju \u2014 nikada je nemojte koristiti u produkciji jer generira CSS u stvarnom vremenu u pregledniku, \u0161to zna\u010dajno utje\u010de na performanse.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"korak-2-konfiguracija-i-prilagodba-teme\" class=\"wp-block-heading\">Korak 2: Konfiguracija i prilagodba teme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Velika promjena u Tailwind CSS v4 je da konfiguracija postaje CSS-first. Vi\u0161e ne morate ru\u010dno definirati <code>content<\/code> putanje u <code>tailwind.config.js<\/code> \u2014 Tailwind automatski detektira datoteke u kojima se koriste klase.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Za prilagodbu boja, fontova ili razmaka koristite <code>@theme<\/code> direktivu direktno u CSS datoteci:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@import &quot;tailwindcss&quot;;\n\n@theme {\n  --color-brand: #4f46e5;\n  --font-display: &quot;Fraunces&quot;, serif;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Nakon ovoga, klase poput <code>bg-brand<\/code> ili <code>font-display<\/code> postaju dostupne u cijelom projektu, bez ikakve dodatne registracije.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ako migrirate stariji projekt i jo\u0161 trebate koristiti postoje\u0107i <code>tailwind.config.js<\/code>, to je mogu\u0107e preko <code>@config<\/code> direktive:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@config &quot;..\/..\/tailwind.config.js&quot;;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Za dark mode, Tailwind v4 po defaultu koristi <code>prefers-color-scheme<\/code> iz operativnog sustava korisnika. Ako \u017eelite ru\u010dno upravljanje (npr. toggle gumb), prebacite strategiju na class-based pristup:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@import &quot;tailwindcss&quot;;\n\n@custom-variant dark (&amp;:where(.dark, .dark *));\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Nakon ovoga, <code>dark:<\/code> klase se aktiviraju kad je klasa <code>dark<\/code> prisutna na <code>&lt;html&gt;<\/code> ili roditeljskom elementu, neovisno o postavkama sustava.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"korak-3-provjerite-da-je-sve-ispravno-postavljeno\" class=\"wp-block-heading\">Korak 3: Provjerite da je sve ispravno postavljeno<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dodajte sljede\u0107i test u bilo koju komponentu ili HTML datoteku:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;h1 class=&quot;text-3xl font-bold underline&quot;&gt;Tailwind radi!&lt;\/h1&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Pokrenite dev server i otvorite stranicu u pregledniku. Ako je tekst podebljan, pove\u0107an i podcrtan, instalacija je uspje\u0161na. Ako ne vidite promjenu, provjerite sljede\u0107e prije nego nastavite:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Je li CSS datoteka s <code>@import \"tailwindcss\";<\/code> stvarno uvezena u root komponentu ili layout<\/li>\n\n\n\n<li>Je li dev server ponovno pokrenut nakon promjene konfiguracije<\/li>\n\n\n\n<li>Postoji li konflikt s nekim drugim CSS frameworkom u istom projektu<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"prakticni-primjeri-koristenja\" class=\"wp-block-heading\">Prakti\u010dni primjeri kori\u0161tenja<\/h2>\n\n\n\n<h3 id=\"gumb-s-hover-i-fokus-stanjima\" class=\"wp-block-heading\">Gumb s hover i fokus stanjima<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button class=&quot;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&quot;&gt;\n  Po\u0161alji upit\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<h3 id=\"kartica-s-jasnom-vizualnom-hijerarhijom\" class=\"wp-block-heading\">Kartica s jasnom vizualnom hijerarhijom<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-sm&quot;&gt;\n  &lt;h3 class=&quot;text-lg font-semibold text-gray-900&quot;&gt;Naslov usluge&lt;\/h3&gt;\n  &lt;p class=&quot;mt-2 text-sm text-gray-600&quot;&gt;\n    Kratak opis koji jasno komunicira vrijednost, bez nepotrebnog teksta.\n  &lt;\/p&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<h3 id=\"responsive-navigacija\" class=\"wp-block-heading\">Responsive navigacija<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;nav class=&quot;flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between&quot;&gt;\n  &lt;span class=&quot;text-xl font-display&quot;&gt;Moja Tvrtka&lt;\/span&gt;\n  &lt;div class=&quot;flex flex-col gap-3 md:flex-row md:gap-6&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;text-gray-700 hover:text-indigo-600&quot;&gt;Usluge&lt;\/a&gt;\n    &lt;a href=&quot;#&quot; class=&quot;text-gray-700 hover:text-indigo-600&quot;&gt;O nama&lt;\/a&gt;\n    &lt;a href=&quot;#&quot; class=&quot;text-gray-700 hover:text-indigo-600&quot;&gt;Kontakt&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n<\/pre><\/div>\n\n\n<h3 id=\"komponenta-koja-se-prilagodava-dark-modu\" class=\"wp-block-heading\">Komponenta koja se prilago\u0111ava dark modu<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-6 rounded-lg&quot;&gt;\n  Sadr\u017eaj koji se automatski prilago\u0111ava tamnoj temi.\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"tailwind-css-v-4-u-odnosu-na-v-3\" class=\"wp-block-heading\">Tailwind CSS v4 u odnosu na v3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ako dolazite s nekog starijeg projekta, korisno je znati \u0161to se promijenilo:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Zna\u010dajka<\/th><th>Tailwind v3<\/th><th>Tailwind v4<\/th><\/tr><\/thead><tbody><tr><td>Konfiguracija<\/td><td><code>tailwind.config.js<\/code> (JavaScript)<\/td><td>CSS-first, <code>@theme<\/code> direktiva<\/td><\/tr><tr><td>Detekcija sadr\u017eaja<\/td><td>Ru\u010dni <code>content<\/code> niz putanja<\/td><td>Automatska, bez konfiguracije<\/td><\/tr><tr><td>Setup za Vite<\/td><td><code>tailwindcss<\/code> + <code>postcss<\/code> + <code>autoprefixer<\/code><\/td><td>Samo <code>@tailwindcss\/vite<\/code><\/td><\/tr><tr><td>Dark mode<\/td><td><code>darkMode: 'class'<\/code> u configu<\/td><td><code>@custom-variant<\/code> u CSS-u<\/td><\/tr><tr><td>Brzina build-a<\/td><td>Standardna<\/td><td>Do 8x br\u017ei incremental build<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Za migraciju postoje\u0107eg projekta s v3 na v4, Tailwind nudi automatizirani alat koji odra\u0111uje ve\u0107inu posla:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpx @tailwindcss\/upgrade\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Alat zahtijeva Node.js 20+, a preporuka je pokrenuti ga u zasebnoj git granci i pa\u017eljivo provjeriti razlike prije spajanja.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"najcesce-greske-pri-instalaciji-i-kako-ih-rijesiti\" class=\"wp-block-heading\">Naj\u010de\u0161\u0107e gre\u0161ke pri instalaciji i kako ih rije\u0161iti<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Problem<\/th><th>Uzrok<\/th><th>Rje\u0161enje<\/th><\/tr><\/thead><tbody><tr><td>Klase se ne primjenjuju na elemente<\/td><td>CSS datoteka s <code>@import \"tailwindcss\"<\/code> nije uvezena u root komponentu<\/td><td>Provjerite import u <code>layout.tsx<\/code>, <code>main.tsx<\/code> ili <code>index.html<\/code><\/td><\/tr><tr><td><code>Cannot find module 'tailwindcss'<\/code><\/td><td>Paket nije instaliran ili je pokrenut u krivom direktoriju<\/td><td>Pokrenite <code>npm install<\/code> ponovno unutar root foldera projekta<\/td><\/tr><tr><td>Stara v3 konfiguracija ne radi u v4 projektu<\/td><td>Mje\u0161anje uputa iz razli\u010ditih verzija dokumentacije<\/td><td>Koristite <code>@import \"tailwindcss\"<\/code> i <code>@theme<\/code>, ili uvezite stari config preko <code>@config<\/code><\/td><\/tr><tr><td>Stilovi rade lokalno, ali ne na produkciji<\/td><td>Build proces nije pokrenut prije deploya<\/td><td>Provjerite generira li <code>npm run build<\/code> finalnu CSS datoteku<\/td><\/tr><tr><td>IntelliSense ne predvi\u0111a Tailwind klase u editoru<\/td><td>Ekstenzija nije instalirana ili workspace nije prepoznat<\/td><td>Instalirajte &#8220;Tailwind CSS IntelliSense&#8221; i restartajte VS Code<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"korisni-alati-za-svakodnevni-rad\" class=\"wp-block-heading\">Korisni alati za svakodnevni rad<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tailwind CSS IntelliSense<\/strong> \u2014 slu\u017ebena VS Code ekstenzija s autocomplete, linting i hover pregledom vrijednosti klasa<\/li>\n\n\n\n<li><strong>prettier-plugin-tailwindcss<\/strong> \u2014 automatski sortira utility klase u dosljedan redoslijed prilikom formatiranja<\/li>\n\n\n\n<li><strong>Tailwind Play<\/strong> \u2014 online playground za brzo isprobavanje ideja bez lokalnog projekta<\/li>\n\n\n\n<li><strong>Headless UI \/ Tailwind UI<\/strong> \u2014 gotovi, pristupa\u010dni komponentni obrasci koji se uklapaju u Tailwind sustav<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"najcesca-pitanja\" class=\"wp-block-heading\">Naj\u010de\u0161\u0107a pitanja<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Treba li mi React ili neki drugi framework da koristim Tailwind CSS?<\/strong> Ne. Tailwind radi s obi\u010dnim HTML-om, bilo kojim frameworkom (React, Vue, Svelte) i bilo kojim CMS-om koji generira HTML, uklju\u010duju\u0107i WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Koja je razlika izme\u0111u Tailwind CSS-a i Bootstrap-a?<\/strong> 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\u0107i uklanjanju neiskori\u0161tenih klasa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Mogu li koristiti Tailwind CSS bez Node.js-a?<\/strong> Da. Postoji standalone CLI izvr\u0161na datoteka koja ne zahtijeva Node.js niti npm, dostupna direktno s GitHub releasea projekta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Utje\u010de li Tailwind CSS na brzinu u\u010ditavanja stranice?<\/strong> Generalno pozitivno \u2014 Tailwind generira samo CSS koji se stvarno koristi, \u0161to rezultira manjim datotekama i br\u017eim Core Web Vitals metrikama u odnosu na velike, neiskori\u0161tene CSS bibilioteke.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Kako nadograditi postoje\u0107i projekt s Tailwind v3 na v4?<\/strong> Koristite slu\u017ebeni alat <code>npx @tailwindcss\/upgrade<\/code>, koji automatski migrira CSS, JavaScript konfiguraciju i template datoteke. Preporu\u010dujemo testiranje u zasebnoj git grani prije spajanja u glavnu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Radi li Tailwind CSS dobro s WordPress-om?<\/strong> Da. CSS se kompajlira tijekom build procesa i uklju\u010duje u temu ili headless frontend, \u0161to je \u010dest pristup kod decoupled arhitektura gdje WordPress slu\u017ei kao backend a frontend je razvijen zasebno.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"trebate-li-produkcijski-next-js-setup-bez-gubljenja-vremena-na-konfiguraciju\" class=\"wp-block-heading\">Trebate li produkcijski Next.js setup bez gubljenja vremena na konfiguraciju?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Postavljanje Tailwind CSS-a je jednostavno, ali pretvaranje toga u stabilan, brz i SEO-optimiziran produkcijski sustav tra\u017ei vi\u0161e od jedne instalacije. Ako razvijate <a href=\"\/usluge\/web-aplikacije\">web aplikaciju<\/a> ili <a href=\"\/usluge\/izrada-web-stranica\">web stranicu<\/a> i \u017eelite da arhitektura, performanse i struktura komponenti budu rije\u0161ene odmah ispravno, <a href=\"\/kontakt\">javite nam se<\/a> \u2014 rado prolazimo kroz va\u0161 projekt i predla\u017eemo konkretan sljede\u0107i korak.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tailwind CSS mo\u017eete postaviti u radni projekt za manje od pet minuta, bez obzira radite&#8230;<\/p>\n","protected":false},"author":1,"featured_media":508,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/posts\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":2,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"predecessor-version":[{"id":510,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/posts\/507\/revisions\/510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/media\/508"}],"wp:attachment":[{"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/masterymesh.com\/blog\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}