Размеры #

Ширина #

Утилиты для установки ширины элемента

export default {
  theme: {
    extend: {
      width: {
        half: '50%',
      },
    },
  },
}

Min-Width #

Утилиты для установки минимальной ширины элемента

export default {
  theme: {
    minWidth: {
      half: '50%',
      full: '100%',
    },
  },
}

Max-Width #

Утилиты для установки максимальной ширины элемента

export default {
  theme: {
    maxWidth: {
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
    },
  },
}

Height #

Утилиты для установки высоты элемента

export default {
  theme: {
    height: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Min-Height #

Утилиты для установки минимальной высоты элемента

export default {
  theme: {
    minHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
  },
}

Max-Height #

Утилиты для установки максимальной высоты элемента

export default {
  theme: {
    maxHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
  },
}

Box Sizing #

Утилиты для управления тем, как браузер должен вычислять общий размер элемента.

• Используйте box-border, чтобы указать браузеру включать границы и отступы элемента, когда вы задаете ему высоту или ширину. Это означает, что элемент 100px × 100px границей 2px и отступом 4px со всех сторон будет отображаться как 100px × 100px, с внутренней областью содержимого 88px × 88px. Windi делает это значение по умолчанию для всех элементов в наших базовых стилях предпечатной проверки.

• Используйте box-content, чтобы указать браузеру добавить границы и отступы поверх указанной ширины или высоты элемента. Это означает, что элемент размером 100px × 100px с границей 2px и отступом 4px со всех сторон будет фактически отображаться как 112px × 112px, с внутренней областью содержимого 100px × 100px.