Font-Size Utilities

.text-xxs

.text-xs

.text-sm

.text-md

.text-lg

.text-xl

.text-xxl

.text-xxxl

.text-xxs { font-size: 12px }
.text-xs { font-size: 13px }
.text-sm { font-size: 14px }
.text-md { font-size: 16px }
.text-lg { font-size: 18px }
.text-xl { font-size: 20px }
.text-xxl { font-size: 22px }
.text-xxxl { font-size: 24px }

@media screen and (min-width:  576px) {
  .sm:text-xxs { font-size: 12px }
  .sm:text-xs { font-size: 13px }
  .sm:text-sm { font-size: 14px }
  .sm:text-md { font-size: 16px }
  .sm:text-lg { font-size: 18px }
  .sm:text-xl { font-size: 20px }
  .sm:text-xxl { font-size: 22px }
  .sm:text-xxxl { font-size: 24px }
}

@media screen and (min-width:  768px) {
  .md:text-xxs { font-size: 12px }
  .md:text-xs { font-size: 13px }
  .md:text-sm { font-size: 14px }
  .md:text-md { font-size: 16px }
  .md:text-lg { font-size: 18px }
  .md:text-xl { font-size: 20px }
  .md:text-xxl { font-size: 22px }
  .md:text-xxxl { font-size: 24px }
}

@media screen and (min-width:  992px) {
  .lg:text-xxs { font-size: 12px }
  .lg:text-xs { font-size: 13px }
  .lg:text-sm { font-size: 14px }
  .lg:text-md { font-size: 16px }
  .lg:text-lg { font-size: 18px }
  .lg:text-xl { font-size: 20px }
  .lg:text-xxl { font-size: 22px }
  .lg:text-xxxl { font-size: 24px }
}

@media screen and (min-width:  1200px) {
  .xl:text-xxs { font-size: 12px }
  .xl:text-xs { font-size: 13px }
  .xl:text-sm { font-size: 14px }
  .xl:text-md { font-size: 16px }
  .xl:text-lg { font-size: 18px }
  .xl:text-xl { font-size: 20px }
  .xl:text-xxl { font-size: 22px }
  .xl:text-xxxl { font-size: 24px }
}