Forms, Typography y Aspect ratio

Curso Básico de Tailwind 2 y 3

Contenido del curso

No sé dónde empezar

Conociendo Tailwind CSS

Instalación y directivas

Utilidades

Plugins

11
Forms, Typography y Aspect ratio
Viendo ahora

Personalización

12
Personalizar cores e fontes no Tailwind Config
12:01 min

Proyecto: Platzi Travel

Optimización de nuestro proyecto

Conclusiones

29
Páginas responsivas con modo oscuro
00:36 min

Tomar examen

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.

Forms, Typography y Aspect ratio

Juan Jiménez

Estudiante

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

Estudiante

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

Forms, Typography y Aspect ratio

Conociendo Tailwind CSS

Qué construirás con Tailwind CSS

Tailwind 3.0: ¿qué hay de nuevo?

Qué hace diferente a Tailwind de Bootstrap

Mobile First y Utility First en Tailwind

Instalación y directivas

Creación del proyecto e instalación de Tailwind

Directivas de Tailwind CSS explicadas

Utilidades

Paleta de colores extendida en Tailwind

Breakpoints y medidas en Tailwind CSS

Flexbox y Grid en Tailwind CSS

Flexbox vs Grid para maquetar en Tailwind

Plugins