tests/snapshots/generate.css
/* simple: m-4 p-4 */
.m-4 {
  margin: 1rem;
}
.p-4 {
  padding: 1rem;
}

/* order-invariant: p-4 m-4 */
.m-4 {
  margin: 1rem;
}
.p-4 {
  padding: 1rem;
}

/* colors: text-slate-200 bg-orange-300 border-blue-100 */
.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
}
.bg-orange-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}

/* font-size: text-sm text-xl */
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 30px;
}

/* hidden: hidden */
.hidden {
  display: none;
}

/* font-sans: font-sans */
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* transform-gpu: transform-gpu */
.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* border-default: border */
.border {
  border-width: 1px;
}

/* inset: inset-0 */
.inset-0 {
  inset: 0px;
}

/* negative values rules: -m-0 -m-auto -m-4 */
.-m-4 {
  margin: -1rem;
}

/* dot values: px-1.5 py-2.5 */
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* screen: md:p-4 p-2 md:p-6 */
.p-2 {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:p-6 {
    padding: 1.5rem;
  }
}

/* omit-hyphen rules: px-2 mt-6 scroll-p-2 scroll-pb-4 scroll-my-6 */
.scroll-my-6 {
  scroll-margin-top: 1.5rem;
  scroll-margin-bottom: 1.5rem;
}
.scroll-p-2 {
  scroll-padding: 0.5rem;
}
.scroll-pb-4 {
  scroll-padding-bottom: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* direction mandatory rules: space-2 space-y-4 */
.space-y-4 > * + * {
  margin-top: 1rem;
}

/* with-default: rotate-12 */
*, ::before, ::after, ::backdrop {
  --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;
}

.rotate-12 {
  --tw-rotate: 12deg;
  transform: translate(var(--tw-translate-x), 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));
}

/* with-keyframes: animate-spin */
@keyframes spin {
  to { transform: rotate(360deg) }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* gradients: from-orange-200 via-purple-400 via-40% to-red-600 */
*, ::before, ::after, ::backdrop {
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
}

.from-orange-200 {
  --tw-gradient-from: #fed7aa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 215 170 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-400 {
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-40\% {
  --tw-gradient-via-position: 40%;
}
.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

/* line-height modifier: text-lg/8 text-lg/tight */
.text-lg\/8 {
  font-size: 1.125rem;
  line-height: 2rem;
}
.text-lg\/tight {
  font-size: 1.125rem;
  line-height: 1.25;
}

/* box-shadow colors: shadow shadow-lg shadow-none shadow-teal-800 shadow-[#dd2] shadow-[5px_10px_teal] */
.shadow {
  --tw-shadow-color: rgb(0 0 0 / 0.1);
  box-shadow: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
}
.shadow-lg {
  --tw-shadow-color: rgb(0 0 0 / 0.1);
  box-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}
.shadow-none {
  box-shadow: none;
}
.shadow-\[5px_10px_teal\] {
  box-shadow: 5px 10px teal;
}
.shadow-teal-800 {
  --tw-shadow-color: #115e59;
}
.shadow-\[\#dd2\] {
  --tw-shadow-color: #dd2;
}

/* transition: transition-opacity */
.transition-opacity {
  transition-property: opacity;
  transition-duration: 150ms;
}

/* container: container md:p-6 */
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
  .md\:p-6 {
    padding: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
  .container { max-width: 1536px; }
}

/* container-with-screen-max: container tablet:p-4 */
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 768px) and (max-width: 1440px) {
  .tablet\:p-4 {
    padding: 1rem;
  }
}

/* container-center-with-fixed-padding: container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}

/* container-with-padding-per-screen: container */
.container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
  .container { max-width: 1536px; padding-left: 60px; padding-right: 60px; }
}

/* variants: hover:p-4 md:print:landscape:first:p-8 */
.hover\:p-4:hover {
  padding: 1rem;
}
@media (min-width: 768px) {
  @media print {
    @media (orientation: landscape) {
      .md\:print\:landscape\:first\:p-8:first-child {
        padding: 2rem;
      }
    }
  }
}

/* child-variant: *:italic *:hover:italic hover:*:italic [&_p]:*:hover:italic */
.\[\&_p\]\:\*\:hover\:italic:hover > * p,
.\*\:hover\:italic:hover > *,
.\*\:italic > *,
.hover\:\*\:italic > *:hover {
  font-style: italic;
}

/* alpha modifier: bg-orange-400/20 text-slate-200/[.06] border-black/16 bg-[#123456]/16 text-[#222]/[--custom-var] */
.border-black\/16 {
  border-color: rgb(0 0 0 / 0.16);
}
.bg-orange-400\/20 {
  background-color: rgb(251 146 60 / 0.2);
}
.text-slate-200\/\[\.06\] {
  color: rgb(226 232 240 / .06);
}
.text-\[\#222\]\/\[--custom-var\] {
  color: rgb(34 34 34 / var(--custom-var));
}

/* important modifier: !border-0 !rounded-l-none hover:!font-medium first:![color:red] */
.\!rounded-l-none {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.\!border-0 {
  border-width: 0px !important;
}
.hover\:\!font-medium:hover {
  font-weight: 500 !important;
}
.first\:\!\[color\:red\]:first-child {
  color:red !important
}

/* arbitrary-values: inset-[-10px] pt-[100px] w-[45%] text-[#ddd] text-[#f009] text-[red] text-[transparent] text-[12px] text-[10px] animate-[highlight_1s_ease-in-out_1] bg-[#ddd]/50 bg-[--primary] bg-red-500/[--opacity] text-[19px]/7 text-[19px]/[27px] */
.inset-\[-10px\] {
  inset: -10px;
}
.w-\[45\%\] {
  width: 45%;
}
.animate-\[highlight_1s_ease-in-out_1\] {
  animation: highlight 1s ease-in-out 1;
}
.bg-red-500\/\[--opacity\] {
  background-color: rgb(239 68 68 / var(--opacity));
}
.bg-\[--primary\] {
  background-color: var(--primary);
}
.bg-\[\#ddd\]\/50 {
  background-color: rgb(221 221 221 / 0.5);
}
.pt-\[100px\] {
  padding-top: 100px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[19px\]\/\[27px\] {
  font-size: 19px;
  line-height: 27px;
}
.text-\[19px\]\/7 {
  font-size: 19px;
  line-height: 1.75rem;
}
.text-\[\#ddd\] {
  --tw-text-opacity: 1;
  color: rgb(221 221 221 / var(--tw-text-opacity));
}
.text-\[\#f009\] {
  color: #f009;
}
.text-\[red\] {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity));
}
.text-\[transparent\] {
  color: transparent;
}

/* line height modifier: text-lg/[18px] text-[calc(3rem/5)]/7 text-[calc(3rem/5)]/[calc(4rem/5)] */
.text-lg\/\[18px\] {
  font-size: 1.125rem;
  line-height: 18px;
}
.text-\[calc\(3rem\/5\)\]\/\[calc\(4rem\/5\)\] {
  font-size: calc(3rem/5);
  line-height: calc(4rem/5);
}
.text-\[calc\(3rem\/5\)\]\/7 {
  font-size: calc(3rem/5);
  line-height: 1.75rem;
}

/* arbitrary-values-with-spaces: grid grid-cols-[1fr_500px_2fr] before:content-['hello_world'] */
.grid {
  display: grid;
}
.grid-cols-\[1fr_500px_2fr\] {
  grid-template-columns: 1fr 500px 2fr;
}
.before\:content-\[\'hello_world\'\]::before {
  content: 'hello world';
}

/* arbitrary-properties: [mask-type:luminance] hover:[mask-type:alpha] [background:repeating-linear-gradient(45deg,#606dbc,#606dbc_10px,#465298_10px,#465298_20px)] */
.\[mask-type\:luminance\] {
  mask-type:luminance
}
.hover\:\[mask-type\:alpha\]:hover {
  mask-type:alpha
}
.\[background\:repeating-linear-gradient\(45deg\,\#606dbc\,\#606dbc_10px\,\#465298_10px\,\#465298_20px\)\] {
  background:repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px)
}

/* arbitrary-variants: [html:has(&)]:bg-blue-500 [&:nth-child(3)]:underline [&>*]:p-4 [&[data-selected="true"]]:bg-blue-100 [.sidebar:hover_&]:opacity-70 */
.\[\&\[data-selected\=\"true\"\]\]\:bg-blue-100[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
html:has(.\[html\:has\(\&\)\]\:bg-blue-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.\[\&\>\*\]\:p-4>* {
  padding: 1rem;
}
.\[\&\:nth-child\(3\)\]\:underline:nth-child(3) {
  text-decoration-line: underline;
}
.sidebar:hover .\[\.sidebar\:hover_\&\]\:opacity-70 {
  opacity: 0.7;
}

/* arbitrary-media: [@media(min-width:900px)]:block */
@media (min-width:900px) {
  .\[\@media\(min-width\:900px\)\]\:block {
    display: block;
  }
}

/* max-screen: sm:max-md:p-2 */
@media (min-width: 640px) {
  @media not all and (min-width: 768px) {
    .sm\:max-md\:p-2 {
      padding: 0.5rem;
    }
  }
}

/* min-* max=*: min-[900px]:p-4 max-[1200px]:m-4 */
@media (min-width: 900px) {
  .min-\[900px\]\:p-4 {
    padding: 1rem;
  }
}
@media (max-width: 1200px) {
  .max-\[1200px\]\:m-4 {
    margin: 1rem;
  }
}

/* group-nested-media: p-1 sm:p-3 sm:print:p-2 m-1 sm:m-3 sm:print:m-2 */
.m-1 {
  margin: 0.25rem;
}
.p-1 {
  padding: 0.25rem;
}
@media (min-width: 640px) {
  .sm\:m-3 {
    margin: 0.75rem;
  }
  .sm\:p-3 {
    padding: 0.75rem;
  }
  @media print {
    .sm\:print\:m-2 {
      margin: 0.5rem;
    }
    .sm\:print\:p-2 {
      padding: 0.5rem;
    }
  }
}

/* skip merge for vendor prefixed: [&:-moz-focusring]:outline-none outline-none */
.\[\&\:-moz-focusring\]\:outline-none:-moz-focusring {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* media-order-stable-1: portrait:p-1 landscape:p-1 */
@media (orientation: portrait) {
  .portrait\:p-1 {
    padding: 0.25rem;
  }
}
@media (orientation: landscape) {
  .landscape\:p-1 {
    padding: 0.25rem;
  }
}

/* media-order-stable-2: landscape:p-1 portrait:p-1 */
@media (orientation: portrait) {
  .portrait\:p-1 {
    padding: 0.25rem;
  }
}
@media (orientation: landscape) {
  .landscape\:p-1 {
    padding: 0.25rem;
  }
}

/* supports-*: supports-[container-type]:grid supports-[display:grid]:grid */
@supports (container-type: var(--tw)) {
  .supports-\[container-type\]\:grid {
    display: grid;
  }
}
@supports (display:grid) {
  .supports-\[display\:grid\]\:grid {
    display: grid;
  }
}

/* has-*: has-[figcaption]:inline-block has-[>_.potato]:table has-[>_h1_+_h2]:contents has-[h2]:has-[.banana]:hidden */
.has-\[figcaption\]\:inline-block:has(figcaption) {
  display: inline-block;
}
.has-\[\>_\.potato\]\:table:has(> .potato) {
  display: table;
}
.has-\[\>_h1_\+_h2\]\:contents:has(> h1 + h2) {
  display: contents;
}
.has-\[h2\]\:has-\[\.banana\]\:hidden:has(.banana):has(h2) {
  display: none;
}

/* aria-*: aria-checked:underline aria-[sort=ascending]:underline peer-aria-[labelledby='a_b']:underline */
.aria-\[sort\=ascending\]\:underline[aria-sort=ascending],
.aria-checked\:underline[aria-checked="true"],
.peer[aria-labelledby='a b'] ~ .peer-aria-\[labelledby\=\'a_b\'\]\:underline {
  text-decoration-line: underline;
}

/* data-*: data-checked:underline data-[position=top]:underline peer-data-[foo='bar_baz']:underline */
.data-\[position\=top\]\:underline[data-position=top],
.data-checked\:underline[data-ui~="checked"],
.peer[data-foo='bar baz'] ~ .peer-data-\[foo\=\'bar_baz\'\]\:underline {
  text-decoration-line: underline;
}

/* disable-rule: p-4 m-4 */
.m-4 {
  margin: 1rem;
}

/* disable-opacity: text-slate-200 bg-orange-300 border-blue-100 border-black/20 */
.border-blue-100 {
  border-color: #dbeafe;
}
.bg-orange-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
}
.text-slate-200 {
  color: #e2e8f0;
}

/* group-rules: first:p-2 p-2 last:p-2 before:mt-[3px] after:mt-[3px] */
.after\:mt-\[3px\]::after,
.before\:mt-\[3px\]::before {
  margin-top: 3px;
}
.first\:p-2:first-child,
.last\:p-2:last-child,
.p-2 {
  padding: 0.5rem;
}

/* custom-config: p-4 p-6 m-4 */
.m-4 {
  margin: 1rem;
}
.p-4 {
  padding: 4px;
}

/* extend-config: p-4 p-6 m-4 4xl:p-2 */
.m-4 {
  margin: 1rem;
}
.p-4 {
  padding: 4px;
}
.p-6 {
  padding: 1.5rem;
}
@media (min-width: 2000px) {
  .\4xl\:p-2 {
    padding: 0.5rem;
  }
}

/* static-plugin: flex-center m-4 */
.m-4 {
  margin: 1rem;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* complex-plugin: m-4 flex-gap-x-4 flex-gap-y-2 flex-gap-6 */
.flex-gap-6 > * {
  margin: calc(1.5rem / 2);
}
.flex-gap-x-4 > * {
  margin-left: calc(1rem / 2);
  margin-right: calc(1rem / 2);
}
.flex-gap-y-2 > * {
  margin-top: calc(0.5rem / 2);
  margin-bottom: calc(0.5rem / 2);
}
.m-4 {
  margin: 1rem;
}

/* shortcuts: btn btn-green */
.btn {
  padding-top: 0.5rem; padding-bottom: 0.5rem;
  padding-left: 1rem; padding-right: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  --tw-shadow-color: rgb(0 0 0 / 0.1); box-shadow: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}
.btn-green {
  --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity));
  &:hover { --tw-bg-opacity: 1; background-color: rgb(21 128 61 / var(--tw-bg-opacity)); }
}

/* safelist: m-4 */
.m-4 {
  margin: 1rem;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-9 {
  padding: 2.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-11 {
  padding: 2.75rem;
}
.p-12 {
  padding: 3rem;
}
.p-14 {
  padding: 3.5rem;
}
.p-16 {
  padding: 4rem;
}
.p-20 {
  padding: 5rem;
}
.p-24 {
  padding: 6rem;
}
.p-28 {
  padding: 7rem;
}
.p-32 {
  padding: 8rem;
}
.p-36 {
  padding: 9rem;
}
.p-40 {
  padding: 10rem;
}
.p-44 {
  padding: 11rem;
}
.p-48 {
  padding: 12rem;
}
.p-52 {
  padding: 13rem;
}
.p-56 {
  padding: 14rem;
}
.p-60 {
  padding: 15rem;
}
.p-64 {
  padding: 16rem;
}
.p-72 {
  padding: 18rem;
}
.p-80 {
  padding: 20rem;
}
.p-96 {
  padding: 24rem;
}
.p-px {
  padding: 1px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3\.5 {
  padding: 0.875rem;
}

/* blocklist: m-4 invisible */
.m-4 {
  margin: 1rem;
}

