Transformación de texto CSS Tailwind

Esta clase acepta más de un valor en Tailwind CSS . Todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad de transformación de texto CSS . Esta clase se utiliza para controlar las mayúsculas del texto.

Clases de transformación de texto:

  • mayúscula 
  • minúsculas 
  • capitalizar 
  • caso normal 

mayúsculas: Se utiliza para convertir o transformar todos los caracteres de cada palabra en mayúsculas.

Sintaxis:

<element class="uppercase">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<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 Text Transform Class</b> 
    <div class="mx-14 bg-green-200 p-4">
    <p class="uppercase"> 
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body> 
  
</html> 

Producción:

minúsculas: Se utiliza para convertir o transformar todos los caracteres de cada palabra a minúsculas.

Sintaxis:

<element class="lowercase">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<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 Text Transform Class</b> 
    <div class="mx-14 bg-green-200 p-4">
    <p class="lowercase"> 
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body> 
  
</html> 

Producción:

mayúscula:  Se utiliza para convertir el primer carácter de cada palabra a mayúscula.

Sintaxis:

<element class="capitalize">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<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 Text Transform Class</b> 
    <div class="mx-14 bg-green-200 p-4">
    <p class="capitalize"> 
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body> 
  
</html> 

Producción:

capitalizar

normal-case: Tiene un valor por defecto. No tiene mayúsculas.

Sintaxis:

<element class="normal-case">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<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 Text Transform Class</b> 
    <div class="mx-14 bg-green-200 p-4">
    <p class="normal-case"> 
        A Computer Science portal for Geeks
    </p>
   
    </div>
</body> 
  
</html> 

Producción:

caso normal

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *