M

MLOG

Lietuvių

Įsisavinkite Tailwind CSS savavališkas savybes, kad galėtumėte rašyti bet kokį CSS stilių tiesiai savo HTML. Išsamus vadovas su pavyzdžiais, geriausiomis praktikomis ir našumo patarimais pasauliniams programuotojams.

Tailwind CSS savavališkos savybės: išsamus CSS-in-Utility vadovas

Tailwind CSS sukėlė revoliuciją mūsų požiūryje į front-end programavimą. Jo „utility-first“ metodologija leidžia greitai kurti prototipus, nuoseklias dizaino sistemas ir lengvai prižiūrimas kodo bazes, kuriant sąsajas tiesiogiai žymėjime (markup). Tačiau net ir pati išsamiausia „utility“ biblioteka negali numatyti visų įmanomų dizaino reikalavimų. Kas nutinka, kai jums reikia labai specifinės reikšmės, pavyzdžiui, margin-top: 13px, arba unikalaus clip-path, kurį pateikė dizaineris? Ar turite atsisakyti „utility-first“ darbo eigos ir grįžti prie atskiro CSS failo?

Anksčiau tai buvo pagrįstas susirūpinimas. Tačiau atsiradus „Just-In-Time“ (JIT) kompiliatoriui, Tailwind pristatė žaidimą keičiančią funkciją: savavališkas savybes. Šis galingas mechanizmas suteikia sklandų „atsarginį išėjimą“, leidžiantį naudoti bet kokią CSS reikšmę tiesiogiai klasių sąraše. Tai tobula sisteminės „utility“ karkaso ir begalinio gryno CSS lankstumo sintezė.

Šis išsamus vadovas leis jums pasinerti į savavališkų savybių pasaulį. Išsiaiškinsime, kas jos yra, kodėl jos tokios galingos ir kaip jas efektyviai naudoti, kad sukurtumėte bet ką, ką galite įsivaizduoti, niekada nepalikdami savo HTML.

Kas yra Tailwind CSS savavališkos savybės?

Paprasčiau tariant, savavališkos savybės yra speciali Tailwind CSS sintaksė, leidžianti greitai sugeneruoti „utility“ klasę su pasirinktine reikšme. Užuot apsiribojus iš anksto nustatytomis reikšmėmis jūsų tailwind.config.js faile (pvz., p-4 reiškia padding: 1rem), galite nurodyti tikslų norimą CSS.

Sintaksė yra paprasta ir rašoma laužtiniuose skliaustuose:

[property:value]

Pažvelkime į klasikinį pavyzdį. Įsivaizduokite, kad jums reikia pozicionuoti elementą tiksliai 117 pikselių atstumu nuo viršaus. Tailwind numatytoji atstumų skalė tikriausiai neturi klasės „117px“. Užuot kūrę pasirinktinę klasę, galite tiesiog parašyti:

<div class="absolute top-[117px] ...">...</div>

Užkulisiuose Tailwind JIT kompiliatorius tai pamato ir per milisekundes sugeneruoja jums atitinkamą CSS klasę:

.top-\[117px\] {
  top: 117px;
}

Ši paprasta, bet esminė funkcija efektyviai pašalina paskutinį barjerą, trukdantį visiškai „utility“ principais paremtai darbo eigai. Ji suteikia greitą, tiesioginį sprendimą tiems vienkartiniams stiliams, kurie nepriklauso jūsų globaliai temai, užtikrinant, kad galite išlikti darbo sraute ir išlaikyti pagreitį.

Kodėl ir kada naudoti savavališkas savybes

Savavališkos savybės yra išskirtinis įrankis, bet, kaip ir su bet kuriuo galingu įrankiu, svarbu suprasti, kada jį naudoti, o kada laikytis sukonfigūruotos dizaino sistemos. Teisingas jų naudojimas užtikrina, kad jūsų projektas išliks lankstus ir lengvai prižiūrimas.

Idealūs savavališkų savybių naudojimo atvejai

Kada vengti savavališkų savybių

Nors savavališkos savybės yra galingos, jos neturėtų pakeisti jūsų dizaino sistemos. Pagrindinė Tailwind stiprybė slypi nuoseklume, kurį suteikia jūsų tailwind.config.js failas.

Pavyzdžiui, jei #1A2B3C yra jūsų pagrindinė prekės ženklo spalva, pridėkite ją prie savo temos:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-dark-blue': '#1A2B3C',
      },
    },
  },
}

Dabar visame projekte galite naudoti daug semantiškesnę ir pakartotinai naudojamą klasę text-brand-dark-blue.

Sintaksės įvaldymas: daugiau nei pagrindai

Pagrindinė [property:value] sintaksė yra tik pradžia. Norint iš tikrųjų atskleisti savavališkų savybių potencialą, reikia suprasti dar kelis esminius konceptus.

Tarpų tvarkymas reikšmėse

CSS savybių reikšmėse dažnai būna tarpų, pavyzdžiui, grid-template-columns ar box-shadow. Kadangi HTML tarpai naudojami klasių pavadinimams atskirti, savavališkoje savybėje juos turite pakeisti pabraukimo brūkšniu (_).

Neteisingai (suges): class="[grid-template-columns:1fr 500px 2fr]"

Teisingai: class="[grid-template-columns:1fr_500px_2fr]"

Tai yra esminė taisyklė, kurią reikia prisiminti. JIT kompiliatorius automatiškai konvertuos pabraukimo brūkšnius atgal į tarpus, generuodamas galutinį CSS.

CSS kintamųjų (Custom Properties) naudojimas

Savavališkos savybės turi aukščiausio lygio palaikymą CSS kintamiesiems, kas atveria daugybę galimybių dinamiškam ir komponento lygio temų kūrimui.

Galite ir apibrėžti, ir naudoti CSS kintamuosius:

Štai galingas pavyzdys, kaip sukurti komponentą, kuris atsižvelgia į tėvinio elemento temos spalvą:

<!-- Tėvinis komponentas nustato temos spalvą -->
<div class="[--theme-color:blue]">
  <h3 class="text-[var(--theme-color)]">Teminė antraštė</h3>
  <p>Šis komponentas dabar naudos mėlyną spalvą.</p>
</div>

<!-- Kitas egzempliorius su kitokia temos spalva -->
<div class="[--theme-color:green]">
  <h3 class="text-[var(--theme-color)]">Teminė antraštė</h3>
  <p>Šis komponentas dabar naudos žalią spalvą.</p>
</div>

Temos reikšmių naudojimas su `theme()`

O kas, jei jums reikia pasirinktinės reikšmės, kuri apskaičiuojama remiantis jūsų esama tema? Tailwind suteikia theme() funkciją, kurią galite naudoti savavališkose savybėse, norėdami pasiekti reikšmes iš savo tailwind.config.js failo.

Tai neįtikėtinai naudinga norint išlaikyti nuoseklumą, tuo pačiu leidžiant atlikti pasirinktinius skaičiavimus. Pavyzdžiui, norint sukurti elementą, kuris yra viso konteinerio pločio, atėmus standartinį šoninės juostos atstumą:

<div class="w-[calc(100%_-_theme(spacing.16))]">...</div>

Čia theme(spacing.16) bus pakeista tikrąja `spacing[16]` reikšme iš jūsų konfigūracijos (pvz., `4rem`), o Tailwind sugeneruos klasę width: calc(100% - 4rem).

Praktiniai pavyzdžiai iš globalios perspektyvos

Pritaikykime teoriją praktikoje su keliais realistiškais, globaliai aktualiais pavyzdžiais.

1 pavyzdys: Pikselio tikslumo UI akcentai

Dizaineris jums pateikė vartotojo profilio kortelės maketą, kurioje avataro rėmelis turi specifinį, nestandartinį atstumą.

<div class="relative w-24 h-24">
  <img src="/path/to/avatar.jpg" alt="Vartotojo avataras" class="w-full h-full rounded-full">
  <!-- Dekoratyvinis rėmelio žiedas -->
  <div class="absolute rounded-full border-2 border-blue-500 top-[-4px]_left-[-4px]_right-[-4px]_bottom-[-4px]"></div>
</div>

Čia naudoti top-[-4px] yra daug švariau ir tiesiogiau, nei kurti pasirinktinę CSS klasę, pavyzdžiui, .avatar-border-offset, vienkartiniam naudojimui.

2 pavyzdys: Pasirinktiniai tinklelio išdėstymai

Kuriate pasaulinio naujienų portalo straipsnio puslapio išdėstymą, kuriam reikalinga pagrindinio turinio sritis ir fiksuoto pločio šoninė juosta.

<div class="grid grid-cols-[1fr_300px] gap-8">
  <main>... Pagrindinis straipsnio turinys ...</main>
  <aside>... Šoninė juosta su reklamomis ar susijusiomis nuorodomis ...</aside>
</div>

Klasė grid-cols-[1fr_300px] sukuria dviejų stulpelių tinklelį, kuriame pirmas stulpelis yra lankstus, o antrasis – fiksuoto 300px pločio. Tai labai dažnas šablonas, kurį dabar trivialu įgyvendinti.

3 pavyzdys: Unikalūs fono gradientai

Jūsų įmonės prekės ženklo gairėse naujo produkto pristatymui nurodytas specifinis dviejų tonų gradientas, kuris nėra jūsų standartinės temos dalis.

<div class="p-10 rounded-lg bg-[linear-gradient(110deg,_#a6e3e9_0%,_#a8eec8_100%)]">
  <h2 class="text-white text-2xl font-bold">Naujo produkto pristatymas!</h2>
</div>

Tai leidžia išvengti temos „teršimo“ vienkartiniu gradientu. Jūs netgi galite jį derinti su temos reikšmėmis: bg-[linear-gradient(to_right,theme(colors.blue.500),theme(colors.purple.500))].

4 pavyzdys: Pažangus CSS su `clip-path`

Norėdami nuotraukų galeriją padaryti dinamiškesnę, norite miniatiūroms pritaikyti netaisyklingos formos apkirpimą.

<img src="/path/to/image.jpg" class="[clip-path:polygon(0%_15%,_100%_0%,_100%_85%,_0%_100%)]">

Tai iš karto suteikia jums prieigą prie visos clip-path galios, nereikalaujant jokių papildomų CSS failų ar konfigūracijų.

Savavališkos savybės ir modifikatoriai

Vienas elegantiškiausių savavališkų savybių aspektų yra jų sklandi integracija su galinga Tailwind modifikatorių sistema. Prie savavališkos savybės galite pridėti bet kurį variantą – pavyzdžiui, hover:, focus:, md:, ar dark: – lygiai taip pat, kaip tai darytumėte su standartine „utility“ klase.

Tai atveria platų galimybių spektrą kuriant adaptyvius ir interaktyvius dizainus.

Ši integracija reiškia, kad jums niekada nereikės rinktis tarp pasirinktinės reikšmės naudojimo ir jos pritaikymo adaptyvumui ar interaktyvumui. Jūs gaunate abu, naudodami tą pačią intuityvią sintaksę, su kuria jau esate susipažinę.

Našumo aspektai ir geriausios praktikos

Dažnas klausimas yra, ar daugybės savavališkų savybių naudojimas neišpūs galutinio CSS failo. Dėka JIT kompiliatoriaus, atsakymas yra griežtas ne.

Tailwind JIT variklis veikia skenuodamas jūsų šaltinio failus (HTML, JS, JSX ir kt.) ir ieškodamas klasių pavadinimų. Tada jis sugeneruoja CSS tik toms klasėms, kurias randa. Tai galioja ir savavališkoms savybėms. Jei vieną kartą panaudosite w-[337px], bus sugeneruota viena klasė. Jei jos niekada nenaudosite, ji niekada neegzistuos jūsų CSS. Jei naudosite w-[337px] ir w-[338px], bus sugeneruotos dvi atskiros klasės. Poveikis našumui yra nereikšmingas, o galutinis CSS paketas išlieka kuo mažesnis, jame yra tik tie stiliai, kuriuos iš tikrųjų naudojate.

Geriausių praktikų santrauka

  1. Pirma – tema, antra – savavališkos savybės: Visada teikite pirmenybę savo tailwind.config.js failui, apibrėždami dizaino sistemą. Savavališkas savybes naudokite išimtims, kurios patvirtina taisyklę.
  2. Pabraukimo brūkšnys tarpams: Nepamirškite pakeisti tarpų kelių žodžių reikšmėse pabraukimo brūkšniais (_), kad nesugadintumėte klasių sąrašo.
  3. Išlaikykite skaitomumą: Nors į savavališką savybę galima įdėti labai sudėtingas reikšmes, jei ji tampa neįskaitoma, apsvarstykite, ar nereikia komentaro, ar logika geriau tiktų dedikuotame CSS faile naudojant @apply.
  4. Naudokite CSS kintamuosius: Dinamiškoms reikšmėms, kurias reikia bendrinti komponente arba keisti iš tėvinio elemento, CSS kintamieji yra švarus, galingas ir modernus sprendimas.
  5. Nepiktnaudžiaukite: Jei pastebite, kad komponento klasių sąrašas tampa ilga, nevaldoma savavališkų reikšmių eilute, tai gali būti ženklas, kad komponentą reikia pertvarkyti. Galbūt jį reikėtų suskaidyti į mažesnius komponentus, arba sudėtingą, pakartotinai naudojamą stilių rinkinį būtų galima iškelti naudojant @apply.

Išvada: begalinė galia, nulis kompromisų

Tailwind CSS savavališkos savybės yra daugiau nei tik protingas triukas; jos atspindi fundamentaliausią „utility-first“ paradigmos evoliuciją. Tai kruopščiai suprojektuotas „atsarginis išėjimas“, užtikrinantis, kad karkasas niekada neribos jūsų kūrybiškumo. Suteikdamos tiesioginį tiltą į visą CSS galią tiesiai iš jūsų žymėjimo, jos pašalina paskutinę priežastį palikti HTML norint rašyti stilius.

Suprasdami, kada pasikliauti savo tema dėl nuoseklumo, o kada pasinaudoti savavališka savybe dėl lankstumo, galite kurti greitesnes, lengviau prižiūrimas ir ambicingesnes vartotojo sąsajas. Jums nebereikia eiti į kompromisus tarp dizaino sistemos struktūros ir pikselio tikslumo reikalavimų moderniame interneto dizaine. Su savavališkomis savybėmis Tailwind CSS suteikia jums abu.