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