On gists

Dynamic components

Tailwind CSS

index.html Raw #

<!--
https://github.com/tailwindlabs/tailwindcss-aspect-ratio/blob/master/src/index.js#L39
https://play.tailwindcss.com/4cuLPqCv05
https://www.youtube.com/watch?v=sxxUK0l8jKE
-->

<div class="p-20 flex justify-center items-center gap-12">
  <img class="avatar-sm" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
  <img class="avatar" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
  <img class="avatar-lg" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
  <img class="avatar-xl" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
</div>

tailwind.config.js Raw #

/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin')

export default {
  theme: {
    extend: {
      avatarSize: {
        sm: '3rem',
        DEFAULT: '5rem',
        lg: '7rem',
        xl: '10rem'
      }
    },
  },
  plugins: [
    plugin(function({ matchComponents, theme }){
      matchComponents(
        {
          avatar: (value) => ({
            width: value,
            height: value,
            borderRadius: '9999px'
          })
        },
        {
          values: theme('avatarSize')
        }
      )
    })
  ],
}