Tailwind CSS jednoduše | Vrealmatic Wiki

Instalace Tailwind (v4) css pro NodeJS Handlebars

Předpoklady:

NodeJS v22 a vyšší
ExpressJS v5 a vyšší (npm install express)
express-handlebars v8 a vyšší (npm install express-handlebars)

Postup instalace

Instalace Tailwind CSS balíčku
```
npm install -D @tailwindcss/cli
```

Konfigurace pro Tailwind CSS build

Vytvořte soubor src/input.css s obsahem:
```
@import "tailwindcss";
```

Vložení příkazu pro build CSS do sekce scripts aplikačního souboru package.json

"scripts": {
    "build:css": "npx @tailwindcss/cli -i ./src/input.css -o ./public/css/style.css --watch",
(další příkazy ...)
}

Spuštění buildu CSS souboru

Z root složky projektu v terminálu spustíme:

npm run build:css

Příkaz výše, dle výchozí filozofie Tailwind v4, vygeneruje jeden globální CSS soubor, který pokrývá všechny stránky. Segmentovat css pro individuální typy stránek lte prostřednictvím segmentační konfigurace.

Segmentace CSS souborů dle typu stránek

Ačkoli Tailwind CSS začleňuje na základě v šablonách použitých class elementů pouze skutečně používané styly, můžeme jeden css soubor pro celý web dále segmentovat, a to na individuální css soubory pro kategorizované typúy stránek. To je možné prostřednictvím konfiguračních souborů s prostým rozčleněním šablon, viz níže

Oddělení css souboru pro web a administraci

V src/input vytvoříme dva soubory home.css a admin.css. Obsah obou dvou bude stejný:
```
@import "tailwindcss";
```
V rootu, pro každý typ stránky vytvoříme individuální konfigurační soubor:
- tailwind.home.config.js
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./views/home/**/*.hbs"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
  Tento soubor odkazuje na .hbs šablony v /views/home a bude pro ně buildovat output do souboru public/css/home.css
- tailwind.admin.config.js
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./views/admin/**/*.hbs"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
  Tento soubor odkazuje na .hbs šablony v /views/admin a bude pro ně buildovat output do souboru public/css/admin.css

V package.json si nastavíme scripty pro build css souboru pro jednotlivé stránky:

"scripts": {
    "build:home": "npx @tailwindcss/cli -c tailwind.home.config.js -i ./src/input/home.css -o ./public/css/home.css --watch",
    "build:admin": "npx @tailwindcss/cli -c tailwind.admin.config.js -i ./src/input/admin.css -o ./public/css/admin.css --watch"
}

Provedení buildu
Build provádíme pomocí příkazů:
- npm run build:home
- npm run build:admin

Build ALL utilita

Abychom mohli buildovat css soubory pro veškeré stránky současně, lze nainstalovat a nakonfigurovat utilita npm-run-all

Instalace utility
```
npm install -D npm-run-all
```

Konfigurace utility V package.json doplňte scripty pro build css souboru o příkaz "build:all":

"scripts": {
    "build:home": "npx @tailwindcss/cli -c tailwind.home.config.js -i ./src/input/home.css -o ./public/css/home.css --watch",
    "build:admin": "npx @tailwindcss/cli -c tailwind.admin.config.js -i ./src/input/admin.css -o ./public/css/admin.css --watch",
    "build:all": "npm-run-all --parallel build:home build:admin"
}

Spusťte příkaz
```
npm run build:all
```

Opakovaně používané styly

Pro opakovaně používané styly lze použít vlastní Tailwind @layer components nebo config pro custom classes