Configura rápidamente márgenes y tamaños de las tipografías en TailwindCSS

Uno de los grandes problemas que tenemos al momento de trabajar con el ccs o el estilo es trabajar con los tamaños estilos paddings márgenes y demás de los benditos h1 h2 H hasta el h6 los p y demás afiliados es decir los demás elementos que son similares ya que siempre es un infierno cuadrar eso nunca queda bien siempre queda horrible entonces para eso si estás empleando Tailwind claro está tenemos este paquete que es muy interesante ya que nos permite configurar eso de manera prácticamente automática realmente aquí la documentación es un poquito abstracta y bueno para lo que yo quiero utilizarlo y presentárselo es más que suficiente simplemente es agregando una de estas clases que tenemos acá la llamada PR o como se pronunci obviamente tienes que instalar el paquete en este caso voy a emplear un proyecto el árabe como es un poquito común es una dependencia de desarrollo importante y realmente poco más aquí algunas cosas que puedes cambiar me entras esta parte realmente ya que te quiero mostrar un poquito cómo es lo que puedo obtener.

Aquí por ejemplo tengo un h1 aquí tengo el párrafo y puedes ver que creo que se ve presentable está más que bien y realmente no hice nada absolutamente nada con esto aquí puedes ver que es esto el resultado fíjate que una vez instalado tienes que colocar este esta clase obviamente también lo puedes colocar directamente en el componente en el di pero bueno ya que estoy empleando aquí una hoja de estilo y no quiero estar modificando DIV lo coloco aquí directamente se la quito para que se entienda fíjate que todos pierden el estilo en este caso recuerda que de base estoy empleando Tailwind y por lo tanto se resetean todos los tamaños en este caso para el h1 y obviamente aquí todo también se va a romper van la sección de esto que eso sí ya tiene su estilo propio entonces ya con esto no te tienes que preocupar por los tamaños ni los pades básicamente el que está empleando por defecto es este llamado base pero puedes configurar otro a tus necesidades por ejemplo aquí voy a colocar este otra vez aquí ya lo tenemos perfecto si quiero variar aquí un poquito el tamaño por ejemplo colocarle 2xl va a aparecer:

body {
    @apply prose-lg
}

Y que exista 2xl ahora todo va a aparecer un poco bueno muchísimo más grande el texto tanto el texto como esto Entonces tienes como quien dice esa configuración a la mano Inclusive la puedes cambiar fácilmente mediante alguna opción por ejemplo decía de accesibilidad si el usuario quiere las letras más grandes y no le quiere dar control más la puedes implementar facilito a nivel de la aplicación simplemente variando esa clase en este caso yo lo veo así colocarlo ya directamente en todo del Body de la parte que tú vayas a emplear en este caso yo tengo aquí un archivo llamado base.css que se emplea en cada uno de de mis módulos que sería el de Academia la aplicación de Academia que tengo acá que es para la compra de los libros y demás el blot y también la parte del administrador ya siempre estoy empleando esa hoja de estilo y por lo tanto ser en cascada pero si no lo si no quieres que sea así entonces simplemente la coloca ccs la hoja de estilo específica que otra vez para mí no es necesario por lo comentado antes porque quiero emplear este estilo que tengo aquí definido de base en cualquier parte de mi aplicación por lo demás no tengo mucho más que contarte es básicamente eso lo instalas configuras el tamaño que tú quieras emplear y ya tenemos todos los h1 o bueno todos los hx y también los párrafos ya le tenemos un estilo definido por defecto.
La tipografía te recomendaría este paquete:

npm install -D @tailwindcss/typography

Y puedes aquí ir configurando cada una de estas secciones recuerda otra vez lo instalas y luego a partir de aquí simplemente emplea en en cualquier parte ya sea en una hoja de estilo como es mi caso o ya sea directamente un componente html como te está mostrando por acá las clases en cuestión y eso sería prácticamente todo.

20-11-2024 - Andrés Cruz

In english

• Categoría
• /
• CSS
• /
• Configura rápidamente márgenes y tamaños de las tipografías en TailwindCSS