Käyttö

Näytä Markdown-muodossa Muokkaa palvelussa GitHub Dokumentaatio: 3843abd

Ydintyönkulku koostuu yhdestä kutsusta: anna TailwindPHP-toiminnolle sisältösi ja halutessasi CSS-kokoonpano, niin se palauttaa löytämilleen luokille kuuluvan CSS-tulosteen. Luokkien nimet poimitaan merkintäkielestä, käännetään ratkaistua teemaa vasten, ja tulos sisältää vain todella käyttämäsi apuohjelmat.

PHP

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');

Ilman toista argumenttia generate() käyttää oletusarvoista @import "tailwindcss"-kokoonpanoa (teema + Preflight + apuohjelmat). Mukautusta varten anna CSS-merkkijono tai taulukko.

Sisällön skannaus

TailwindPHP löytää luokkien nimet lukemalla sisältösi attribuutit class ja className. Voit tarkastella poimittuja nimiä komennolla tw::extractCandidates():

PHP

use TailwindPHP\tw;

tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']

Sekä attribuutit class että className skannataan, ja palautetusta luettelosta poistetaan kaksoiskappaleet. Muita ehdokkaita (kuten [mask-type:luminance] tai bg-[#1da1f2]) käsitellään samalla tavalla, ja ne käännetään, jos ne ovat kelvollisia. Tässä näkyvät arvot ovat täsmälleen ne, jotka generate() kääntää.

Syötemuodot

Jokainen staattinen metodi hyväksyy samat kolme syötemuotoa:

Muoto	Allekirjoitus	Käyttötilanne
Vain merkkijono	`tw::generate($content)`	Oletusteema ilman mukautuksia.
Merkkijono + CSS-merkkijono	`tw::generate($content, $css)`	Nopeat teemamuutokset tai direktiivit suoraan merkkijonossa.
Taulukko	`tw::generate(['content' => ..., 'css' => ...])`	Tarvitset vaihtoehdot `minify`, `importPaths` tai `cache`.

PHP

use TailwindPHP\tw;

// Format 1: String only
tw::generate('<div class="flex">');

// Format 2: String + CSS string
tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

// Format 3: Array with content, css, and options
tw::generate([
    'content' => '<div class="flex p-4">',
    'css'     => '@import "tailwindcss";',
    'minify'  => true,
]);

Vain taulukkomuoto hyväksyy asetuksia. css- ja minify-arvojen lisäksi se hyväksyy asetukset importPaths (katso Imports), cache ja cacheTtl (katso Caching).

Uudelleenkäytettävä kääntäjä

Kun kokoat monia katkelmia samoilla asetuksilla — pyyntöketjussa, mallipohjien erässä tai komponenttikirjastossa — yksi kääntäjäinstanssi on tehokkaampi. tw::compile() ratkaisee teeman ja suunnittelujärjestelmän kerran ja käyttää niitä sitten uudelleen:

PHP

use TailwindPHP\tw;

$compiler = tw::compile('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

$css        = $compiler->generate('<div class="flex p-4 bg-brand">');
$candidates = $compiler->extractCandidates('<div class="flex p-4 bg-brand">');
$minified   = $compiler->minify($css);

Kääntäjä tarjoaa myös ominaisuuksien tarkastelutoiminnot (properties(), computedProperties(), value(), computedValue()) ja teeman käyttötoiminnot (colors(), breakpoints(), spacing()). Kaikki metodit löytyvät täydellisestä API-viitteestä.

Syötteen CSS määrittäminen

Suurin osa TailwindPHP-toiminnon tehosta perustuu kokoonpanona annettavaan CSS-merkkijonoon. Jatka osioihin:

Theme — @theme-muuttujat ja nimiavaruudet.
Directives — @apply, @utility, @layer ja @custom-variant.
Imports — @import, virtuaalimoduulit, importPaths ja Preflight.
@source — määritä, mitä tiedostoja ja luokkia skannataan.