arbitrary-values.test.css

* {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
  --tw-shadow: 0 0 #0000;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
}
.inset-\[11px\] {
  top: 11px;
  right: 11px;
  bottom: 11px;
  left: 11px;
}
.col-\[7\] {
  grid-column: 7;
}
.col-start-\[7\] {
  grid-column-start: 7;
}
.col-end-\[7\] {
  grid-column-end: 7;
}
.row-\[7\] {
  grid-row: 7;
}
.row-start-\[7\] {
  grid-row-start: 7;
}
.row-end-\[7\] {
  grid-row-end: 7;
}
.m-\[7px\] {
  margin: 7px;
}
.mx-\[7px\] {
  margin-left: 7px;
  margin-right: 7px;
}
.my-\[7px\] {
  margin-top: 7px;
  margin-bottom: 7px;
}
.mt-\[7px\] {
  margin-top: 7px;
}
.mr-\[7px\] {
  margin-right: 7px;
}
.mb-\[7px\] {
  margin-bottom: 7px;
}
.ml-\[7px\] {
  margin-left: 7px;
}
.mt-\[clamp\(30px\2c 100px\)\] {
  margin-top: clamp(30px, 100px);
}
.h-\[3\.23rem\] {
  height: 3.23rem;
}
.h-\[calc\(100\%\+1rem\)\] {
  height: calc(100% + 1rem);
}
.h-\[var\(--height\)\] {
  height: var(--height);
}
.max-h-\[3\.23rem\] {
  max-height: 3.23rem;
}
.max-h-\[calc\(100\%\+1rem\)\] {
  max-height: calc(100% + 1rem);
}
.max-h-\[var\(--height\)\] {
  max-height: var(--height);
}
.min-h-\[3\.23rem\] {
  min-height: 3.23rem;
}
.min-h-\[calc\(100\%\+1rem\)\] {
  min-height: calc(100% + 1rem);
}
.min-h-\[var\(--height\)\] {
  min-height: var(--height);
}
.w-\[3\.23rem\] {
  width: 3.23rem;
}
.w-\[calc\(100\%\+1rem\)\] {
  width: calc(100% + 1rem);
}
.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
  width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px);
}
.w-\[var\(--width\)\] {
  width: var(--width);
}
.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] {
  width: var(--width, calc(100% + 1rem));
}
.w-\[calc\(100\%\/3-1rem\*2\)\] {
  width: calc(100% / 3 - 1rem * 2);
}
.min-w-\[3\.23rem\] {
  min-width: 3.23rem;
}
.min-w-\[calc\(100\%\+1rem\)\] {
  min-width: calc(100% + 1rem);
}
.min-w-\[var\(--width\)\] {
  min-width: var(--width);
}
.max-w-\[3\.23rem\] {
  max-width: 3.23rem;
}
.max-w-\[calc\(100\%\+1rem\)\] {
  max-width: calc(100% + 1rem);
}
.max-w-\[var\(--width\)\] {
  max-width: var(--width);
}
.flex-\[var\(--flex\)\] {
  flex: var(--flex);
}
.flex-shrink-\[var\(--shrink\)\] {
  flex-shrink: var(--shrink);
}
.flex-grow-\[var\(--grow\)\] {
  flex-grow: var(--grow);
}
.rotate-\[23deg\] {
  --tw-rotate: 23deg;
  transform: var(--tw-transform);
}
.rotate-\[2\.3rad\] {
  --tw-rotate: 2.3rad;
  transform: var(--tw-transform);
}
.rotate-\[401grad\] {
  --tw-rotate: 401grad;
  transform: var(--tw-transform);
}
.rotate-\[1\.5turn\] {
  --tw-rotate: 1.5turn;
  transform: var(--tw-transform);
}
.skew-x-\[3px\] {
  --tw-skew-x: 3px;
  transform: var(--tw-transform);
}
.skew-y-\[3px\] {
  --tw-skew-y: 3px;
  transform: var(--tw-transform);
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
  grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.grid-rows-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
  grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(20cm * var(--tw-space-x-reverse));
  margin-left: calc(20cm * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
  margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
}
.rounded-\[11px\] {
  border-radius: 11px;
}
.rounded-t-\[var\(--radius\)\] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.rounded-r-\[var\(--radius\)\] {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.rounded-b-\[var\(--radius\)\] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.rounded-l-\[var\(--radius\)\] {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.rounded-tr-\[var\(--radius\)\] {
  border-top-right-radius: var(--radius);
}
.rounded-br-\[var\(--radius\)\] {
  border-bottom-right-radius: var(--radius);
}
.rounded-bl-\[var\(--radius\)\] {
  border-bottom-left-radius: var(--radius);
}
.rounded-tl-\[var\(--radius\)\] {
  border-top-left-radius: var(--radius);
}
.border-\[2\.5px\] {
  border-width: 2.5px;
}
.border-\[\#f00\] {
  --tw-border-opacity: 1;
  border-color: rgba(255, 0, 0, var(--tw-border-opacity));
}
.bg-\[\#0f0\] {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 255, 0, var(--tw-bg-opacity));
}
.bg-\[\#ff0000\] {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
}
.bg-\[\#0000ffcc\] {
  background-color: #0000ffcc;
}
.bg-\[rgb\(123\2c 123\2c 123\)\] {
  --tw-bg-opacity: 1;
  background-color: rgba(123, 123, 123, var(--tw-bg-opacity));
}
.bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
  background-color: rgba(123, 123, 123, 0.5);
}
.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
  --tw-bg-opacity: 1;
  background-color: hsla(0, 100%, 50%, var(--tw-bg-opacity));
}
.bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
  background-color: hsla(0, 100%, 50%, 0.3);
}
.bg-opacity-\[0\.11\] {
  --tw-bg-opacity: 0.11;
}
.bg-opacity-\[var\(--value\)\] {
  --tw-bg-opacity: var(--value);
}
.from-\[\#da5b66\] {
  --tw-gradient-from: #da5b66;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(218, 91, 102, 0));
}
.from-\[var\(--color\)\] {
  --tw-gradient-from: var(--color);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}
.via-\[\#da5b66\] {
  --tw-gradient-stops: var(--tw-gradient-from), #da5b66,
    var(--tw-gradient-to, rgba(218, 91, 102, 0));
}
.via-\[var\(--color\)\] {
  --tw-gradient-stops: var(--tw-gradient-from), var(--color),
    var(--tw-gradient-to, rgba(255, 255, 255, 0));
}
.to-\[\#da5b66\] {
  --tw-gradient-to: #da5b66;
}
.to-\[var\(--color\)\] {
  --tw-gradient-to: var(--color);
}
.fill-\[\#da5b66\] {
  fill: #da5b66;
}
.fill-\[var\(--color\)\] {
  fill: var(--color);
}
.stroke-\[\#da5b66\] {
  stroke: #da5b66;
}
.p-\[var\(--app-padding\)\] {
  padding: var(--app-padding);
}
.text-\[2\.23rem\] {
  font-size: 2.23rem;
}
.text-\[length\:var\(--font-size\)\] {
  font-size: var(--font-size);
}
.leading-\[var\(--leading\)\] {
  line-height: var(--leading);
}
.tracking-\[var\(--tracking\)\] {
  letter-spacing: var(--tracking);
}
.text-\[color\:var\(--color\)\] {
  color: var(--color);
}
.placeholder-\[var\(--placeholder\)\]::placeholder {
  color: var(--placeholder);
}
.placeholder-opacity-\[var\(--placeholder-opacity\)\]::placeholder {
  --tw-placeholder-opacity: var(--placeholder-opacity);
}
.opacity-\[var\(--opacity\)\] {
  opacity: var(--opacity);
}
.outline-\[var\(--outline\)\] {
  outline: var(--outline);
  outline-offset: 0;
}
.ring-\[10px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
    var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(10px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[\#76ad65\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(118, 173, 101, var(--tw-ring-opacity));
}
.ring-opacity-\[var\(--ring-opacity\)\] {
  --tw-ring-opacity: var(--ring-opacity);
}
.ring-offset-\[19rem\] {
  --tw-ring-offset-width: 19rem;
}
.ring-offset-\[\#76ad65\] {
  --tw-ring-offset-color: #76ad65;
}
.ring-offset-\[\#ad672f\] {
  --tw-ring-offset-color: #ad672f;
}
.blur-\[15px\] {
  --tw-blur: blur(15px);
}
.brightness-\[300\%\] {
  --tw-brightness: brightness(300%);
}
.contrast-\[2\.4\] {
  --tw-contrast: contrast(2.4);
}
.grayscale-\[0\.55\] {
  --tw-grayscale: grayscale(0.55);
}
.hue-rotate-\[0\.8turn\] {
  --tw-hue-rotate: hue-rotate(0.8turn);
}
.invert-\[0\.75\] {
  --tw-invert: invert(0.75);
}
.saturate-\[180\%\] {
  --tw-saturate: saturate(180%);
}
.sepia-\[0\.2\] {
  --tw-sepia: sepia(0.2);
}
.backdrop-blur-\[11px\] {
  --tw-backdrop-blur: blur(11px);
}
.backdrop-brightness-\[1\.23\] {
  --tw-backdrop-brightness: brightness(1.23);
}
.backdrop-contrast-\[0\.87\] {
  --tw-backdrop-contrast: contrast(0.87);
}
.backdrop-grayscale-\[0\.42\] {
  --tw-backdrop-grayscale: grayscale(0.42);
}
.backdrop-hue-rotate-\[1\.57rad\] {
  --tw-backdrop-hue-rotate: hue-rotate(1.57rad);
}
.backdrop-invert-\[0\.66\] {
  --tw-backdrop-invert: invert(0.66);
}
.backdrop-opacity-\[22\%\] {
  --tw-backdrop-opacity: opacity(22%);
}
.backdrop-saturate-\[144\%\] {
  --tw-backdrop-saturate: saturate(144%);
}
.backdrop-sepia-\[0\.38\] {
  --tw-backdrop-sepia: sepia(0.38);
}
.delay-\[var\(--delay\)\] {
  transition-delay: var(--delay);
}
.duration-\[2s\] {
  transition-duration: 2s;
}
.duration-\[var\(--app-duration\)\] {
  transition-duration: var(--app-duration);
}
.content-\[attr\(content-before\)\] {
  content: attr(content-before);
}
@media (min-width: 1024px) {
  .lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
    grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
  }
}