interpret.test.ts.yml

Tools / generated correct css for space-x-reverse / css / 0: |-
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }
  .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
Tools / interpert order / css / 0: |-
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
Tools / interpret / css / 1: |-
  .bg-cool-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
  }
  .bg-hex-fff {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  }
  .font-bold {
    font-weight: 700;
  }
  .text-green-300 {
    --tw-text-opacity: 1;
    color: rgba(110, 231, 183, var(--tw-text-opacity));
  }
  @media (min-width: 640px) {
    .sm\:bg-gray-100 {
      --tw-bg-opacity: 1;
      background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
    }
    .sm\:hover\:bg-gray-200:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
    }
    .dark .sm\:dark\:hover\:text-lg:hover {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
  }
Tools / interpret / success / 0: |-
  [
    "font-bold",
    "text-green-300",
    "sm:dark:hover:text-lg",
    "sm:bg-gray-100",
    "sm:hover:bg-gray-200",
    "bg-cool-gray-300",
    "bg-hex-fff"
  ]
Tools / interpret alias / css / 0: |-
  .bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
  }
  .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .md\:bg-red-500 {
      --tw-bg-opacity: 1;
      background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
    }
    .md\:hover\:bg-white:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    }
    .md\:flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    }
    .md\:items-center {
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  }
Tools / interpret duplicated important / duplicated important / 0: |-
  .\!hover\:bg-red-500:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(239, 68, 68, var(--tw-bg-opacity)) !important;
  }
  .\!focus\:border:focus {
    border-width: 1px !important;
  }
  .focus\:float-right:focus {
    float: right;
  }
  .\!p-0 {
    padding: 0px !important;
  }
  .\!hover\:p-4:hover {
    padding: 1rem !important;
  }
  .\!text-green-300 {
    --tw-text-opacity: 1 !important;
    color: rgba(110, 231, 183, var(--tw-text-opacity)) !important;
  }
Tools / interpret fractions for padding and margin / css / 0: |-
  .m-4\/5 {
    margin: 80%;
  }
  .m-10\/1000 {
    margin: 1%;
  }
  .p-1\/2 {
    padding: 50%;
  }
  .p-1\/100 {
    padding: 1%;
  }
Tools / interpret important / important / 0: |-
  .\!hover\:bg-red-500:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(239, 68, 68, var(--tw-bg-opacity)) !important;
  }
  .\!focus\:border:focus {
    border-width: 1px !important;
  }
  .focus\:float-right:focus {
    float: right;
  }
  .font-bold {
    font-weight: 700;
  }
  .\!hover\:m-2:hover {
    margin: 0.5rem !important;
  }
  .\!hover\:p-4:hover {
    padding: 1rem !important;
  }
  .\!text-green-300 {
    --tw-text-opacity: 1 !important;
    color: rgba(110, 231, 183, var(--tw-text-opacity)) !important;
  }
Tools / interpret screen variants / screen variants / 0: |-
  @media (min-width: 768px) {
    .md\:p-1 {
      padding: 0.25rem;
    }
  }
  @media (min-width: 1280px) and (max-width: 1535.9px) {
    .\@xl\:p-3 {
      padding: 0.75rem;
    }
  }
  @media (max-width: 1023.9px) {
    .\<lg\:p-2 {
      padding: 0.5rem;
    }
  }
Tools / interpret square brackets / square brackets / 0: |-
  .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)));
  }
  .bg-\[\#234\] {
    --tw-bg-opacity: 1;
    background-color: rgba(34, 51, 68, var(--tw-bg-opacity));
  }
  .from-\[\#da5b66\] {
    --tw-gradient-from: rgba(218, 91, 102, var(--tw-from-opacity, 1));
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
  }
  .from-\[var\(--color\)\] {
    --tw-gradient-from: rgba(var(--color), var(--tw-from-opacity, 1));
    --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), rgba(218, 91, 102, var(--tw-via-opacity, 1)), var(--tw-gradient-to, rgba(255, 255, 255, 0));
  }
  .via-\[var\(--color\)\] {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--color), var(--tw-via-opacity, 1)), var(--tw-gradient-to, rgba(255, 255, 255, 0));
  }
  .to-\[\#da5b66\] {
    --tw-gradient-to: rgba(218, 91, 102, var(--tw-to-opacity, 1));
  }
  .to-\[var\(--color\)\] {
    --tw-gradient-to: rgba(var(--color), var(--tw-to-opacity, 1));
  }
  .bg-opacity-\[0\.11\] {
    --tw-bg-opacity: 0.11;
  }
  .bg-opacity-\[var\(--value\)\] {
    --tw-bg-opacity: var(--value);
  }
  .border-\[\#232\] {
    --tw-border-opacity: 1;
    border-color: rgba(34, 51, 34, var(--tw-border-opacity));
  }
  .border-l-\[\#342\] {
    --tw-border-opacity: 1;
    border-color: rgba(51, 68, 34, var(--tw-border-opacity));
  }
  .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-\[2px\] {
    border-width: 2px;
  }
  .flex-\[var\(--flex\)\] {
    -webkit-box-flex: 1;
    -ms-flex: var(--flex);
    -webkit-flex: var(--flex);
    flex: var(--flex);
  }
  .flex-grow-\[var\(--grow\)\] {
    -webkit-box-flex: var(--grow);
    -ms-flex-positive: var(--grow);
    -webkit-flex-grow: var(--grow);
    flex-grow: var(--grow);
  }
  .flex-shrink-\[var\(--shrink\)\] {
    -ms-flex-negative: var(--shrink);
    -webkit-flex-shrink: var(--shrink);
    flex-shrink: var(--shrink);
  }
  .h-\[3\.23rem\] {
    height: 3.23rem;
  }
  .h-\[calc\(100\%\+1rem\)\] {
    height: calc(100% + 1rem);
  }
  .h-\[var\(--width\)\] {
    height: var(--width);
  }
  .text-\[1\.5rem\] {
    font-size: 1.5rem;
    line-height: 1;
  }
  .leading-\[var\(--leading\)\] {
    line-height: var(--leading);
  }
  .m-\[-11rem\] {
    margin: -11rem;
  }
  .m-\[7px\] {
    margin: 7px;
  }
  .my-\[7px\] {
    margin-top: 7px;
    margin-bottom: 7px;
  }
  .mx-\[7px\] {
    margin-left: 7px;
    margin-right: 7px;
  }
  .\!mt-\[10px\] {
    margin-top: 10px !important;
  }
  .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);
  }
  .max-h-\[3\.23rem\] {
    max-height: 3.23rem;
  }
  .max-h-\[calc\(100\%\+1rem\)\] {
    max-height: calc(100% + 1rem);
  }
  .max-h-\[var\(--width\)\] {
    max-height: 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);
  }
  .min-h-\[3\.23rem\] {
    min-height: 3.23rem;
  }
  .min-h-\[calc\(100\%\+1rem\)\] {
    min-height: calc(100% + 1rem);
  }
  .min-h-\[var\(--width\)\] {
    min-height: var(--width);
  }
  .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);
  }
  .opacity-\[var\(--opacity\)\] {
    opacity: var(--opacity);
  }
  .outline-\[var\(--outline\)\] {
    outline-color: var(--outline);
  }
  .p-\[30em\] {
    padding: 30em;
  }
  .p-\[var\(--app-padding\)\] {
    padding: var(--app-padding);
  }
  .placeholder-\[var\(--placeholder\)\]::-webkit-input-placeholder {
    color: var(--placeholder);
  }
  .placeholder-\[var\(--placeholder\)\]::-moz-placeholder {
    color: var(--placeholder);
  }
  .placeholder-\[var\(--placeholder\)\]:-ms-input-placeholder {
    color: var(--placeholder);
  }
  .placeholder-\[var\(--placeholder\)\]::-ms-input-placeholder {
    color: var(--placeholder);
  }
  .placeholder-\[var\(--placeholder\)\]::placeholder {
    color: var(--placeholder);
  }
  .placeholder-opacity-\[var\(--placeholder\)\]::-webkit-input-placeholder {
    --tw-placeholder-opacity: var(--placeholder);
  }
  .placeholder-opacity-\[var\(--placeholder\)\]::-moz-placeholder {
    --tw-placeholder-opacity: var(--placeholder);
  }
  .placeholder-opacity-\[var\(--placeholder\)\]:-ms-input-placeholder {
    --tw-placeholder-opacity: var(--placeholder);
  }
  .placeholder-opacity-\[var\(--placeholder\)\]::-ms-input-placeholder {
    --tw-placeholder-opacity: var(--placeholder);
  }
  .placeholder-opacity-\[var\(--placeholder\)\]::placeholder {
    --tw-placeholder-opacity: var(--placeholder);
  }
  .inset-\[11px\] {
    top: 11px;
    right: 11px;
    bottom: 11px;
    left: 11px;
  }
  .ring-\[4px\] {
    --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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
  .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);
    -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
  .ring-offset-\[\#76ad65\] {
    --tw-ring-offset-opacity: 1;
    --tw-ring-offset-color: rgba(118, 173, 101, var(--tw-ring-offset-opacity));
  }
  .ring-\[\#34123250\] {
    --tw-ring-opacity: 0.3137254901960784;
    --tw-ring-color: rgba(52, 18, 50, var(--tw-ring-opacity));
  }
  .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);
  }
  .fill-\[\#1c1c1e\] {
    --tw-fill-opacity: 1;
    fill: rgba(28, 28, 30, var(--tw-fill-opacity));
  }
  .fill-\[var\(--color\)\] {
    fill: var(--color);
  }
  .stroke-\[\#da5b66\] {
    --tw-stroke-opacity: 1;
    stroke: rgba(218, 91, 102, var(--tw-stroke-opacity));
  }
  .text-\[\#9254d2\] {
    --tw-text-opacity: 1;
    color: rgba(146, 84, 210, var(--tw-text-opacity));
  }
  .text-\[rgb\(123\2c 123\2c 23\)\] {
    --tw-text-opacity: 1;
    color: rgba(123, 123, 23, var(--tw-text-opacity));
  }
  .text-\[rgba\(132\2c 2\2c 193\2c 0\.5\)\] {
    --tw-text-opacity: 0.5;
    color: rgba(132, 2, 193, var(--tw-text-opacity));
  }
  .text-\[hsl\(360\2c 100\%\2c 50\%\)\] {
    --tw-text-opacity: 1;
    color: rgba(255, 0, 0, var(--tw-text-opacity));
  }
  .tracking-\[var\(--tracking\)\] {
    letter-spacing: var(--tracking);
  }
  .w-\[51vw\] {
    width: 51vw;
  }
  .w-\[3\.23rem\] {
    width: 3.23rem;
  }
  .w-\[calc\(100\%\+1rem\)\] {
    width: calc(100% + 1rem);
  }
  .w-\[var\(--width\)\] {
    width: var(--width);
  }
  .w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
    width: calc(var(--10-10px,calc(-20px - (-30px - -40px))) - 50px);
  }
  .w-\[calc\(var\(--10-10px\)\+20px\)\] {
    width: calc(var(--10-10px) + 20px);
  }
  .w-\[calc\(var\(--test\)\+1px\)\] {
    width: calc(var(--test) + 1px);
  }
  .gap-\[4rem\] {
    grid-gap: 4rem;
    gap: 4rem;
  }
  .col-\[7\] {
    -ms-grid-column-span: span 7 / span 7;
    grid-column: span 7 / span 7;
  }
  .col-start-\[7\] {
    grid-column-start: 7;
  }
  .col-end-\[7\] {
    grid-column-end: 7;
  }
  .row-\[7\] {
    -ms-grid-row-span: span 7 / span 7;
    grid-row: span 7 / span 7;
  }
  .row-start-\[7\] {
    grid-row-start: 7;
  }
  .row-end-\[7\] {
    grid-row-end: 7;
  }
  .rotate-\[23deg\] {
    --tw-rotate: 23deg;
  }
  .rotate-\[2\.3rad\] {
    --tw-rotate: 2.3rad;
  }
  .rotate-\[401grad\] {
    --tw-rotate: 401grad;
  }
  .rotate-\[1\.5turn\] {
    --tw-rotate: 1.5turn;
  }
  .skew-x-\[3px\] {
    --tw-skew-x: 3px;
  }
  .skew-y-\[3px\] {
    --tw-skew-y: 3px;
  }
  .duration-\[2s\] {
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
  }
  .duration-\[var\(--app-duration\)\] {
    -webkit-transition-duration: var(--app-duration);
    -o-transition-duration: var(--app-duration);
    transition-duration: var(--app-duration);
  }
  .delay-\[var\(--delay\)\] {
    -webkit-transition-delay: var(--delay);
    -o-transition-delay: var(--delay);
    transition-delay: var(--delay);
  }
  .blur-\[11px\] {
    --tw-blur: blur(11px);
  }
  .brightness-\[1\.23\] {
    --tw-brightness: brightness(1.23);
  }
  .contrast-\[0\.87\] {
    --tw-contrast: contrast(0.87);
  }
  .grayscale-\[0\.42\] {
    --tw-grayscale: grayscale(0.42);
  }
  .hue-rotate-\[1\.57rad\] {
    --tw-hue-rotate: hue-rotate(1.57rad);
  }
  .invert-\[0\.66\] {
    --tw-invert: invert(0.66);
  }
  .saturate-\[144\%\] {
    --tw-saturate: saturate(144%);
  }
  .sepia-\[0\.38\] {
    --tw-sepia: sepia(0.38);
  }
  .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);
  }
Tools / interpret square brackets grid / square brackets grids / 0: |-
  .grid-cols-\[1fr\2c 700px\2c 2fr\] {
    grid-template-columns: 1fr 700px 2fr;
  }
  .grid-cols-\[auto\] {
    grid-template-columns: auto;
  }
  .grid-rows-\[auto\2c max-content\2c 10px\] {
    grid-template-rows: auto max-content 10px;
  }
Tools / interpret square brackets grids with function / square brackets grids / 0: >-
  .grid-cols-\[minmax\(200px\2c 2fr\)\2c minmax\(300px\2c 3fr\)\2c
  minmax\(100px\2c 1fr\)\] {
    grid-template-columns: minmax(200px,2fr) minmax(300px,3fr) minmax(100px,1fr);
  }
Tools / min-bracket / css / 0: |-
  .max-h-\[100vh\] {
    max-height: 100vh;
  }