tailwindcss aspect ratio

@TailWindcss/Aspect-Ratio

Un complemento que proporciona una API compuesta para dar a los elementos una relación de aspecto fija.

Instalación

Instale el complemento de NPM:

npm install -D @tailwindcss/aspect-ratio

Luego agregue el complemento a su archivo tailwind.config.js y deshabilite el complemento de núcleo aspectRatio para evitar conflictos con las utilidades aspect-ratio nativas incluidas en Tailwind CSS v3.0:

 // tailwind.config.js
module . exports = {
  theme : {
    // ...
  } ,
  corePlugins : {
    aspectRatio : false ,
  } ,
  plugins : [
    require ( '@tailwindcss/aspect-ratio' ) ,
    // ...
  ] ,
} 

Uso

Combine las clases aspect-w-{n} y aspect-h-{n} para especificar la relación de aspecto para un elemento:

 < div class =" aspect-w-16 aspect-h-9 " >
  < iframe src =" https://www.youtube.com/embed/dQw4w9WgXcQ " frameborder =" 0 " allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture " allowfullscreen > </ iframe >
</ div >

Use aspect-none para eliminar cualquier comportamiento de relación de aspecto:

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  <!-- ... -->
</ div >

Al eliminar el comportamiento de la relación de aspecto, si los elementos anidados tienen clases w-{n} o h-{n} , asegúrese de que se redecaran con un prefijo de punto de interrupción coincidente:

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  < img src =" ... " alt =" ... " class =" w-full h-full object-center object-cover lg:w-full lg:h-full " />
</ div >

Tenga en cuenta que, debido a la forma en que esto debe implementarse actualmente (el viejo truco de fondo de relleno), debe asignar la relación de aspecto a un elemento principal , y hacer el elemento real que está tratando de dimensionar al único hijo de ese padre.

Una vez que la propiedad aspect-ratio sea compatible con los navegadores modernos, agregaremos soporte oficial a CSS Tailwind y desaprobaremos este complemento.

Las clases de relación de aspecto hasta 16 se generan por defecto:

Ancho	Altura
aspect-w-1	aspect-h-1
aspect-w-2	aspect-h-2
aspect-w-3	aspect-h-3
aspect-w-4	aspect-h-4
aspect-w-5	aspect-h-5
aspect-w-6	aspect-h-6
aspect-w-7	aspect-h-7
aspect-w-8	aspect-h-8
aspect-w-9	aspect-h-9
aspect-w-10	aspect-h-10
aspect-w-11	aspect-h-11
aspect-w-12	aspect-h-12
aspect-w-13	aspect-h-13
aspect-w-14	aspect-h-14
aspect-w-15	aspect-h-15
aspect-w-16	aspect-h-16

Configuración

Puede configurar qué valores y variantes se generan mediante este complemento debajo de la tecla aspectRatio en su archivo tailwind.config.js :

 // tailwind.config.js
module . exports = {
  theme : {
    aspectRatio : {
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
    }
  } ,
  variants : {
    aspectRatio : [ 'responsive' , 'hover' ]
  }
} 

Compatibilidad con utilidades de relación de aspecto predeterminadas

Tailwind CSS v3.0 enviado con soporte de relación de aspecto nativo, y aunque estas nuevas utilidades son excelentes, la propiedad aspect-ratio no es compatible con Safari 14, que todavía tiene un uso global significativo. Si necesita admitir Safari 14, este complemento sigue siendo la mejor manera de hacerlo.

Si bien es técnicamente posible usar las nuevas utilidades aspect-ratio nativa, así como este complemento en el mismo proyecto, realmente no tiene mucho sentido hacerlo. Si puede usar las nuevas utilidades nativas de relación de aspecto, simplemente úselas en lugar de este complemento, ya que son mucho más simples y funcionan mucho mejor.

Sin embargo, si desea utilizar ambos enfoques en su proyecto, tal vez como una forma de hacer la transición lentamente desde el enfoque de complemento a las nuevas utilidades nativas, deberá agregar los siguientes valores a su archivo tailwind.config.js :

 module . exports = {
  // ...
  theme : {
    aspectRatio : {
      auto : 'auto' ,
      square : '1 / 1' ,
      video : '16 / 9' ,
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
      5 : '5' ,
      6 : '6' ,
      7 : '7' ,
      8 : '8' ,
      9 : '9' ,
      10 : '10' ,
      11 : '11' ,
      12 : '12' ,
      13 : '13' ,
      14 : '14' ,
      15 : '15' ,
      16 : '16' ,
    } ,
  } ,
}

Esto es necesario, ya que los valores aspectRatio predeterminados se sobrescriben por los valores de este complemento.