Tailwind CSS WordPress-témában

A Tailwind CSS 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:

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 projektekhez a Tailwind saját pluginja a legegyszerűbb út.

1. Telepítsd a csomagokat:

   Terminál

   npm install tailwindcss @tailwindcss/vite

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

   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:

   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 cikk szól.

Telepítés CLI-vel

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

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:

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:

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 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 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ó
• Telepítés Vite-tal
• Telepítés Tailwind CLI-vel
• Osztályok felismerése a forrásfájlokban
• Téma-változók