# Tailwind CSS WordPress-témában

> A Tailwind CSS utility-osztályos CSS-keretrendszer: telepítés Vite-pluginnal vagy CLI-vel, a CSS-alapú beállítás (@theme, @source), és hogyan találja meg az osztályokat PHP- és Blade-sablonokban.

A [Tailwind CSS](https://tailwindcss.com/) utility-osztályos keretrendszer: a stílust apró osztályokkal (`text-3xl`, `font-bold`) írod közvetlenül a HTML-be, a Tailwind pedig csak azokhoz az osztályokhoz készít CSS-t, amelyeket a projektedben ténylegesen használtál. WordPressben ez témához és bővítmény felületéhez egyaránt jó. A beállítás a mai verziókban CSS-fájlban van, nem külön JavaScript-fájlban.

## Hogyan működik

A Tailwind a forrásfájlokat sima szövegként olvassa végig, és megkeresi azokat a szavakat, amelyek osztálynévnek látszanak. Nem értelmezi a kódot, ezért a PHP-ban vagy Bladeben összefűzött osztálynevet nem látja. A hivatalos doksi szerint teljes osztálynevet írj:

```php title="Helyes és helytelen"
<?php // Rossz: a text-red-600 szöveg sehol nincs meg egyben ?>
<div class="text-<?= $hiba ? 'red' : 'green' ?>-600"></div>

<?php // Jó: mindkét osztály teljes egészében szerepel ?>
<div class="<?= $hiba ? 'text-red-600' : 'text-green-600' ?>"></div>
```

## Telepítés Vitével

A [Vite](https://hub.hellowp.io/hu/knowledge-base/developer-tools/vite/) projektekhez a Tailwind saját pluginja a legegyszerűbb út.

1. Telepítsd a csomagokat:

   ```bash title="Terminál"
   npm install tailwindcss @tailwindcss/vite
   ```

2. Add hozzá a plugint a Vite beállításához:

   ```javascript title="vite.config.js"
   import { defineConfig } from 'vite';
   import tailwindcss from '@tailwindcss/vite';

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

3. Importáld a Tailwindet a fő CSS-fájlodban:

   ```css title="resources/css/app.css"
   @import "tailwindcss";
   ```

4. Indítsd a buildet (`npm run dev` vagy a `package.json` szerinti parancs), és töltsd be a lefordított CSS-t az oldalon.

A Vite és a WordPress összekötéséről (manifest, `wp_enqueue_script_module()`) a [Vite](https://hub.hellowp.io/hu/knowledge-base/developer-tools/vite/) cikk szól.

## Telepítés CLI-vel

Ha nincs Vite a projektben, a Tailwind saját parancssori eszköze is elég:

```bash title="Terminál"
npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
```

Az `input.css` tartalma ugyanaz az `@import "tailwindcss";` sor. A kimeneti fájlt a témád `functions.php`-jából töltsd be a szokásos `wp_enqueue_style()` hívással. A `--watch` mentés után újraépít.

## Beállítás CSS-ben: @theme

A színeket, betűcsaládokat és más tervezési értékeket a `@theme` blokkban adod meg. Minden itt felvett változóhoz a Tailwind osztályokat is készít:

```css title="resources/css/app.css"
@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}
```

Ezután használhatod a `bg-mint-500`, `text-mint-500` és `fill-mint-500` osztályokat. A Tailwind a változót közönséges CSS-változóként is kiadja, így `var(--color-mint-500)` formában inline stílusban is hivatkozhatsz rá. A `@theme` csak a fájl legfelső szintjén állhat. Ha olyan változó kell, amelyből nem kell osztály, használj hagyományos `:root` blokkot.

## Hol keres osztályokat: @source

A Tailwind alapból a munkakönyvtár minden fájlját végigolvassa, kivéve:

- a `.gitignore`-ban szereplő fájlokat,
- a `node_modules` mappát,
- a bináris fájlokat (kép, videó, tömörített fájl),
- a CSS-fájlokat és a csomagkezelők zárfájljait.

PHP- és Blade-sablonokat tehát külön beállítás nélkül is megtalál, ha a Vite-ot vagy a CLI-t a projekt gyökeréből indítod. WordPressben két helyzetben kell beavatkoznod.

**Más mappából épít a parancs.** Az `@source` az útvonalat a CSS-fájlhoz képest értelmezi. Az alap útvonalat a `source()` függvénnyel is megadhatod:

```css title="resources/css/app.css"
@import "tailwindcss" source("../../");
@source "../../../sajat-bovitmeny/templates";
```

**A sablon `.gitignore`-ban szereplő helyen van.** Ha a projekted `.gitignore` fájlja kizár egy mappát (például egy külön telepített bővítményét), amelynek sablonjaiban Tailwind-osztályokat használsz, a Tailwind kihagyja. Az `@source` regisztrálja azt kifejezetten. A doksi erre ajánlja: külső, Tailwinddel épített könyvtárat is így veszel fel, mert a függőségek általában a `.gitignore`-ban vannak.

Ehhez még három eszköz tartozik:

| Direktíva | Mire jó |
|---|---|
| `@source not "../src/regi"` | kihagy egy mappát |
| `@import "tailwindcss" source(none);` | kikapcsolja az automatikus keresést, minden forrást kézzel regisztrálsz |
| `@source inline("underline")` | akkor is előállít egy osztályt, ha egy fájlban sem szerepel |

Az `@source inline()` hasznos, ha az osztálynév nem a sablonban, hanem például az adatbázisban (egy szerkesztő által megadott mezőben) van. A kapcsos zárójeles bővítés több osztályt is megad: `@source inline("{hover:,}bg-red-{50,{100..900..100},950}")`.

## Tailwind a Sage témában

A [Sage](https://hub.hellowp.io/hu/knowledge-base/developer-tools/sage/) téma beépített Tailwind CSS-sel jön, és a Vite építi a stílusokat. Itt nincs külön telepítésre szükség: a `resources/css/` mappában a CSS-fájlokat, a gyökérben a `vite.config.js`-t érdemes szerkeszteni. A `vite.config.js` az `app.css` és az `app.js` mellett az `editor.css` és az `editor.js` fájlt is építi a blokkszerkesztőhöz. A Sage build a Tailwind-beállításaidból (színek, betűcsaládok, méretek) egy `theme.json` fájlt készít, így a blokkszerkesztő ugyanazokat az értékeket kínálja, amelyeket a témában használsz. Részletek a [Sage](https://hub.hellowp.io/hu/knowledge-base/developer-tools/sage/) cikkben.

## Mire figyelj

- **Ne rakj össze osztálynevet kódból.** A `'bg-' . $szin . '-600'` nem működik. Képezd le a lehetséges értékeket teljes osztálynevekre egy tömbben.
- **Ellenőrizd a `.gitignore`-t, ha hiányzik egy stílus.** A kimaradt osztály leggyakoribb oka, hogy a sablon olyan útvonalon van, amelyet a Tailwind nem olvas. Az `@source` megoldja.
- **Élesen a lefordított CSS kell, nem a forrás.** Fejlesztéskor a Vite szerver szolgálja ki, élesen a `build` kimenetét töltsd fel.

## Hasznos linkek

- [Tailwind CSS dokumentáció](https://tailwindcss.com/docs)
- [Telepítés Vite-tal](https://tailwindcss.com/docs/installation/using-vite)
- [Telepítés Tailwind CLI-vel](https://tailwindcss.com/docs/installation/tailwind-cli)
- [Osztályok felismerése a forrásfájlokban](https://tailwindcss.com/docs/detecting-classes-in-source-files)
- [Téma-változók](https://tailwindcss.com/docs/theme)