Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Forms, Typography y Aspect ratio

11/29

Lectura

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.

Ejemplos Forms 2.png

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 鈥榩rose鈥 que permite dar un mejor formato a estos elementos.

Ejemplos Tipograf铆a.png

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 鈥榓spect鈥 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.

Aportes 2

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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. 鉁