Tailwind je rámec CSS, ktorý ponúka množinu preddefinovaných hodnôt pre rôzne vlastnosti, ako sú farby, medzery, veľkosti písma atď. Niekedy však používatelia môžu chcieť použiť hodnotu, ktorá nie je zahrnutá v predvolenej konfigurácii, napríklad vlastnú farba alebo špecifický okraj. V tejto situácii môžu použiť ľubovoľné hodnoty.

Tento článok vysvetlí spôsob použitia ľubovoľných hodnôt v CSS Tailwind.

Ako využiť ľubovoľné hodnoty v Tailwinde?

Ľubovoľné hodnoty sú vlastné hodnoty, ktoré možno zapísať priamo do atribútu triedy HTML bez ich definovania v konfiguračnom súbore Tailwind. Pred nimi sú hranaté zátvorky, ako napríklad [24px], [2,5rem] atď. Ak chcete použiť ľubovoľné hodnoty v Tailwinde, použite hranatú zátvorku a zadajte ľubovoľnú vlastnú hodnotu na dynamické generovanie úžitkových tried.

Pre lepšie pochopenie si pozrite nižšie uvedené kroky:

Krok 1: Použite ľubovoľné hodnoty v programe HTML

Vytvorte HTML program a použite hranatú zátvorku s ľubovoľnou vlastnou hodnotou na vytvorenie požadovaných tried. Použili sme napríklad 'bg-[#e9e516]', 'w-[600px]', 'v-[400px]', 'p-[13px]', a ďalšie triedy:

Tu:

• „bg-[#e9e516]“ class nastaví farbu pozadia
  na „#e9e516“ (žltá).
• „w-[600px]“ class nastaví šírku
  na 600 pixelov.
• „h-[400px]“ class aplikuje výšku 400 pixelov na prvok
  .
• „p-[13px]“ class nastaví výplň
  na 13 pixelov.
• „m-[19px]“ class nastaví okraj
  na 19 pixelov.

• 'text-[30px]' class nastaví veľkosť písma prvku

  na 30 pixelov.

• „text-[#7405ab]“ trieda nastaví farbu textu prvku

  na fialovú (#7405ab).

• 'sledovanie-[0.5rem]' class použije medzery medzi písmenami na 0,5 rem na prvok

  .

Krok 2: Overte výstup

Aby ste sa uistili, že ľubovoľné hodnoty fungujú správne, pozrite si webovú stránku HTML:

Vyššie uvedený výstup naznačuje, že ľubovoľné hodnoty fungujú správne tak, ako boli definované.

Záver

Ak chcete použiť ľubovoľné hodnoty v Tailwinde, použite zápis v hranatých zátvorkách s ľubovoľnou vlastnou hodnotou v programe HTML na dynamické generovanie tried. Používatelia môžu použiť hodnoty pre akúkoľvek vlastnosť, ktorá akceptuje číselnú alebo farebnú hodnotu, ako je veľkosť písma, farba, šírka, výška, okraj, výplň atď. Tento článok vysvetľuje spôsob použitia ľubovoľných hodnôt v CSS Tailwind.