Gratulujeme!

Gratulujeme, dokončili jste kurz Tailwindu! Upravili jste s ním vzhled celého webu, pro telefony i počítače, ve světlém i tmavém režimu.

Co všechno jste se v kurzu naučili:

• Tailwind je CSS framework plný malých utility tříd. Místo psaní pravidel dáváte prvkům třídy a Tailwind vytvoří CSS přesně pro ty třídy, které najde ve vašich souborech. Zapíná ho @import "tailwindcss"; a jeho základní styly, Preflight, odstraní výchozí styly prohlížeče.
• Barvy z palety (bg-orange-500, text-stone-800), i poloprůhledné (bg-black/50), a text: velikost, tloušťku, výšku řádku, zarovnání, mezery mezi písmeny a rodinu písma.
• Škálu mezer, ve které je jeden krok 4 px: polstrování, okraje, šířku a výšku, maximální šířky a hodnoty v hranatých závorkách, když potřebujete něco mimo škálu.
• Rámečky, zaoblené rohy, stíny, průhlednost a obrázky oříznuté pomocí object-cover.
• Rozvržení flexboxem a mřížkou (flex, justify-between, items-center, gap-6, grid-cols-3) a umisťování prvků (relative, absolute, sticky top-0).
• Varianty pro stavy, třeba hover:, focus:, active:, disabled: a group-hover:, a plynulé přechody.
• Responzivní design: nejdřív mobil, pak breakpointy sm:, md:, lg: a xl:.
• Tmavý režim s dark:, který zapíná třída dark na prvku html.
• Přizpůsobení Tailwindu: vlastní barvy a písma v @theme a vlastní třídy s @apply a @utility.

Tailwind ve vlastním počítači. Prohlížeče @import "tailwindcss"; nerozumí. Na našem webu se váš style.css převádí na obyčejné CSS při každém kliknutí na Spustit. Když ve svém počítači oba soubory jen otevřete, stránka bude bez stylů. Pomoct si můžete dvěma způsoby.

Na rychlé pokusy: Play CDN. V head nahraďte odkaz na style.css tímto skriptem a celý obsah style.css vložte do prvku style s atributem type="text/tailwindcss" (tady je zkrácený):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
	@import "tailwindcss";
	@custom-variant dark (&:where(.dark, .dark *));

	@theme {
		--color-brand-500: #f97316;
	}
</style>

Skript je samotný Tailwind, který běží přímo v prohlížeči: při každém otevření stránky najde její třídy a vytvoří pro ně CSS. Na zkoušení je to šikovné, ale podle dokumentace Tailwindu je Play CDN určený jen pro vývoj, ne pro skutečný web: každý návštěvník by musel stáhnout celý Tailwind a čekat, než CSS vznikne.

Pro skutečný web: nástroj na sestavení. Hotové CSS předem vytvoří program ve vašem počítači, stejně jako to dělá náš web, a návštěvníci dostanou obyčejný soubor CSS. Potřebujete k tomu Node.js, se kterým přijde i npm, program na instalaci balíčků (hotových programů a knihoven), a terminál (příkazový řádek). Pro stránku, jako je ta vaše, je nejjednodušší Tailwind CLI (program pro příkazový řádek). Otevřete terminál ve složce se stránkou a spusťte:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i style.css -o output.css --watch

První příkaz nainstaluje Tailwind do složky. Druhý přečte style.css (-i, z anglického input, vstup), vyhledá třídy v souborech ve složce a hotové CSS zapíše do output.css (-o, output, výstup). Díky --watch pak běží dál a CSS vytvoří znovu pokaždé, když nějaký soubor uložíte. V index.html připojte místo style.css soubor output.css a stránku otevřete v prohlížeči jako obvykle.

Větší projekty, hlavně ty s JavaScriptem, často používají Vite, nástroj, který připraví skripty, styly i obrázky celého webu. Tailwind je ve Vite zásuvný modul (plugin). Nový projekt založíte takhle (Vite se zeptá na pár otázek: pro čisté HTML, CSS a JavaScript zvolte framework Vanilla a variantu JavaScript, a když nabídne, že projekt hned nainstaluje a spustí, odpovězte No, abyste do něj nejdřív mohli přidat Tailwind):

npm create vite@latest utulek-fousek
cd utulek-fousek
npm install tailwindcss @tailwindcss/vite

Pak plugin přidejte do souboru vite.config.js (pokud ve složce projektu není, vytvořte ho):

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
	plugins: [tailwindcss()],
});

Na začátek souboru CSS projektu (v šabloně Vanilla je to src/style.css) napište @import "tailwindcss"; a projekt spusťte příkazem npm run dev. Ten vypíše adresu vaší stránky, třeba http://localhost:5173/. Oba způsoby krok za krokem popisuje dokumentace Tailwindu (tailwindcss.com/docs) v části Installation, a to i pro různé frameworky.

Pomocníci. Pokud píšete kód ve Visual Studio Code, nainstalujte si rozšíření Tailwind CSS IntelliSense: při psaní vám bude nabízet názvy tříd, a když na třídu najedete myší, ukáže, jaké CSS vytváří. A prettier-plugin-tailwindcss je plugin pro Prettier, program, který uklízí kód: třídy v každém atributu class seřadí do stejného pořadí, takže se lépe čtou.

Uložte si stránku. Stejně jako na konci kurzu CSS si v počítači vytvořte složku a uložte do ní kód z index.html jako index.html a kód ze style.css jako style.css. Se styly ji pak uvidíte jedním ze dvou způsobů popsaných výše. Pozor na obrázky: adresa jako /learn/tailwind/cat-orange.svg funguje jen na našem webu. Použijte celou adresu https://www.startcoder.com/learn/tailwind/cat-orange.svg, nebo obrázky uložte do stejné složky a napište jen jejich názvy.

Kam dál? Když budete potřebovat třídu, kterou jste se nenaučili, najděte ji v dokumentaci Tailwindu: její vyhledávání najde třídy i podle vlastnosti CSS, kterou znáte, třeba justify-content. A dalším krokem na cestě k tvorbě webů je JavaScript. HTML dává stránce obsah, CSS a Tailwind vzhled a JavaScript ji oživí: dokáže reagovat na kliknutí, jako krátký skript vašeho tlačítka pro tmavý režim, měnit obsah stránky nebo pracovat s daty z formuláře. Pokračujte kurzem JavaScriptu.