Į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
- Vienkartiniai stiliai: Tai yra pagrindinis ir dažniausias naudojimo atvejis. Kai turite stilių, kuris yra unikalus vienam elementui ir greičiausiai nebus naudojamas pakartotinai, savavališka savybė yra puikus sprendimas. Pavyzdžiai apima specifinį
z-index
laikinam modaliniam langui, pikselio tikslumo poziciją dekoratyviniam elementui arba pasirinktinį gradientą pagrindinei skilčiai. - Prototipų kūrimas ir eksperimentavimas: Kūrybinėje vystymo fazėje reikia greitai eksperimentuoti su reikšmėmis. Savavališkos savybės suteikia neįtikėtiną grįžtamojo ryšio ciklą. Galite keisti plotį, spalvą ar transformacijos reikšmę tiesiogiai naršyklės programuotojo įrankiuose ir matyti rezultatus akimirksniu, nuolat neperkompiliuodami ar neredaguodami konfigūracijos failo.
- Darbas su dinaminiais duomenimis: Kai reikšmės gaunamos iš backend sistemos, TVS ar vartotojo įvesties, savavališkos savybės yra nepakeičiamos. Pavyzdžiui, atvaizduoti progreso juostą, remiantis apskaičiuotu procentu, yra trivialu.
<div class="h-2 bg-blue-500 w-[{{ progressPercentage }}%]'></div>
- Modernių ar nišinių CSS savybių naudojimas: CSS pasaulis nuolat vystosi. Gali atsirasti naujų ar eksperimentinių savybių, kurioms Tailwind dar neturi dedikuotų klasių. Savavališkos savybės suteikia jums tiesioginę prieigą prie visos CSS kalbos, įskaitant tokius dalykus kaip
scroll-snap-type
,container-type
ar pažangiusmask-image
efektus.
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.
- Pakartotinai naudojamoms vertėms: Jei pastebite, kad keliose vietose rašote
text-[#1A2B3C]
arp-[13px]
, tai yra stiprus signalas, kad ši vertė turėtų būti jūsų temos dalis. Tai yra fundamentalus sistemomis pagrįsto dizaino principas. Užuot kartoję savavališką reikšmę, pridėkite ją į savo konfigūracijos failą.
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
.
- Pagrindiniams dizaino sistemos elementams: Jūsų programos pagrindiniai atstumai, tipografijos skalė ir spalvų paletė visada turėtų būti jūsų temoje. Tai užtikrina nuoseklumą, palengvina globalius pakeitimus ir garantuoja, kad jūsų vartotojo sąsaja atitinka jūsų prekės ženklo gaires. Savavališkos savybės skirtos išimtims, o ne taisyklėms.
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:
- Kintamojo apibrėžimas: Naudokite
[--variable-name:value]
sintaksę. - Kintamojo naudojimas: Naudokite standartinę
var(--variable-name)
CSS funkciją kitoje savavališkoje savybėje.
Š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.
- Adaptyvus dizainas: Pakeiskite reikšmę ties tam tikru lūžio tašku (breakpoint).
- Interaktyvios būsenos: Pritaikykite stilių užvedus pelę, sufokusavus ar kitose būsenose.
- Tamsusis režimas: Naudokite skirtingas reikšmes šviesiai ir tamsiai temoms, dažnai su CSS kintamaisiais.
- Grupės ir gretimų elementų būsenos: Modifikuokite vaikini elementą atsižvelgiant į tėvinio elemento būseną.
class="w-[100%] md:w-[50vw]"
class="[mask-image:none] hover:[mask-image:linear-gradient(to_top,transparent,black)]"
class="bg-white dark:bg-[var(--dark-mode-bg)]"
class="group [transform:none] group-hover:[transform:translateX(10px)]"
Š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
- 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ę. - 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. - 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
. - 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.
- 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.