M

MLOG

Lietuvių

Ištirkite Tailwind CSS savavališkų variantų galią, kurdami itin pritaikytus pseudo-selektorius ir interaktyvius stilius. Sužinokite, kaip išplėsti Tailwind funkcionalumą unikaliems dizaino įgyvendinimams.

Tailwind CSS savavališki variantai: Atpalaiduojantys pasirinktinius pseudo-selektorius

Tailwind CSS pakeitė priekinio galo kūrimą, suteikdamas prie vartotojo naudingumo orientuotą stilių. Jo iš anksto apibrėžtos klasės leidžia greitai kurti prototipus ir nuoseklų dizainą. Tačiau būna atvejų, kai numatytieji įrankiai nepajėgia pasiekti konkretaus dizaino reikalavimo. Štai kur į pagalbą ateina Tailwind CSS savavališki variantai, siūlantys galingą mechanizmą, leidžiantį išplėsti Tailwind galimybes ir taikyti elementus su pasirinktiniais pseudo-selektoriais.

Tailwind CSS variantų supratimas

Prieš gilindamiesi į savavališkus variantus, būtina suprasti variantų sąvoką Tailwind CSS. Variantai yra modifikatoriai, keičiantys numatytąjį naudingumo klasės veikimą. Įprasti variantai yra šie:

Šie variantai pridedami prie naudingumo klasės priešdėlio, pavyzdžiui, `hover:bg-blue-500` pakeičia fono spalvą į mėlyną užvedus pelės žymeklį. Tailwind konfigūracijos failas (`tailwind.config.js`) leidžia jums pritaikyti šiuos variantus ir pridėti naujų pagal jūsų projekto poreikius.

Savavališkų variantų pristatymas

Savavališki variantai perkelia variantų pritaikymą į kitą lygį. Jie leidžia apibrėžti visiškai pasirinktinius selektorius, naudojant kvadratinių skliaustų žymėjimą. Tai yra neįtikėtinai naudinga, kai reikia taikyti elementus pagal konkrečias būsenas, atributus ar ryšius, kurių neapima Tailwind numatytieji variantai.

Savavališkų variantų sintaksė yra paprasta:

[<selector>]:<utility-class>

Kur:

Paaiškinkime tai pavyzdžiais.

Praktiniai savavališkų variantų pavyzdžiai

1. Pirmojo vaiko elemento taikymas

Tarkime, norite stilizuoti pirmojo vaiko elemento konteineryje kitaip. Tai galite pasiekti naudodami `:first-child` pseudo-selektorių:

<div class="flex flex-col">
  <div class="[&:first-child]:text-red-500">Pirmas elementas</div>
  <div>Antras elementas</div>
  <div>Trečias elementas</div>
</div>

Šiame pavyzdyje `[&:first-child]:text-red-500` taiko `text-red-500` naudingumo klasę (padarydamas tekstą raudoną) pirmajam vaiko elementui `div` su klase `flex flex-col`. Simbolis `&` reiškia tėvinį elementą, kuriam taikomos klasės. Tai užtikrina, kad selektorius taiko pirmąjį vaiką *viduje* nurodyto tėvinio elemento.

2. Stilius pagal tėvinio elemento būseną (Group-Hover)

Vienas bendras dizaino šablonas yra pakeisti vaiko elemento išvaizdą, kai jo tėvinis elementas yra užvedamas. Tailwind suteikia `group-hover` variantą baziniams scenarijams, tačiau savavališki variantai siūlo daugiau lankstumo.

<div class="group hover:bg-gray-100 p-4 rounded-md shadow-md">
  <h2 class="text-lg font-semibold">Produkto pavadinimas</h2>
  <p class="text-gray-600 [&_.description]:line-clamp-2">Produkto aprašymas pateikiamas čia. Tai ilgesnis aprašymas, kuris bus sutrumpintas.
  Jei tėvinis elementas yra užvedamas, aprašymas tampa juodas.</p>
  <p class="description [&:hover]:text-black">Užveskite pelės žymeklį ant tėvinio elemento, kad pakeistumėte šią spalvą</p>
</div>

Čia `[&:hover]:bg-gray-100` prideda šviesiai pilką foną, kai `group` yra užvedamas. Atkreipkite dėmesį, kaip mes sujungiame `group` klasę su savavališku variantu. Norint, kad ši funkcija veiktų, svarbu turėti `group` klasę.

3. Elementų taikymas pagal atributo reikšmes

Savavališki variantai taip pat gali taikyti elementus pagal jų atributo reikšmes. Pavyzdžiui, galbūt norėsite stilizuoti nuorodą kitaip, priklausomai nuo to, ar ji nukreipia į vidinį, ar išorinį išteklių.

<a href="/internal-page" class="[&[href^='/']]:text-blue-500">Vidinis saitas</a>
<a href="https://www.example.com" class="[&[href*='example.com']]:text-green-500">Išorinis saitas</a>

Šiame kode:

4. Sudėtingas būsenų valdymas (pvz., formos patvirtinimas)

Savavališki variantai yra neįtikėtinai naudingi stilizuojant elementus pagal formos patvirtinimo būsenas. Apsvarstykite scenarijų, kai norite vizualiai parodyti, ar formos įvestis yra galiojanti, ar ne.

<input type="text" class="border rounded p-2 [&:invalid]:border-red-500 [&:valid]:border-green-500" placeholder="Įveskite savo el. pašto adresą" required>

Čia:

Tai suteikia tiesioginį vizualinį grįžtamąjį ryšį vartotojui, pagerindamas vartotojo patirtį.

5. Darbas su pasirinktinėmis savybėmis (CSS kintamaisiais)

Savavališkus variantus galite derinti su CSS kintamaisiais (pasirinktinėmis savybėmis), kad gautumėte dar dinamiškesnį stilių. Tai leidžia keisti elementų išvaizdą pagal CSS kintamojo reikšmę.

<div class="[&[--theme='dark']]:bg-gray-800 [&[--theme='dark']]:text-white p-4 rounded-md" style="--theme: light;">
  <p>Tai teminis langelis.</p>
</div>

Šiame pavyzdyje:

Galite dinamiškai keisti `--theme` kintamojo reikšmę naudodami JavaScript, kad persijungtumėte tarp skirtingų temų.

6. Elementų taikymas pagal medijos užklausas

Nors Tailwind suteikia reagavimo variantus (`sm:`, `md:`, ir t.t.), galite naudoti savavališkus variantus sudėtingesniems medijos užklausų scenarijams.

<div class="[&[media(max-width: 768px)]]:text-center">
  <p>Šis tekstas bus centruotas ekranuose, mažesniuose nei 768px.</p>
</div>

Šis kodas taiko `text-center` naudingumo klasę, kai ekrano plotis yra mažesnis arba lygus 768 pikseliams.

Geriausia praktika ir svarstymai

1. Specifiškumas

Naudodami savavališkus variantus, atkreipkite dėmesį į CSS specifiškumą. Savavališki variantai yra įterpiami tiesiogiai į jūsų CSS, o jų specifiškumą nustato jūsų naudojamas selektorius. Specifiškesni selektoriai nepaisys mažiau specifinių.

2. Skaitomumas ir priežiūra

Nors savavališki variantai siūlo didelį lankstumą, per didelis naudojimas gali lemti mažiau skaitomą ir sunkiau prižiūrimą kodą. Apsvarstykite, ar pasirinktinis komponentas ar tradiciškesnis CSS metodas gali būti tinkamesnis sudėtingiems stiliaus reikalavimams. Naudokite komentarus, kad paaiškintumėte sudėtingus savavališkus variantų selektorius.

3. Veikimas

Venkite per daug sudėtingų selektorių, nes jie gali turėti įtakos veikimui. Laikykite savo selektorius kuo paprastesnius ir efektyvesnius. Profiluokite savo programą, kad nustatytumėte visus našumo kliūtis, susijusias su CSS selektoriais.

4. Tailwind konfigūracija

Nors savavališki variantai leidžia stilių kurti tiesiogiai, apsvarstykite galimybę pridėti dažnai naudojamus pasirinktinius selektorius į savo `tailwind.config.js` failą kaip pasirinktinius variantus. Tai gali pagerinti kodo pakartotinį naudojimą ir nuoseklumą.

5. Prieinamumas

Užtikrinkite, kad jūsų savavališkų variantų naudojimas neturėtų neigiamo poveikio prieinamumui. Pavyzdžiui, jei naudojate spalvą būsenai nurodyti, būtinai pateikite alternatyvius vizualinius signalus spalvų aklumu sergantiems vartotojams.

Pasirinktinių variantų pridėjimas prie `tailwind.config.js`

Kaip minėta anksčiau, galite pridėti pasirinktinius variantus į savo `tailwind.config.js` failą. Tai naudinga dažnai naudojamiems selektoriams. Štai pavyzdys:

module.exports = {
  theme: {
    extend: {
      extend: {},
    },
  },
  plugins: [],
}

Išvada

Tailwind CSS savavališki variantai suteikia galingą būdą išplėsti Tailwind galimybes ir sukurti itin pritaikytus stilius. Suprasdami sintaksę ir geriausią praktiką, galite panaudoti savavališkus variantus, kad išspręstumėte sudėtingus stiliaus iššūkius ir pasiektumėte unikalius dizaino įgyvendinimus. Nors jie siūlo didelį lankstumą, svarbu juos naudoti apgalvotai, nepamirštant skaitomumo, priežiūros ir našumo. Derindami savavališkus variantus su kitomis Tailwind funkcijomis, galite sukurti patikimas ir keičiamo dydžio priekinio galo programas.

Tolimesnis mokymasis