![\"Tailwind](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/06\/Tailwind-baner_OK.jpg\" "\\"\\"")
<\/p>\n<\/p>\n
Tailwind CSS to framework, kt\u00f3ry umo\u017cliwia tworzenie layoutu strony z poziomu template HTML, bez konieczno\u015bci tworzenia arkuszy styl\u00f3w.<\/p>\n
W przeciwie\u0144stwie do takich narz\u0119dzi jak Bootstrap, opisuje on element wizualnie, a nie funkcjonalnie. W przypadku Bootstrap dla przycisku u\u017cyjesz klasy btn<\/span>, kt\u00f3ra opisuje padding<\/span>, border-radius<\/span> i pozosta\u0142e aspekty wizualne Twojego elementu. Dla Tailwind CSS musisz znale\u017a\u0107 klasy CSS odpowiadaj\u0105ce za poszczeg\u00f3lne w\u0142asno\u015bci wizualne, np. px-1 py-0.5 rounded<\/span>. Mo\u017cna by nawet stwierdzi\u0107, \u017ce Tailwindowi bli\u017cej jest do inline\u2019owych styl\u00f3w HTML.<\/p>\n W ramach tego poradnika utworzysz projekt HTML i CSS, do kt\u00f3rego dodasz Tailwind CSS. Dowiesz si\u0119 te\u017c, jak z jego pomoc\u0105 tworzy\u0107 nowoczesne strony WWW z poziomu HTML.<\/p>\n Poradnik kierowany jest do os\u00f3b pracuj\u0105cych z technologiami frontendowymi, kt\u00f3re chc\u0105 uporz\u0105dkowa\u0107 sw\u00f3j kod CSS i przyspieszy\u0107 tworzenie nowoczesnych stron WWW.<\/p>\n Dzi\u0119ki niniejszemu poradnikowi dowiesz si\u0119, jak doda\u0107 Tailwind CSS do projektu przy u\u017cyciu PostCSS. Nast\u0119pnie poka\u017c\u0119 Ci, jak skonfigurowa\u0107 i zoptymalizowa\u0107 produkcyjn\u0105 wersj\u0119 Tailwinda. W tym poradniku nie zakodujesz \u017cadnego komponentu, to b\u0119dzie Twoje zadanie domowe.<\/p>\n W czasach kiedy Vue, React, Angular nie by\u0142y tak popularne, a w \u015bwiecie raczkuj\u0105cego frontendu kr\u00f3lowa\u0142o jQuery, kawa\u0142ek tortu popularno\u015bci przypad\u0142 tak\u017ce Bootstrapowi.<\/p>\n Bootstrap dostarcza zbi\u00f3r gotowych ostylowanych komponent\u00f3w UI. Znajdziesz w nim kontrolki formularzy, alerty, cardy, modale i wiele, wiele innych element\u00f3w interfejsu. U\u017cytkownik chc\u0105c doda\u0107 alert do strony WWW korzysta z klas alert alert-primary<\/span><\/p>\n Gdyby chcie\u0107 u\u017cy\u0107 przycisku, by\u0142aby to klasa btn btn-primary<\/span>.<\/p>\n Bootstrap sprawdza si\u0119, je\u017celi \u201ena szybko\u201d chcesz stworzy\u0107 panel administratora lub prost\u0105 stron\u0119 WWW. Znacznie gorzej wygl\u0105da to w przypadku nowoczesnych stron WWW z rozbudowanym designem.<\/p>\n Tu na scen\u0119 wkracza Tailwind CSS, kt\u00f3ry mo\u017cna por\u00f3wna\u0107 do pisania inline\u2019owych styl\u00f3w w HTML. W przeciwie\u0144stwie do nich, ma on jednak znacznie wi\u0119ksze mo\u017cliwo\u015bci i jest bardziej przyjazny u\u017cytkownikowi.<\/p>\n Tailwind jest zbiorem klas, dzi\u0119ki kt\u00f3remu zarz\u0105dzasz w\u0142a\u015bciwo\u015bciami CSS z poziomu HTMLa.<\/p>\n<\/div>\n Co to oznacza?<\/p>\n W przypadku Bootstrapa przycisk tworzysz korzystaj\u0105c z klas btn btn-primary<\/span>. Tworz\u0105c style dla przycisku w Tailwind napiszesz nast\u0119puj\u0105cy kod:<\/p>\n Przy u\u017cyciu Tailwind CSS opiszesz, jak ma wygl\u0105da\u0107 nasz przycisk, a nie jak w Bootstrap, gdzie okre\u015blisz go jako .btn<\/span><\/p>\n Na pierwszy rzut oka wida\u0107, \u017ce kod z u\u017cyciem Tailwinda b\u0119dzie d\u0142u\u017cszy, jednak w \u015bwiecie nowoczesnego frontendu przycisk i tak b\u0119dzie jakim\u015b komponentem, kt\u00f3ry b\u0119dzie u\u017cywany wielokrotnie.<\/p>\n Korzystaj\u0105c z Visual Code Studio zainstaluj dodatek Tailwind CSS IntelliSense<\/a>. Przy\u015bpieszy on prac\u0119 z Tailwind dzi\u0119ki funkcji podpowiadania nazw klas.<\/p>\n Dodatek Tailwind CSS IntelliSense potrafi tak\u017ce pod\u015bwietli\u0107 potencjalne b\u0142\u0119dy w CSS i HTML oraz rozwija\u0107 implementacj\u0119 css wybranej klasy.<\/p>\n Edytory kodu od JetBrains (WebStorm, PhpStorm) obs\u0142uguj\u0105 Tailwind CSS bez konieczno\u015bci instalacji dodatk\u00f3w.<\/p>\n Na potrzeby poradnika stworzysz bardzo prosty projekt, w kt\u00f3rym skorzystasz z Tailwind CSS. Utw\u00f3rz katalog tailwind<\/span>, a nast\u0119pnie dodaj do niego pliki index.html, style.css<\/span> i postcss.config.js<\/span>.<\/p>\n W projekcie b\u0119dziesz u\u017cywa\u0107 npm.<\/span> Otw\u00f3rz terminal i utw\u00f3rz plik package.json<\/span> wpisuj\u0105c w terminalu:<\/p>\n Struktura Twoje katalogu powinna wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n index.html Przed przej\u015bciem do kolejnego kroku dodaj do pliku .html<\/span> nast\u0119puj\u0105cy kod:<\/p>\n Tailwind CSS jest dost\u0119pny jako paczka npm<\/span>. Otw\u00f3rz terminal i zainstaluj tailwindcss<\/span> wpisuj\u0105c:<\/p>\n Przy okazji instalacji tailwindcss<\/span> zainstalowana zosta\u0142a te\u017c paczka postcss<\/span>. Otw\u00f3rz plik postscss.config.js<\/span>, kt\u00f3ry utworzony zosta\u0142 w kroku 1 i dodaj do niego nast\u0119puj\u0105cy kod w celu konfiguracji narz\u0119dzia PostCSS:<\/p>\n Zanim zaczniesz korzysta\u0107 z Tailwinda, musisz go jeszcze doda\u0107 do pliku style.css<\/span>, otw\u00f3rz ten plik i dodaj do niego nast\u0119puj\u0105cy kod:<\/p>\n Tailwind CSS dzi\u0119ki PostCSS zamieni ten kod na CSS.<\/p>\n Uwaga: W trakcie instalacji tailwindcss<\/span>, npm<\/span> utworzy plik package-lock.json<\/span>. Jest on generowany automatycznie i nie nale\u017cy w nim dokonywa\u0107 zmian r\u0119cznie.<\/p>\n<\/div>\n Tailwind CSS korzysta z narz\u0119dzia PostCSS. Ja na co dzie\u0144 w projektach korzystam z Webpacka, jednak na potrzeby tego poradnika, poka\u017c\u0119 Ci jak zrobi\u0107 to w postcss-cli<\/span>.<\/p>\n Otw\u00f3rz terminal i zainstaluj postcss-cli<\/span> wpisuj\u0105c:<\/p>\n Nie zamykaj terminala. U\u017cyj postcss-cli<\/span>, \u017ceby zamieni\u0107 kod z dyrektywami Tailwind CSS na zrozumia\u0142y dla przegl\u0105darek kod CSS wpisuj\u0105c w terminalu:<\/p>\n Uwaga: Zauwa\u017c, \u017ce korzystasz z komendy npx<\/span>, a nie npm<\/span> do uruchomienia postcss. npx<\/span> jest domy\u015blnie instalowany z npm<\/span> i pozwala uruchamia\u0107 polecenia ze zdalnego lub lokalnego pakietu npm<\/span>.<\/p>\n<\/div>\n W projekcie powinien pojawi\u0107 si\u0119 plik tailwind.css<\/span> ze wszystkimi dost\u0119pnymi klasami CSS.<\/p>\n Bonus<\/span>. Otw\u00f3rz plik package.json. Znajd\u017a sekcj\u0119 scripts<\/span> i umie\u015b\u0107 w niej skrypt build<\/span>:<\/span><\/p>\n Otw\u00f3rz terminal i zbuduj ponownie plik tailwind.css<\/span> wpisuj\u0105c:<\/span><\/p>\n Plik tailwind.css<\/span> zawiera teraz wszystkie dost\u0119pne klasy CSS i ma rozmiar oko\u0142o 4,03 MB, co raczej nie jest zalecane w kontek\u015bcie optymalizacji stron WWW. Oczywi\u015bcie jako nowoczesne narz\u0119dzie Tailwind CSS mo\u017ce zosta\u0107 poddany optymalizacji.<\/p>\n Otw\u00f3rz terminal i utw\u00f3rz plik konfiguracyjny tailwind.config.js<\/span> wpisuj\u0105c:<\/p>\n W katalogu projektu pojawi si\u0119 plik tailwind.config.js<\/span>. Do sekcji purge dodaj \u2018.\/*.html\u2019<\/span>. Dzi\u0119ki temu Tailwind przeszuka pliki html i zbuduje plik tailwind.css<\/span> tylko z u\u017cytymi przez Ciebie klasami.<\/p>\n Otw\u00f3rz terminal i zbuduj plik tailwind.css<\/span> wpisuj\u0105c:<\/span><\/p>\n Niestety plik nadal zawiera wszystkie klasy CSS. Dzieje si\u0119 tak dlatego, \u017ce opcja purge dzia\u0142a tylko w trybie produkcyjnym.<\/p>\n Otw\u00f3rz terminal i zainstaluj paczk\u0119 cross-env<\/span> wpisuj\u0105c:<\/p>\n Otw\u00f3rz plik package.json<\/span> i skonfiguruj sekcj\u0119 scripts:<\/p>\n Otw\u00f3rz terminal i zbuduj plik tailwind.css<\/span> wpisuj\u0105c:<\/p>\n W pliku tailwind.css<\/span> powinny znale\u017a\u0107 si\u0119 wy\u0142\u0105cznie tak zwane \u201eresety\u201d styl\u00f3w, kt\u00f3re nadpisuj\u0105 style przegl\u0105darki.<\/p>\n Tailwind CSS daje Ci nieograniczone mo\u017cliwo\u015bci tworzenia szablon\u00f3w i ponownego ich u\u017cywania w kolejnych projektach. Dzi\u0119ki temu szybko i \u0142atwo zbudujesz kolejn\u0105 stron\u0119 i jeszcze jedn\u0105, i jeszcze.<\/p>\n Wybieraj\u0105c Elastyczny Web Hosting<\/strong> nie musisz martwi\u0107 si\u0119 o zasoby na utrzymanie kolejnych witryn. Otrzymasz wysokie parametry gwarantowane, czyli 1 GHz CPU, 2 GB RAM oraz 50 GB NVMe,<\/strong> a je\u015bli w kt\u00f3rymkolwiek momencie Twoje strony b\u0119d\u0105 potrzebowa\u0107 wi\u0119cej, opcja elastycznego skalowania automatycznie, bez konieczno\u015bci kontaktu z supportem, przydzieli Ci dodatkowe zasoby. Zapewni\u0105 one dost\u0119pno\u015b\u0107 wszystkich Twoich witryn niezale\u017cnie od ich obci\u0105\u017cenia.<\/p>\n WYPR\u00d3BUJ HOSTING<\/strong><\/a><\/p>\n<\/div>\n Otw\u00f3rz plik tailwind.config.js<\/span>. Poza znan\u0105 Ci ju\u017c sekcj\u0105 purge<\/span> znajdziesz tu te\u017c sekcj\u0119 theme<\/span>. W sekcji theme<\/span> mo\u017cesz nadpisywa\u0107 i dodawa\u0107 nowe warto\u015bci do Tailwind CSS.<\/p>\n W sekcji theme<\/span> dodaj nowy kolor regal-blue<\/span> o warto\u015bci #2435a<\/span><\/p>\n Otw\u00f3rz terminal i zbuduj plik tailwind.css wpisuj\u0105c:<\/p>\n Otw\u00f3rz plik index.html<\/span> i przywitaj si\u0119 z Tailwind CSS:<\/p>\n Otw\u00f3rz plik index.html<\/span> w przegl\u0105darce, kt\u00f3ra powinna wyrenderowa\u0107 tekst w kolorze regal-blue.<\/p>\n Szczeg\u00f3\u0142y konfiguracji poszczeg\u00f3lnych opcji znajdziesz w dokumentacji Tailwind CSS<\/a>.<\/p>\n<\/span>Do kogo kierowany jest ten poradnik?<\/span><\/h2>\n
\r\n\t![\"opieka](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\")
\r\n<\/a>\r\n
\r\n
<\/div><\/span>Czego potrzebujesz?<\/span><\/h2>\n
\n
<\/span>Czego si\u0119 nauczysz?<\/span><\/h2>\n
<\/span>Tailwind nie jest kolejnym Bootstrapem<\/span><\/h2>\n
<div class="alert alert-primary"><\/div><\/code><\/pre>\n\n<button class=\u201dpy-1 px-0.5 rounded-md bg-blue-500 hover:bg-blue-600\u201d><\/button><\/code><\/pre>\n<\/span>Dodatek Tailwind CSS IntelliSense do VS Code<\/span><\/h2>\n
![\"strona](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/strona-glowna-Tailwind-300x150.png\" "\\"\\"")
<\/a><\/p>\n<\/span>Krok 1 \u2013 Struktura projektu<\/span><\/h2>\n
$npm init<\/code><\/pre>\n\n
\npackage.json
\npostscss.config.js
\nstyles.css<\/p>\n<\/div>\n<!DOCTYPE html>\n<html>\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n<link href="tailwind.css" rel="stylesheet">\n<title>Tailwind CSS<\/title>\n<\/head>\n<body>\n<\/body>\n<\/html><\/code><\/pre>\n<\/span>Krok 2 \u2013 Instalacja Tailwind CSS<\/span><\/h2>\n
$npm i -D tailwindcss@latest postcss@latest autoprefixer@latest<\/code><\/pre>\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n<\/code><\/pre>\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n<\/span>Krok 3 \u2013 Kompilacja Tailwind CSS<\/span><\/h2>\n
$npm i -D postcss-cli<\/code><\/pre>\nnpx postcss style.css -o tailwind.css<\/code><\/pre>\n\n"scripts": {\n\n "build": "postcss style.css -o tailwind.css"\n\n },<\/code><\/pre>\n$npm run build<\/code><\/pre>\n<\/span>Krok 4 \u2013 Optymalizacja Tailwind CSS<\/span><\/h2>\n
$ npx tailwindcss init<\/code><\/pre>\nmodule.exports = {\n purge: [\n '.\/*.html'\n ],\n darkMode: false, \/\/ or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n<\/code><\/pre>\n$npm run build<\/code><\/pre>\n![\"plik](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/plik-tailwind.css-300x173.png\" "\\"\\"")
<\/a><\/p>\n$npm i -D cross-env<\/code><\/pre>\n "scripts": {\n "build": "postcss style.css -o tailwind.css",\n "production": "cross-env NODE_ENV=production postcss style.css -o tailwind.css"\n }\n<\/code><\/pre>\n$npm run production<\/code><\/pre>\n![\"resety](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/resety-stylow-300x172.png\" "\\"\\"")
<\/a><\/p>\n\n<\/span>Krok 5 \u2013 Konfiguracja Tailwinds CSS<\/span><\/h2>\n
theme: {\n extend: {\n colors: {\n 'regal-blue': '#243c5a',\n }\n }\n}\n<\/code><\/pre>\n$npm run build<\/code><\/pre>\n<body>\n <h1 class="text-regal-blue">Hello Tailwind CSS<\/h1>\n<\/body>\n<\/code><\/pre>\n![\"Hello](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/tekst-w-kolorze-300x71.png\" "\\"\\"")
<\/a><\/p>\n
![\"dokumentacja](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/dokumentacja-300x169.png\" "\\"\\"")
<\/a><\/p>\n![\"dokumentacja](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/08\/dokumentacja-1-300x169.png\" "\\"\\"")
<\/a><\/p>\n