Tailwind es un marco CSS que ofrece un conjunto de valores predefinidos para varias propiedades, como colores, espaciado, tamaños de fuente, etc. Sin embargo, a veces los usuarios pueden querer usar un valor que no está incluido en la configuración predeterminada, como un valor personalizado. color o un margen específico. En esta situación, pueden usar valores arbitrarios.

Este artículo explicará el método para usar valores arbitrarios en Tailwind CSS.

¿Cómo utilizar valores arbitrarios en Tailwind?

Los valores arbitrarios son los valores personalizados que se pueden escribir directamente en el atributo de clase HTML sin definirlos en el archivo de configuración de Tailwind. Están prefijados con una notación de corchetes, como [24px], [2.5rem], etc. Para utilizar los valores arbitrarios en Tailwind, use una notación de corchetes y especifique cualquier valor personalizado para generar clases de utilidad dinámicamente.

Consulte los pasos que se enumeran a continuación para una mejor comprensión:

Paso 1: use valores arbitrarios en el programa HTML

Cree un programa HTML y utilice la notación de corchetes con cualquier valor personalizado para crear las clases deseadas. Por ejemplo, hemos utilizado el “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, y otras clases:

Aquí:

• “bg-[#e9e516]” class establece el color de fondo del
  en “#e9e516” (amarillo).
• “w-[600px]” class establece el ancho de
  en 600 píxeles.
• 'h-[400px]' class aplica la altura de 400 píxeles al elemento
  .
• “p-[13px]” class establece el relleno de
  en 13 píxeles.
• “m-[19px]” class establece el margen de
  en 19 píxeles.

• “texto-[30px]” class establece el tamaño de fuente del elemento

  en 30 píxeles.

• “texto-[#7405ab]” la clase establece el color del texto del elemento

  en púrpura (#7405ab).

• “seguimiento-[0.5rem]” class aplica el espaciado entre letras de 0,5 rem al elemento

  .

Paso 2: Verificar salida

Para asegurarse de que los valores arbitrarios funcionen correctamente, consulte la página web HTML:

El resultado anterior indica que los valores arbitrarios funcionan correctamente tal como se definieron.

Conclusión

Para utilizar los valores arbitrarios en Tailwind, use una notación de corchetes con cualquier valor personalizado en el programa HTML para generar clases dinámicamente. Los usuarios pueden usar valores para cualquier propiedad que acepte un valor numérico o de color, como tamaño de fuente, color, ancho, alto, margen, relleno, etc. Este artículo ha explicado el método para usar valores arbitrarios en Tailwind CSS.