Tailwind CSS variantu meistarība: padziļināts ieskats pseido-klašu un stāvokļu stilošanā

Mūsdienu tīmekļa izstrādē ir ļoti svarīgi radīt lietotāja saskarnes, kas ir ne tikai vizuāli pievilcīgas, bet arī dinamiskas un reaģē uz lietotāja mijiedarbību. Tieši šeit atklājas "utility-first" ietvara, piemēram, Tailwind CSS, patiesais spēks. Kamēr tā utilītklases nodrošina "ko" — konkrētu stila noteikumu, ko piemērot, — tās varianti nodrošina izšķirošo "kad".

Varianti ir slepenā sastāvdaļa, kas pārvērš statiskus dizainus interaktīvā pieredzē. Tie ir īpaši prefiksi, kas ļauj jums nosacīti piemērot utilītklases, pamatojoties uz elementa stāvokli, lietotāja mijiedarbību vai pat cita elementa stāvokli. Neatkarīgi no tā, vai tā ir pogas krāsas maiņa, uzbraucot ar kursoru, formas ievades lauka stilošana, kad tas ir fokusā, vai ziņojuma rādīšana, kad ir atzīmēta izvēles rūtiņa, varianti ir īstie rīki šim darbam.

Šī visaptverošā rokasgrāmata ir paredzēta izstrādātājiem visā pasaulē. Mēs izpētīsim pilnu Tailwind CSS variantu spektru, sākot no fundamentālām pseido-klasēm, piemēram, hover un focus, līdz pat progresīvām tehnikām, izmantojot group un peer sarežģītām komponentu mijiedarbībām. Beigās jums būs zināšanas, lai veidotu sarežģītas, stāvokli apzinošas saskarnes pilnībā savā HTML.

Pamatkoncepcijas izpratne: Kas ir varianti?

Savā būtībā variants Tailwind CSS ir prefikss, ko jūs pievienojat utilītklasei, atdalot ar kolu (:). Šis prefikss darbojas kā nosacījums. Utilītklase, kas tam seko, tiks piemērota tikai tad, kad šis nosacījums ir izpildīts.

Pamata sintakse ir vienkārša un intuitīva:

variant:utility-class

Piemēram, apskatīsim vienkāršu pogu. Jūs, iespējams, vēlaties, lai tās fons pēc noklusējuma būtu zils, bet tumšāk zils, kad lietotājs virs tās novieto peles kursoru. Tradicionālajā CSS jūs rakstītu:

            .my-button {
  background-color: #3b82f6; /* bg-blue-500 */
}

.my-button:hover {
  background-color: #2563eb; /* bg-blue-700 */
}
            

              
                Copy
              
            
          

Ar Tailwind variantiem jūs sasniedzat to pašu rezultātu tieši savā HTML, saglabājot stilošanu kopā ar iezīmēšanas kodu:

            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>
            

              
                Copy
              
            
          

Šeit hover: ir variants. Tas norāda Tailwind Just-In-Time (JIT) dzinējam ģenerēt CSS noteikumu, kas piemēro bg-blue-700 tikai tad, kad poga ir :hover stāvoklī. Šī vienkāršā, bet jaudīgā koncepcija ir pamats visai interaktīvajai stilošanai Tailwind CSS.

Visbiežāk lietotie varianti: Interaktīvās pseido-klases

Pseido-klases ir CSS selektori, kas definē īpašu elementa stāvokli. Tailwind nodrošina variantus visām izplatītākajām pseido-klasēm, kuras jūs ikdienā izmantojat, lai reaģētu uz lietotāja darbībām.

hover variants: Reaģēšana uz peles kursoru

hover variants, iespējams, ir visbiežāk lietotais. Tas piemēro stilus, kad lietotāja kursors norāda uz elementu. Tas ir būtiski, lai sniegtu vizuālu atgriezenisko saiti saitēm, pogām, kartītēm un jebkuram citam klikšķināmam elementam.

Piemērs: Interaktīvs kartītes komponents

Izveidosim kartīti, kas paceļas un iegūst izteiktāku ēnu, kad virs tās tiek novietots kursors – tas ir izplatīts modelis mūsdienu lietotāja saskarnes dizainā.

            <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md 
             transition-all duration-300 
             hover:shadow-xl hover:-translate-y-1">
  <h3 class="text-xl font-medium text-black">Global Insights</h3>
  <p class="text-slate-500">Discover trends from around the world.</p>
</div>
            

              
                Copy
              
            
          

Šajā piemērā:

• hover:shadow-xl maina kastes ēnu uz lielāku, kad virs tās ir kursors.
• hover:-translate-y-1 nedaudz paceļ kartīti uz augšu, radot "pacelšanās" efektu.
• Mēs pievienojām transition-all un duration-300, lai stāvokļa maiņa būtu plūdena un animēta.

focus variants: Stilošana pieejamībai un ievadei

focus variants ir kritiski svarīgs pieejamībai. Tas piemēro stilus, kad elements ir atlasīts, vai nu noklikšķinot uz tā ar peli, vai naviģējot uz to, izmantojot tastatūru (piemēram, ar taustiņu 'Tab'). To visbiežāk izmanto formas elementos, piemēram, ievades laukos, teksta apgabalos un pogās.

Piemērs: Labi nostilots formas ievades lauks

Skaidrs fokusa stāvoklis precīzi norāda lietotājiem, kur viņi atrodas lapā, kas ir būtiski navigācijai, izmantojot tikai tastatūru.

            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email"
       class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md 
              text-sm shadow-sm placeholder-slate-400
              focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
            

              
                Copy
              
            
          

Lūk, ko dara focus: varianti:

• focus:outline-none: Noņem pārlūkprogrammas noklusējuma fokusa apmali. Mēs to darām, lai aizstātu to ar savu, vizuāli pievilcīgāku stilu.
• focus:border-sky-500: Maina apmales krāsu uz spilgti debeszilu.
• focus:ring-1 focus:ring-sky-500: Pievieno smalku ārējo mirdzumu (kastes ēnas gredzenu) tādā pašā krāsā, padarot fokusa stāvokli vēl pamanāmāku.

active variants: Klikšķu un pieskārienu uztveršana

active variants tiek piemērots, kad lietotājs aktivizē elementu—piemēram, kamēr poga tiek turēta nospiesta. Tas sniedz tūlītēju atgriezenisko saiti, ka klikšķis vai pieskāriens ir reģistrēts.

Piemērs: Poga ar "nospiestu" efektu

            <button class="bg-indigo-500 text-white font-semibold py-2 px-4 rounded-lg 
             shadow-md hover:bg-indigo-600 focus:outline-none 
             focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75 
             active:bg-indigo-700 active:translate-y-0.5">
  Submit
</button>
            

              
                Copy
              
            
          

Šajā uzlabotajā pogā:

• active:bg-indigo-700 padara pogu vēl tumšāku, kamēr tā tiek turēta nospiesta.
• active:translate-y-0.5 nedaudz nospiež pogu uz leju, radot fizisku nospiešanas efektu.

Citi interaktīvie varianti: focus-within un focus-visible

focus-within: Šis noderīgais variants piemēro stilus *vecākelementam*, kad kāds no tā *bērnelementiem* saņem fokusu. Tas ir ideāli piemērots visas formas grupas stilošanai, kad lietotājs mijiedarbojas ar tās ievades lauku.

            <div class="flex items-center space-x-2 p-4 border rounded-lg focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
  <!-- SVG Icon -->
  <svg class="h-6 w-6 text-gray-400">...</svg>
  <input type="text" placeholder="Search..." class="outline-none">
</div>
            

              
                Copy
              
            
          

Tagad, kad lietotājs fokusējas uz <input>, viss vecākelements <div> iegūst zilu apmali un gredzenu.

focus-visible: Pārlūkprogrammām ir atšķirīga heiristika, kad rādīt fokusa gredzenu. Piemēram, tās var to nerādīt uz pogas pēc peles klikšķa, bet rādīs pēc navigācijas ar tastatūru. focus-visible variants ļauj jums izmantot šo gudrāko uzvedību. Parasti ieteicams izmantot focus-visible, nevis focus apmales/gredzena stilošanai, lai nodrošinātu labāku lietotāja pieredzi gan peles, gan tastatūras lietotājiem.

Stilošana, pamatojoties uz stāvokli: Formu un lietotāja saskarnes elementu varianti

Papildus tiešai lietotāja mijiedarbībai, elementiem bieži ir stāvokļi, kas balstīti uz to atribūtiem. Tailwind nodrošina variantus, lai deklaratīvi stilotu šos stāvokļus.

disabled variants: Nepieejamības paziņošana

Kad pogai vai formas ievades laukam ir disabled atribūts, ar to nevar mijiedarboties. disabled variants ļauj jums stilot šo stāvokli, lai to vizuāli skaidri parādītu lietotājam.

            <button disabled class="bg-slate-300 text-slate-500 font-bold py-2 px-4 rounded cursor-not-allowed 
                     disabled:opacity-50">
  Processing...
</button>
            

              
                Copy
              
            
          

Šeit disabled:opacity-50 samazina pogas necaurredzamību, kad ir pievienots disabled atribūts, kas ir izplatīta konvencija neaktīva stāvokļa norādīšanai. cursor-not-allowed utilīta to vēl vairāk pastiprina.

checked variants: Izvēles rūtiņām un radio pogām

checked variants ir būtisks, veidojot pielāgotas izvēles rūtiņas un radio pogas. Tas piemēro stilus, kad ievades lauka checked atribūts ir patiess.

Piemērs: Pielāgota stila izvēles rūtiņa

            <label class="flex items-center space-x-3">
  <input type="checkbox" class="appearance-none h-5 w-5 border border-gray-300 rounded-md 
                                checked:bg-blue-600 checked:border-transparent">
  <span class="text-gray-900 font-medium">Accept terms and conditions</span>
</label>
            

              
                Copy
              
            
          

Mēs izmantojam appearance-none, lai noņemtu pārlūkprogrammas noklusējuma stilošanu, un pēc tam izmantojam checked: variantu, lai mainītu fona krāsu, kad rūtiņa ir atzīmēta. Jūs pat varētu pievienot ķeksīša ikonu, izmantojot ::before vai ::after pseido-elementus kombinācijā ar šo variantu.

Formas validācijas varianti: required, optional, valid, invalid

Mūsdienu formas nodrošina reāllaika validācijas atgriezenisko saiti. Tailwind validācijas varianti izmanto pārlūkprogrammas ierobežojumu validācijas API. Šie varianti tiek piemēroti, pamatojoties uz atribūtiem, piemēram, required, un ievades vērtības pašreizējo validitātes stāvokli (piemēram, type="email" gadījumā).

            <input type="email" required 
       class="border rounded-md px-3 py-2 
              invalid:border-pink-500 invalid:text-pink-600
              focus:invalid:border-pink-500 focus:invalid:ring-pink-500
              valid:border-green-500">
            

              
                Copy
              
            
          

Šim ievades laukam būs:

• Rozā apmale un teksts, ja saturs nav derīga e-pasta adrese (invalid:).
• Zaļa apmale, tiklīdz tiek ievadīta derīga e-pasta adrese (valid:).
• Fokusa gredzens arī kļūs rozā, ja lauks ir fokusēts, kamēr tas ir nederīgs (focus:invalid:).

Padziļināta interaktivitāte: `group` un `peer` varianti

Dažreiz ir nepieciešams stilot elementu, pamatojoties uz *cita* elementa stāvokli. Šeit noder spēcīgās group un peer koncepcijas. Tās atrisina veselu klasi lietotāja saskarnes izaicinājumu, kurus iepriekš bija grūti pārvaldīt, izmantojot tikai utilītklases.

`group` spēks: Bērnelementu stilošana atkarībā no vecākelementa stāvokļa

group variants ļauj jums stilot bērnelementus, pamatojoties uz vecākelementa stāvokli. Lai to izmantotu, jūs pievienojat group klasi vecākelementam, kuru vēlaties izsekot. Pēc tam jebkuram bērnelementam varat izmantot variantus, piemēram, group-hover, group-focus utt.

Piemērs: Kartīte ar virsrakstu un ikonu, kas maina krāsu vienlaicīgi, kad virs tās ir kursors

            <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 
                   hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <!-- SVG Icon -->
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white">...</svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New Project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of templates.</p>
</a>
            

              
                Copy
              
            
          

Kā tas darbojas:

1. Mēs pievienojam group klasi vecāka <a> tagam.
2. Kad lietotājs novieto kursoru virs visas saites, tās fona krāsa mainās, pateicoties hover:bg-sky-500.
3. Vienlaicīgi tiek aktivizēta group-hover:stroke-white klase uz SVG un group-hover:text-white on the text elements are activated, changing their colors to white.

Tas rada saskaņotu, holistisku "hover" efektu, kas citādi prasītu pielāgotu CSS vai JavaScript.

Blakuselementu stilošana ar `peer`: Revolūcija formās

peer variants ir līdzīgs group, bet tas darbojas, lai stilotu blakuselementus. Jūs pievienojat peer klasi elementam, un tad varat izmantot variantus, piemēram, peer-checked vai peer-invalid, uz *sekojošiem* blakuselementiem, lai tos stilotu, pamatojoties uz "peer" elementa stāvokli. Tas ir neticami noderīgi pielāgotām formas vadīklām.

Piemērs: Etiķete, kas mainās, kad tiek atzīmēta ar to saistītā izvēles rūtiņa

            <label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 rounded-full 
            peer-focus:ring-4 peer-focus:ring-blue-300 
            peer-checked:after:translate-x-full peer-checked:after:border-white 
            after:content-[''] after:absolute after:top-0.5 after:left-[2px] 
            after:bg-white after:border-gray-300 after:border after:rounded-full 
            after:h-5 after:w-5 after:transition-all 
            peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 peer-checked:text-blue-600">
    Enable Notifications
  </span>
</label>
            

              
                Copy
              
            
          

Šis ir pilnīgs, pieejams pārslēgs, kas izveidots bez JavaScript!

1. Faktiskā izvēles rūtiņa <input> ir vizuāli paslēpta ar sr-only (tā joprojām ir pieejama ekrāna lasītājiem) un atzīmēta kā peer.
2. Vizuālais pārslēgs ir <div>, kas ir stilots, lai izskatītos kā sliede ar rokturi (izmantojot ::after pseido-elementu).
3. peer-checked:bg-blue-600 maina sliedes fona krāsu, kad slēptā izvēles rūtiņa ir atzīmēta.
4. peer-checked:after:translate-x-full pabīda rokturi pa labi, kad izvēles rūtiņa ir atzīmēta.
5. peer-checked:text-blue-600 maina blakus esošā <span> etiķetes teksta krāsu.

Variantu apvienošana detalizētai kontrolei

Viena no Tailwind jaudīgākajām funkcijām ir spēja savirknēt variantus. Tas ļauj izveidot ļoti specifiskus nosacījumu stilus.

Responsīvie un stāvokļa varianti: Dinamiskais duets

Jūs varat apvienot responsīvos prefiksus (piemēram, md:, lg:) ar stāvokļa variantiem, lai piemērotu stilus tikai noteiktos ekrāna izmēros *un* noteiktos stāvokļos. Responsīvais variants vienmēr ir pirmais.

Sintakse: breakpoint:state:utility-class

            <button class="bg-blue-500 text-white p-2 rounded 
             hover:bg-blue-600 
             md:bg-green-500 md:hover:bg-green-600">
  Responsive Button
</button>
            

              
                Copy
              
            
          

Šī poga:

• Būs zila uz maziem ekrāniem, kļūstot tumšāk zila, kad virs tās ir kursors.
• Būs zaļa uz vidējiem un lielākiem ekrāniem (md:bg-green-500), kļūstot tumšāk zaļa, kad virs tās ir kursors (md:hover:bg-green-600).

Vairāku stāvokļa variantu savietošana

Jūs varat arī savietot vairākus stāvokļa variantus, lai piemērotu stilus tikai tad, kad ir izpildīti visi nosacījumi. Tas ir noderīgi mijiedarbību precīzai pielāgošanai.

Piemērs: Tumšā režīma poga, kas atšķirīgi reaģē uz "hover" un "focus"

            <button class="p-2 rounded-full text-gray-400 
             dark:text-gray-500 
             hover:text-gray-600 dark:hover:text-gray-300 
             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 
             dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400
             dark:hover:focus:ring-gray-200">
  <!-- Icon here -->
</button>
            

              
                Copy
              
            
          

Šeit dark:hover:focus:ring-gray-200 piemēro noteiktu gredzena krāsu tikai tad, ja ir aktīvs tumšais režīms, poga ir "hover" stāvoklī *un* tai ir fokuss. Stāvokļa variantu secībai parasti nav nozīmes, jo Tailwind ģenerē pareizo CSS selektoru kombinācijai.

Pielāgošana un vienreizēji gadījumi

Lai gan Tailwind nodrošina visaptverošu variantu komplektu jau no paša sākuma, dažreiz ir nepieciešama lielāka kontrole.

Patvaļīgo variantu izmantošana

Vienreizējām situācijām, kad nepieciešams CSS selektors, ko neaptver iebūvēts variants, varat izmantot patvaļīgos variantus. Tas ir neticami spēcīgs "evakuācijas lūka", kas ļauj rakstīt pielāgotus selektorus tieši savā klases atribūtā, iekļaujot tos kvadrātiekavās.

Piemērs: Atšķirīga saraksta elementu stilošana

            <ul>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">First item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Second item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Third item</li>
</ul>
            

              
                Copy
              
            
          

Klase [&:nth-child(odd)]:bg-gray-100 ģenerē CSS priekš li:nth-child(odd), izveidojot svītrainu sarakstu bez nepieciešamības pievienot papildu klases katram elementam.

Vēl viens izplatīts lietojums ir tiešo pēcnācēju stilošanai:

            <div class="[&_>_p]:mt-4">
  <p>First paragraph.</p>
  <p>Second paragraph. This will have a top margin.</p>
  <div><p>Nested paragraph. This will NOT have a top margin.</p></div>
</div>
            

              
                Copy
              
            
          

Klase [&_>_p]:mt-4 stilo tikai tiešos `p` bērnelementus `div` elementam.

Variantu konfigurēšana `tailwind.config.js`

Pēc noklusējuma Tailwind JIT dzinējs iespējo visus variantus visiem pamata spraudņiem. Tomēr, ja jums ir nepieciešams iespējot variantus trešo pušu spraudņiem vai vēlaties reģistrēt pielāgotu variantu, jums būs jāizmanto savs `tailwind.config.js` fails.

            // tailwind.config.js
module.exports = {
  // ...
  plugins: [
    function({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    }
  ],
}

            

              
                Copy
              
            
          

Šis pielāgotais spraudnis pievieno jaunus `child` un `child-hover` variantus, kurus pēc tam varat izmantot, piemēram, child:text-red-500, lai stilotu visus tiešos elementa bērnus.

Noslēgums: Stāvokļa vadītas lietotāja saskarnes spēks

Tailwind CSS varianti ir vairāk nekā tikai ērtība; tie ir fundamentāla daļa no "utility-first" filozofijas. Ļaujot jums aprakstīt elementa izskatu visos tā potenciālajos stāvokļos tieši HTML, varianti palīdz jums veidot sarežģītas, robustas un ļoti viegli uzturamas lietotāja saskarnes.

No vienkāršiem hover efektiem līdz sarežģītām formas vadīklām, kas veidotas ar peer-checked, un responsīvām, vairāku stāvokļu kombinācijām, jums tagad ir visaptverošs rīku komplekts, lai atdzīvinātu savus dizainus. Tie veicina uz komponentēm balstītu domāšanu, kur visa loģika — struktūra, stils un stāvoklis — ir iekapsulēta vienuviet.

Mēs esam apskatījuši pamatus un izpētījuši progresīvas tehnikas, bet ceļojums šeit nebeidzas. Labākais veids, kā apgūt variantus, ir tos izmantot. Eksperimentējiet, tos apvienojot, izpētiet pilnu sarakstu oficiālajā Tailwind CSS dokumentācijā un izaiciniet sevi veidot interaktīvus komponentus, neizmantojot pielāgotu CSS vai JavaScript. Pieņemot stāvokļa vadītas stilošanas spēku, jūs varēsiet veidot ātrākas, konsekventākas un patīkamākas lietotāju pieredzes globālai auditorijai.