tachyons-extra.css

/* Missing width and height classes */
.w0 { width: 0; }
.w6 { width: 32rem; }
.w7 { width: 48rem; }
.w8 { width: 64rem; }
.w9 { width: 96rem; }

.h0 { height: 0; }
.h6 { height: 32rem; }
.h7 { height: 48rem; }
.h8 { height: 64rem; }
.h9 { height: 96rem; }

.h-10 { height: 10%; }
.h-20 { height: 20%; }
.h-30 { height: 30%; }
.h-40 { height: 40%; }
.h-60 { height: 60%; }
.h-70 { height: 70%; }
.h-80 { height: 80%; }
.h-90 { height: 90%; }

.w-fit {
  width: fit-content;
}
.h-fit {
  height: fit-content;
}

/* Missing min-width, min-height, max-width and max-height classes */
.min-w0 { min-width: 0; }
.min-w1 { min-width: 1rem; }
.min-w2 { min-width: 2rem; }
.min-w3 { min-width: 4rem; }
.min-w4 { min-width: 8rem; }
.min-w5 { min-width: 16rem; }
.min-w6 { min-width: 32rem; }
.min-w7 { min-width: 48rem; }
.min-w8 { min-width: 64rem; }
.min-w9 { min-width: 96rem; }
.min-w-100 { min-width: 100%; }

.min-h0 { min-height: 0; }
.min-h1 { min-height: 1rem; }
.min-h2 { min-height: 2rem; }
.min-h3 { min-height: 4rem; }
.min-h4 { min-height: 8rem; }
.min-h5 { min-height: 16rem; }
.min-h6 { min-height: 32rem; }
.min-h7 { min-height: 48rem; }
.min-h8 { min-height: 64rem; }
.min-h9 { min-height: 96rem; }

.mw0 { max-width: 0; }

.mw-10 { max-width: 10%; }
.mw-20 { max-width: 20%; }
.mw-30 { max-width: 30%; }
.mw-40 { max-width: 40%; }
.mw-50 { max-width: 50%; }
.mw-60 { max-width: 60%; }
.mw-70 { max-width: 70%; }
.mw-80 { max-width: 80%; }
.mw-90 { max-width: 90%; }

.max-h0 { max-height: 0; }
.max-h1 { max-height: 1rem; }
.max-h2 { max-height: 2rem; }
.max-h3 { max-height: 4rem; }
.max-h4 { max-height: 8rem; }
.max-h5 { max-height: 16rem; }
.max-h6 { max-height: 32rem; }
.max-h7 { max-height: 48rem; }
.max-h8 { max-height: 64rem; }
.max-h9 { max-height: 96rem; }
.max-h-100 { max-height: 100%; }

.max-h-10 { max-height: 10%; }
.max-h-20 { max-height: 20%; }
.max-h-30 { max-height: 30%; }
.max-h-40 { max-height: 40%; }
.max-h-50 { max-height: 50%; }
.max-h-60 { max-height: 60%; }
.max-h-70 { max-height: 70%; }
.max-h-80 { max-height: 80%; }
.max-h-90 { max-height: 90%; }
.max-h-100 { max-height: 100%; }

/* Missing vw classes */
.vw-10 { width: 10vw; }
.vw-20 { width: 20vw; }
.vw-25 { width: 25vw; }
.vw-30 { width: 30vw; }
.vw-40 { width: 40vw; }
.vw-50 { width: 50vw; }
.vw-60 { width: 60vw; }
.vw-70 { width: 70vw; }
.vw-75 { width: 75vw; }
.vw-80 { width: 80vw; }
.vw-90 { width: 90vw; }
.vw-100 { width: 100vw; }

.vh-10 { height: 10vh; }
.vh-20 { height: 20vh; }
.vh-30 { height: 30vh; }
.vh-40 { height: 40vh; }
.vh-60 { height: 60vh; }
.vh-70 { height: 70vh; }
.vh-80 { height: 80vh; }
.vh-90 { height: 90vh; }

.min-vw-100 { min-width: 100vw; }
.max-vh-100 { max-height: 100vh; }
.max-vw-100 { max-width: 100vw; }


/* Missing vmin classes */
.vwmin-100 { width: 100vmin; }
.vhmin-100 { height: 100vmin; }

/* Missing negative vertical margins */
.nv1 { margin-top: -.25rem; margin-bottom: -.25rem; }
.nv2 { margin-top: -.5rem; margin-bottom: -.5rem; }
.nv3 { margin-top: -1rem; margin-bottom: -1rem; }
.nv4 { margin-top: -2rem; margin-bottom: -2rem; }
.nv5 { margin-top: -4rem; margin-bottom: -4rem; }
.nv6 { margin-top: -8rem; margin-bottom: -8rem; }
.nv7 { margin-top: -16rem; margin-bottom: -16rem; }

/* Missing negative horizontal margins */
.nh1 { margin-left: -.25rem; margin-right: -.25rem; }
.nh2 { margin-left: -.5rem; margin-right: -.5rem; }
.nh3 { margin-left: -1rem; margin-right: -1rem; }
.nh4 { margin-left: -2rem; margin-right: -2rem; }
.nh5 { margin-left: -4rem; margin-right: -4rem; }
.nh6 { margin-left: -8rem; margin-right: -8rem; }
.nh7 { margin-left: -16rem; margin-right: -16rem; }

/* Missing flex classes */
.flex-10 { flex-basis: 10%; }
.flex-20 { flex-basis: 20%; }
.flex-25 { flex-basis: 25%; }
.flex-30 { flex-basis: 30%; }
.flex-33 { flex-basis: 33.3333%; }
.flex-40 { flex-basis: 40%; }
.flex-50 { flex-basis: 50%; }
.flex-60 { flex-basis: 60%; }
.flex-70 { flex-basis: 70%; }
.flex-80 { flex-basis: 80%; }
.flex-90 { flex-basis: 90%; }
.flex-100 { flex-basis: 100%; }

.flex-center {
  align-items: center;
  justify-content: center;
}

/* Missing min-height and min-width to flex-shrink and flex-grow classes */
/* This solves an issue with the behaviour of flex-grow flex-shrink */
.flex-grow-0 { min-width: 0; min-height: 0; }
.flex-grow-1 { min-width: 0; min-height: 0; }
.flex-shrink-0 { min-width: 0; min-height: 0; }
.flex-shrink-1 { min-width: 0; min-height: 0; }

/* Missing margin/padding auto classes */
.center-vertical {
  margin-top: auto;
  margin-bottom: auto;
}
.m-auto { margin: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mh-auto { margin-left: auto; margin-right: auto; }
.mv-auto { margin-top: auto; margin-bottom: auto; }

.p-auto { padding: auto; }
.pl-auto { padding-left: auto; }
.pr-auto { padding-right: auto; }
.pt-auto { padding-top: auto; }
.pb-auto { padding-bottom: auto; }
.ph-auto { padding-left: auto; padding-right: auto; }
.pv-auto { padding-top: auto; padding-bottom: auto; }

/* Missing positioning classes */
.top-3 { top: 4rem; }
.right-3 { right: 4rem; }
.bottom-3 { bottom: 4rem; }
.left-3 { left: 4rem; }
.top-4 { top: 8rem; }
.right-4 { right: 8rem; }
.bottom-4 { bottom: 8rem; }
.left-4 { left: 8rem; }

.top--3 { top: -4rem; }
.right--3 { right: -4rem; }
.bottom--3 { bottom: -4rem; }
.left--3 { left: -4rem; }
.top--4 { top: -8rem; }
.right--4 { right: -8rem; }
.bottom--4 { bottom: -8rem; }
.left--4 { left: -8rem; }

.top-25 { top: 25%; }
.right-25 { right: 25%; }
.bottom-25 { bottom: 25%; }
.left-25 { left: 25%; }
.top-50 { top: 50%; }
.right-50 { right: 50%; }
.bottom-50 { bottom: 50%; }
.left-50 { left: 50%; }
.top-75 { top: 75%; }
.right-75 { right: 75%; }
.bottom-75 { bottom: 75%; }
.left-75 { left: 75%; }
.top-100 { top: 100%; }
.right-100 { right: 100%; }
.bottom-100 { bottom: 100%; }
.left-100 { left: 100%; }

/* Missing font-size classes */
.f0 { font-size: 0; }

/* Missing border-radius classes */
.br5 { border-radius: 2rem; }
.br6 { border-radius: 4rem; }
.br7 { border-radius: 8rem; }

/* Missing transform-origin classes */
.transform-origin-top-left { transform-origin: top left; }
.transform-origin-top-right { transform-origin: top right; }
.transform-origin-right { transform-origin: center right; }
.transform-origin-left { transform-origin: center left; }
.transform-origin-bottom-left { transform-origin: bottom left; }
.transform-origin-bottom-right { transform-origin: bottom right; }

/* Missing transparent text */
.transparent { color: transparent; }

/* Missing pseudo color classes, but just for black and white */
.hover-transparent:hover { color: transparent; }
.hover-b--black:hover { border-color: #000; }
.hover-b--white:hover { border-color: #fff; }
.hover-b--transparent:hover { border-color: transparent; }

.active-black:active { color: #000; }
.active-white:active { color: #fff; }
.active-transparent:active { color: transparent; }
.active-bg-black:active { background-color: #000; }
.active-bg-white:active { background-color: #fff; }
.active-bg-transparent:active { background-color: transparent; }
.active-b--black:active { border-color: #000; }
.active-b--white:active { border-color: #fff; }
.active-b--transparent:active { border-color: transparent; }

.focus-black:focus { color: #000; }
.focus-white:focus { color: #fff; }
.focus-transparent:focus { color: transparent; }
.focus-bg-black:focus { background-color: #000; }
.focus-bg-white:focus { background-color: #fff; }
.focus-bg-transparent:focus { background-color: transparent; }
.focus-b--black:focus { border-color: #000; }
.focus-b--white:focus { border-color: #fff; }
.focus-b--transparent:focus { border-color: transparent; }

/* Prevent collapsing margins without using overflow: hidden */
.no-collapsing-margins::before, .no-collapsing-margins::after {
  content: '';
  display: table;
}

/* Classic centering trick with position absolute */
.absolute--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.absolute--center-vertical {
  top: 50%;
  transform: translateY(-50%);
}
.absolute--center-horizontal {
  left: 50%;
  transform: translateX(-50%);
}

/* Cursors, the most common ones */
.cursor-default { cursor: default; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-crosshair { cursor: crosshair; }
.cursor-progress { cursor: progress; }

/* Common transition classes */
.transition--fast { transition: all 0.15s ease; }
.transition { transition: all 0.3s ease; }
.transition--slow { transition: all 0.5s ease; }
.transition--slower { transition: all 1s ease; }

/* currentColor classes */
.bg-current-color { background: currentColor; }
.b--current-color { border-color: currentColor; }

/* Missing object-fit classes */
.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }

/* Missing object position classes */
.object-position-top { object-position: top center; }
.object-position-right { object-position: center right; }
.object-position-bottom { object-position: bottom center; }
.object-position-left { object-position: center left; }

/* Missing pointer-events classes */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Various missing classes */
.prewrap {
  white-space: pre-wrap;
}

.user-select-none, .user-select-none * {
  user-select: none;
}

.resize-vertical {
  resize: vertical;
}

.visibility-hidden {
  visibility: hidden;
}

.z--1 {
  z-index: -1;
}

.will-change-transform {
  will-change: transform;
}

.v-text-bottom {
  vertical-align: text-bottom;
}

.v-text-top {
  vertical-align: text-top;
}

.break-words {
  word-break: break-all;
  hyphens: auto;
}

.sticky {
  position: sticky;
}

.semi-b {
  font-weight: 600;
}