Forms, Typography y Aspect ratio

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

Contenido del curso

Conociendo Tailwind CSS

Instalación y directivas

Utilidades

Plugins

11
Forms, Typography y Aspect ratio
Viendo ahora

Personalización

12
Tailwind como API para la creación de un Design System
12:01 min

Proyecto: Platzi Travel

Optimización de nuestro proyecto

Conclusiones

29
Conclusiones y siguientes pasos
00:37 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.

Comentarios

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.

Eduardo Reyes

student•

😎 Instalarlo la verdad estuvo bastante fácil. npm install -D @tailwindcss/forms npm install -D @tailwindcss/typography npm install -D @tailwindcss/aspect-ratio No se olviden de agregar

		require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
		require("@tailwindcss/aspect-ratio"),
	],

a su archivo tailwind.config.js

Obed Paz

student•

Gracias por dejar este texto, la version 3 trae cositas muy interesantes, como aspect ratio y el scroll snap que por cierto ya le veo uso en la seccion de Our Recomendations de nuestro proyecto. ✨

Ivan Camilo Buitrago Buitrago

student•

Tailwind CSS es un framework tan completo que además cuenta con plugins oficiales:

Forms
Typography
Aspect ratio

// instalacion

npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/aspect-ratio

// uso -> tailwind.config.js:

plugins: [
    require('@tailwindcss/aspect-ratio'),
    require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
  ],

Gustavo Victoria Ramirez

student•

Pequeño aporte:

Ronaldo Jiménez

student•

Instalar plugins:

npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/aspect-ratio

Agregar al archivo de configuración:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography')
  ]
}

```**&#x20;

César Cubarrubia

student•

Algo que me acaba de ocurrir, es que lo obtenía los estilos de los nuevos plugins. El problema era que no había hecho la exportación de dichos estilos al archivo .css de "salida", el cual se encuentra en la carpeta "public".

Por lo que no olviden correr el siguiente comando en su terminal:


npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch

// instalacion

npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/aspect-ratio

// uso -> tailwind.config.js:

plugins: [
    require('@tailwindcss/aspect-ratio'),
    require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
  ],

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography')
  ]
}

```**&#x20;

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