Forms, Typography y Aspect ratio

Clase 11 de 29 • Curso Básico de Tailwind 2 y 3

Tailwind CSS es un framework tan completo que además cuenta con plugins oficiales. En esta clase te voy a presentar plugins muy utilizados en la creación de sitios web: Forms, Typography y Aspect ratio.

Forms

Este plugin nos permite resetear los estilos predeterminados con los que cuentan los formularios, de esta manera es posible sobrescribir los estilos y trabajar con clases de utilidades dentro de Tailwind. Si te interesa conocer más acerca de este plugin acá te dejo los links a la documentación y ejemplos.

Typography

Ahora puedes tener control sobre estilos vanilla con los que cuenta HTML, elementos como headings, paragraphs, listas, entre otros. El plugin de typography agrega una nueva clase ‘prose’ que permite dar un mejor formato a estos elementos.

Puedes encontrar más información dentro de la documentación y puedes ver algunos ejemplos en Tailwind Play haciendo click acá.

Aspect ratio

Aspect ratio es la relación entre el ancho y el alto de la imagen o video. En muchas ocasiones cuando modificamos las dimensiones de elementos o imágenes podemos llegar a tener problemas con el aspect ratio.

Este plugin llega a resolver el problema integrando la clase ‘aspect’ que nos permite establecer un aspect ratio de manera fija para nuestros elementos. Para conocer más acerca de esto te dejó los links de la documentación oficial de Tailwind.

Juan Jiménez

student•

Forms

Instalación:

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

Agregando el plugin al archivo de configuración tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

Typography

Instalación:

# Using npm
npm install -D @tailwindcss/typography

Agregando el plugin al archivo de configuración tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Aspect ratio

Instalación:

# Using npm
npm install @tailwindcss/aspect-ratio

# Using Yarn
yarn add @tailwindcss/aspect-ratio

Agregando el plugin al archivo de configuración tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

José Reinaldo Duque Serna

student•

Muchas gracias por compartir la instalación de estos plugins.

Forms, Typography y Aspect ratio

Conociendo Tailwind CSS

Bienvenida al desarrollo con Tailwind

Tailwind 3.0: ¿qué hay de nuevo?

¿Cómo funciona Tailwind? Y otros frameworks de CSS

Mobile First y Utility First

Instalación y directivas

Creación del proyecto e instalación de Tailwind

Directivas de Tailwind

Utilidades

Nueva paleta de colores extendida

Medidas y Breakpoints

Flexbox

Maquetación del proyecto

Plugins

Forms, Typography y Aspect ratio

Personalización

Tailwind como API para la creación de un Design System

Proyecto: Platzi Travel

Construyendo el cuerpo del proyecto

Creando la sección de Home

Diseñando nuestras cards

Extracción de componentes a clases para nuestra card

Creando la sección de Recomendados

Agregando animaciones al proyecto

Creando la sección de Rentas destacadas

Sección de FAQS

Footer

TabBar funcional

Haciendo responsivo nuestro proyecto

Haciendo responsivo nuestro proyecto: rentas destacadas

Creando la navbar

Agregando el Dark Mode

Optimización de nuestro proyecto

Purge CSS

Cómo hacer la migración de tu proyecto a Tailwind 3.0

Conclusiones

Conclusiones y siguientes pasos