Tamaño de fuente Tailwind CSS

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad CSS font-size . Esta clase se utiliza para establecer el tamaño de fuente del texto en un documento HTML.

Clases de tamaño de fuente:

text-xs: esta clase define el tamaño del texto como extra pequeño.
text-sm: esta clase define el tamaño del texto como pequeño.
text-base: esta clase define el tamaño del texto como tamaño base.
text-lg: esta clase define el tamaño del texto como grande.
text-xl: esta clase define el tamaño del texto como extragrande.
text-2xl: esta clase define el tamaño del texto como 2 veces extra grande.
text-3xl: esta clase define el tamaño del texto como 3 veces extra grande.
text-4xl: esta clase define el tamaño del texto como 4 veces extra grande.
text-5xl: esta clase define el tamaño del texto como 5 veces extra grande.
text-6xl: esta clase define el tamaño del texto como 6 veces extra grande.
text-7xl: esta clase define el tamaño del texto como 7 veces extra grande.
text-8xl: esta clase define el tamaño del texto como 8 veces extra grande.
text-9xl: esta clase define el tamaño del texto como 9 veces extra grande.

Nota: Cambie el tamaño en el componente con el tamaño requerido mencionado anteriormente.

Sintaxis:

<element class="text-size">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Font Size Class</b> 
    <div class="mx-24 bg-green-200">
        <p class="text-xs">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>
  
        <p class="text-sm">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>
  
        <p class="text-base">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>
  
        <p class="text-lg">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>
  
        <p class="text-xl">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>
  
    </div>
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta