Tailwind és un marc CSS que ofereix un conjunt de valors predefinits per a diverses propietats, com ara colors, espaiat, mides de lletra, etc. No obstant això, de vegades els usuaris poden voler utilitzar un valor que no s'inclou a la configuració predeterminada, com ara un personalitzat. color o un marge específic. En aquesta situació, poden utilitzar valors arbitraris.

Aquest article explicarà el mètode per utilitzar valors arbitraris a Tailwind CSS.

Com utilitzar valors arbitraris a Tailwind?

Els valors arbitraris són els valors personalitzats que es poden escriure directament a l'atribut de classe HTML sense definir-los al fitxer de configuració de Tailwind. Estan prefixats amb una notació de claudàtors, com ara [24px], [2.5rem], etc. Per utilitzar els valors arbitraris de Tailwind, utilitzeu una notació de claudàtors i especifiqueu qualsevol valor personalitzat per generar classes d'utilitat dinàmicament.

Consulteu els passos que s'indiquen a continuació per a una millor comprensió:

Pas 1: utilitzeu valors arbitraris al programa HTML

Feu un programa HTML i utilitzeu la notació de claudàtors amb qualsevol valor personalitzat per crear les classes desitjades. Per exemple, hem utilitzat el 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', i altres classes:

Aquí:

• 'bg-[#e9e516]' class estableix el color de fons del
  a '#e9e516' (groc).
• 'w-[600px]' class estableix l'amplada del
  a 600 píxels.
• 'h-[400px]' class aplica l'alçada de 400 píxels a l'element
  .
• 'p-[13px]' class estableix el farciment del
  a 13 píxels.
• 'm-[19px]' class estableix el marge del
  a 19 píxels.

• 'text-[30px]' class estableix la mida del tipus de lletra de l'element

  en 30 píxels.

• 'text-[#7405ab]' class defineix el color del text de l'element

  en violeta (#7405ab).

• 'seguiment-[0,5 rem]' class aplica l'espaiat entre lletres a 0,5 rem a l'element

  .

Pas 2: verifiqueu la sortida

Per assegurar-vos que els valors arbitraris funcionen correctament, consulteu la pàgina web HTML:

La sortida anterior indica que els valors arbitraris funcionen correctament tal com es van definir.

Conclusió

Per utilitzar els valors arbitraris de Tailwind, utilitzeu una notació de claudàtors amb qualsevol valor personalitzat al programa HTML per generar classes de manera dinàmica. Els usuaris poden utilitzar valors per a qualsevol propietat que accepti un valor numèric o de color, com ara la mida de la lletra, el color, l'amplada, l'alçada, el marge, el farciment, etc. En aquest article s'ha explicat el mètode per utilitzar valors arbitraris a Tailwind CSS.