{"id":194,"date":"2025-03-10T13:19:37","date_gmt":"2025-03-10T12:19:37","guid":{"rendered":"https:\/\/blog.ctr24.co.pl\/?p=194"},"modified":"2025-03-11T09:42:09","modified_gmt":"2025-03-11T08:42:09","slug":"tailwindcss","status":"publish","type":"post","link":"https:\/\/blog.ctr24.co.pl\/?p=194","title":{"rendered":"Tailwindcss"},"content":{"rendered":"\n

Na podstawie https:\/\/www.youtube.com\/watch?v=lCxcTsOHrjo<\/a> i w\u0142asnego do\u015bwiadczenia<\/p>\n\n\n\n

Zainstalowa\u0107 Node.js <\/strong>wraz z npm<\/strong> (https:\/\/nodejs.org\/en\/download<\/a>) lub rozpakowa\u0107 (wersja zip) do systemu i doda\u0107 do zmiennych systemowych u\u017cytkownika \u015bcie\u017ck\u0119 (np: c:\\Moje_tools\\node-v22.14.0-win-x64)<\/p>\n\n\n\n

Sprawdzenie czy jest zainstalowany: npm -v<\/strong><\/p>\n\n\n\n

Instalacja tailwindcss: npx tailwindcss@3 init<\/strong>
Po wielu pr\u00f3bach doszed\u0142em do wniosku \u017ce w dokumentacji instalacji brakuje @3<\/strong>, bo bez tego by\u0142y b\u0142\u0119dy instalacji.
Wynikiem dzia\u0142ania powinien by\u0107 wygenerowany plik tailwind.config.js<\/strong>
W powsta\u0142ym pliku definiujemy gdzie znajduj\u0105 si\u0119 nasze pliki .html<\/strong>, by mog\u0142a je przeszukiwa\u0107 i uwzgl\u0119dni\u0107 u\u017cyte klasy.
<\/p>\n\n\n

\/** @type {import('tailwindcss').Config} *\/\r\nmodule.exports = {\r\n  content: ['.\/build\/**\/*.html'], \/\/ tu podajemy gdzie szukac naszych plik\u00f3w html\r\n  theme: {\r\n    extend: {},\r\n  },\r\n  plugins: [],\r\n}\r\n\r\n<\/pre><\/div>\n\n\n
Nale\u017cy przygotowa\u0107 plik styl\u00f3w wej\u015bciowych (np. .\/static\/css\/input.css, lub .src\/css\/input.css) w kt\u00f3rym importujemy style :
<\/p>\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\/* mozna tez doda\u0107 swoje wlasne style poni\u017cej *\/\n.moj-radial-blue {\n  background: radial-gradient( yellow, #2c5282);\n}\n\n<\/pre><\/div>\n\n\n
Nast\u0119pnie uruchamiamy polecenie generuj\u0105ce wyj\u015bciowy plik style.css<\/strong>.<\/p>\n\n\n
npx tailwindcss@3 -i .\/src\/input.css -o .\/build\/css\/style.css<\/pre><\/div>\n\n\n
Wygeneruje nam to plik w katalogu .build\/css\/style.css<\/strong>, ale mozemy wygenerowac w dowolnej lokalizacji i z dowolna nazwa. Generowanie jest jednokrotne.
W celu automatycznego \u015bledzenia zmian i generowania plik\u00f3w css z u\u017cytymi przez nas klasami nale\u017cy uruchomi\u0107 proces, kt\u00f3ry automatycznie wykrywa zmiany i uwzgl\u0119dnia je w pliku wyjsciowym.css
<\/p>\n\n\n
npx tailwindcss@3 -i .\/src\/input.css -o .\/build\/css\/style.css  --watch<\/pre><\/div>\n\n\n
\u015acie\u017ck\u0119 do pliku wyj\u015bciowego nale\u017cy zalinkowa\u0107 w docelowym pliku html<\/p>\n\n\n
!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n    <link rel=\"stylesheet\" href=\"css\/style.css\"><!-- dodajemy normalnie link do pliku.css -->\n<\/head>\n<body class=\"min-h-screen grid place-content-center radial-blue \"><\/pre><\/div>\n\n\n
Przygotowujemy skrypt u\u0142atwiaj\u0105cy uruchamiania tailwindcss.<\/p>\n\n\n
npm init -y<\/pre><\/div>\n\n\n
W powsta\u0142ym pliku package.json<\/strong> dopisujemy konfiguracj\u0119 do uruchamiania.<\/p>\n\n\n
{\n  \"name\": \"tailwindcss\",\n  \"version\": \"1.0.0\",\n  \"main\": \"tailwind.config.js\",\n  \"scripts\": {\n    \"tailwind\": \"npx tailwindcss@3 -i .\/src\/input.css -o .\/build\/css\/style.css --watch\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"description\": \"\"\n}\n<\/pre><\/div>\n\n\n
Nast\u0119pnie w celu uruchomienia wpisujemy w bash\/shell:<\/p>\n\n\n
npm run tailwind<\/pre><\/div>\n\n\n
Przydatne i polecone dodatki do VSCode:
Tailwindcss Intellisense <\/strong>–  https:\/\/marketplace.visualstudio.com\/items?itemName=bradlc.vscode-tailwindcss<\/a>
Inline fold<\/strong> – https:\/\/marketplace.visualstudio.com\/items?itemName=moalamri.inline-fold<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Na podstawie https:\/\/www.youtube.com\/watch?v=lCxcTsOHrjo i w\u0142asnego do\u015bwiadczenia Zainstalowa\u0107 Node.js wraz z npm (https:\/\/nodejs.org\/en\/download) lub rozpakowa\u0107 (wersja zip) do systemu i doda\u0107<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-194","post","type-post","status-publish","format-standard","hentry","category-tips"],"_links":{"self":[{"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=\/wp\/v2\/posts\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194"}],"version-history":[{"count":13,"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=\/wp\/v2\/posts\/194\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ctr24.co.pl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}