Cursos Empresas Blog Live Conf Eventos Precios

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

Curso Básico de Tailwind 2 y 3

Clase 11 de 29

Clase 11 / 29

Comentarios (7)7 comentarios

Juan Jiménez

Hace 5 años

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'),
    // ...
  ],
}

# Using npm
npm install -D @tailwindcss/typography

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

# Using npm
npm install @tailwindcss/aspect-ratio

# Using Yarn
yarn add @tailwindcss/aspect-ratio

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

José Reinaldo Duque Serna

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

Eduardo Reyes

Hace 4 años

😎 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

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

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

Hace 2 años

Pequeño aporte:

Ronaldo Jiménez

Hace 3 años

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

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

Forms, Typography y Aspect ratio

Progreso del curso

Conociendo Tailwind CSS

Instalación y directivas

Utilidades

Plugins

Personalización

Proyecto: Platzi Travel

Optimización de nuestro proyecto

Conclusiones