Lekce 4 — Nářadí: npm, Vite a Tailwind

Webové aplikace · navazuje na lekci 3 (CSS)

Zatím jste web dělali tak, jak se dělal před dvaceti lety: složka, v ní index.html a styl.css, dvojklik a prohlížeč to zobrazí. Pořád to funguje a pořád je to dobrý způsob, jak se učit. Skutečné webové projekty ale vypadají jinak. Stojí na stovkách balíčků, které napsal někdo jiný, a na nástrojích, které běží celou dobu, co na projektu pracujete.

Dnešní lekce je hlavně o nářadí. Nainstalujete si ho, naučíte se ho spouštět a vyzkoušíte si na něm Tailwind — jeden z nejpoužívanějších způsobů, jak dnes psát CSS. Kódu napíšete málo. Změní se hlavně to, jak s ním pracujete.

1. Node.js a npm

JavaScript je programovací jazyk, který běží v prohlížeči. Zatím jste ho nepotkali, ale potkáte. Před lety někdo vzal JavaScript z prohlížeče a udělal z něj program, který běží přímo na počítači, bez prohlížeče — to je Node.js. Skoro všechny nástroje pro webaře jsou napsané v JavaScriptu, takže ke spuštění potřebují Node.

npm (Node Package Manager) je program, který se nainstaluje s Node a umí stahovat balíčky. Balíček je kus kódu, který někdo napsal a zveřejnil, aby ho mohli používat ostatní. Na npmjs.com jich jsou miliony. Představte si obchod s aplikacemi v mobilu, jen místo aplikací jsou tam stavební díly pro programy.

Dnes JavaScript psát nebudete. Node vám jen spustí nástroje.

Instalace (jednou na počítač): na nodejs.org stáhněte verzi označenou LTS (Long Term Support — stabilní, podporovaná roky) a nainstalujte s výchozím nastavením. Pak to ověřte, viz kapitola 2.

2. Terminál

Nástroje pro webaře nemají okna a tlačítka. Ovládají se příkazy, které píšete do terminálu. Ve VS Code ho otevřete v menu Terminal → New Terminal. Objeví se dole pod editorem.

Napište tam tyhle dva příkazy, po každém Enter:

node -v
npm -v

Čísla se u vás můžou lišit. Důležité je, že tam nějaká čísla jsou a že první začíná aspoň v22. Když místo toho vidíte chybu, čtěte dál.

Na začátku řádku terminálu je vždycky vidět složka, ve které právě jste, třeba PS C:\projekty\moje-stranka>. Na tom záleží: příkazy se vztahují k téhle složce.

3. Stažení základu

1. Zip rozbalte (pravý klik → Extrahovat vše). Neotvírejte soubory přímo ze zipu — Windows je pak otevřou z dočasné složky a vaše změny se ztratí.
2. Dejte složku někam, kde ji najdete, třeba do C:\projekty\.
3. Ve VS Code: File → Open Folder a vyberte složku moje-stranka — tu, ve které je přímo package.json.
4. VS Code se možná zeptá, jestli souborům ve složce důvěřujete (Trust the authors) — ano. A vpravo dole možná nabídne doporučené rozšíření Tailwind CSS IntelliSense — nainstalujte ho, bude se hodit.

Co ve složce najdete:

4. package.json — občanka projektu

{
  "name": "moje-stranka",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.3.3",
    "tailwindcss": "^4.3.3",
    "vite": "^8.3.1"
  }
}

Tohle je formát JSON — dvojice "jméno": hodnota ve složených závorkách. Dvě části jsou důležité:

• scripts — příkazy projektu. npm run dev spustí to, co je u "dev", tedy program vite. Každý projekt si je pojmenuje sám, ale dev a build najdete skoro všude.
• devDependencies — balíčky, které projekt potřebuje. „Dev“ znamená, že jsou potřeba jen při vývoji — jsou to nástroje, ne součást hotového webu. Hotový web je pak jen HTML a CSS.

Čísla verzí mají tři části: 8.3.1 = hlavní verze 8, menší verze 3, oprava 1. Změna první číslice znamená, že se něco může rozbít. Stříška v ^8.3.1 znamená „8.3.1 nebo novější, ale pořád osmička“.

5. npm install — stáhni, co projekt potřebuje

npm install

npm přečetl package.json, stáhl balíčky z internetu a uložil je do nové složky node_modules. (Hláška o funding je jen prosba autorů o příspěvek, nic po vás nechce.) Podívejte se do node_modules. Chtěli jsme tři balíčky, a dostali jsme přes třicet a kolem 50 MB. Proč? Vite a Tailwind taky stojí na balíčcích jiných lidí, ty zase na dalších… Říká se tomu strom závislostí. Tenhle projekt je malý. Skutečná webová aplikace mívá v node_modules stovky balíčků a stovky megabajtů.

package-lock.json si pamatuje přesnou verzi každého z nich. Díky tomu má celá třída přesně stejné verze, jako mám já, a když to funguje mně, funguje to i vám.

npm install se spouští jednou po stažení projektu, a pak znovu, jen když se změní package.json.

npm error code ENOENT
npm error syscall open
npm error path C:\projekty\package.json
npm error enoent Could not read package.json

6. npm run dev — vývojový server

npm run dev

Spustil se Vite — malý webový server, který běží na vašem počítači. Adresa localhost znamená „tenhle počítač“ a 5173 je číslo portu, na kterém server poslouchá. Podržte Ctrl a klikněte na adresu; otevře se prohlížeč s vaší stránkou.

Teď to hlavní: změňte v index.html text nadpisu a uložte (Ctrl+S). Prohlížeč se obnoví sám. Žádné F5, žádné Ctrl+F5. Vite hlídá soubory a každou uloženou změnu do prohlížeče hned pošle.

Dokud server běží, terminál je obsazený — na nic dalšího v něm nereaguje. Server zastavíte klávesou Ctrl+C. Když potřebujete spustit jiný příkaz a server nechat běžet, otevřete druhý terminál tlačítkem +.

7. Tailwind — CSS přímo v HTML

Podívejte se, jak je v index.html nastylovaná hlavička:

<header class="bg-slate-800 text-white px-6 py-4">
    <h1 class="text-3xl font-bold">Moje stránka</h1>

Žádné pravidlo v styl.css. Místo toho má každý prvek hromadu malých tříd, a každá třída dělá právě jednu věc z CSS. V lekci 3 byste totéž napsali takhle:

header {
    background-color: #1e293b;   /* bg-slate-800 */
    color: white;                /* text-white  */
    padding: 16px 24px;          /* px-6 py-4   */
}

Tailwind je balík tisíců takových hotových tříd. Vy je jen skládáte. Nejčastější:

Velikosti mají stupnici: číslo × 4 px. p-1 = 4 px, p-4 = 16 px, p-8 = 32 px. Barvy mají jméno a odstín od 50 (skoro bílá) do 950 (skoro černá): slate-100 je světle šedá, slate-800 tmavě šedomodrá, sky-300 světle modrá. Celá paleta je na tailwindcss.com/docs/colors. A pozor: text- znamená podle toho, co následuje, buď velikost (text-xl), barvu (text-white), nebo zarovnání (text-center).

Předpony říkají, kdy třída platí:

• hover:text-white — jen když je nad prvkem myš. V menu v základu to už je.
• md:text-3xl — jen na obrazovce široké aspoň 768 px (medium). Bez předpony platí třída všude, s md: ji na větších obrazovkách přebijete. Zápis class="text-xl md:text-3xl" tedy znamená „na mobilu menší nadpis, na počítači větší“. Vyzkoušíte to zúžením okna, nebo v nástrojích prohlížeče (F12) klávesou Ctrl+Shift+M, která přepne na zobrazení jako na mobilu.

Obyčejné CSS psát pořád můžete. Cokoliv dáte do src/styl.css pod řádek s @import, funguje přesně jako v lekci 3. Obojí jde dohromady.

8. Přidání balíčku: vlastní písmo

Zatím jste jen instalovali, co projekt už měl. Teď přidáte balíček sami — písmo Inter, které umí i českou diakritiku:

npm install @fontsource-variable/inter

Podívejte se do package.json. Přibyla nová sekce, dependencies bez dev. Písmo totiž není nástroj na vývoj. Bude součástí hotového webu a návštěvník ho bude stahovat.

V src/styl.css písmo připojte a řekněte Tailwindu, ať ho používá jako výchozí:

@import "tailwindcss";
@import "@fontsource-variable/inter";

@theme {
    --font-sans: "Inter Variable", sans-serif;
}

@theme je místo, kde se Tailwindu mění výchozí hodnoty — písmo, barvy, velikosti. Uložte a podívejte se do prohlížeče.

9. npm run build — hotový web

Vývojový server je pro vás, ne pro návštěvníky. Když je web hotový, zastavte server (Ctrl+C) a spusťte:

npm run build

Vznikla složka dist (distribution). Je v ní hotový web: obyčejné HTML a CSS, které by se nahrálo na skutečný server. Otevřete si to CSS:

• Je na jednom dlouhém řádku a bez mezer — zbytečné znaky Vite vyhodil, aby byl soubor menší.
• Má jen kolem 6 kB. Tailwind má tisíce tříd, ale do dist se dostaly jen ty, které na stránce opravdu používáte.
• Divná písmena ve jménu (index-wDGxWBxt.css) se změní pokaždé, když se změní obsah. Pamatujete si z lekce 3, že si prohlížeč staré CSS drží v mezipaměti a vy musíte mačkat Ctrl+F5? Tohle je řešení: nová verze má nové jméno, a prohlížeč tak nemůže použít starou.

Hotový web si prohlédnete příkazem npm run preview (adresa bude http://localhost:4173). Dvojklik na dist/index.html nefunguje ze stejného důvodu jako v pasti č. 4.

Pro přehled:

10. Úkoly

Odevzdává se složka projektu zabalená do zipu, bez node_modules a bez dist. Já si ji rozbalím, spustím npm install a npm run dev, a musí to fungovat.

Shrnutí — co byste měli umět říct vlastními slovy

• Co je Node.js, co je npm a co je balíček.
• K čemu je package.json a k čemu package-lock.json.
• Co je node_modules, proč je tak velká a proč se nikam neposílá.
• Rozdíl mezi dependencies a devDependencies.
• Co dělá npm run dev a proč stránka najednou nefunguje dvojklikem.
• Co znamenají třídy p-4, mx-auto, text-xl a md:text-3xl — jako CSS z lekce 3.
• Proč Tailwind dává styly do HTML, když jsme minule říkali, že tam nepatří — a co to stojí.
• Co je ve složce dist a proč má CSS soubor divné jméno.