123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" href="/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Title</title>
- <link rel="stylesheet" href="./tailwind.css" />
- </head>
- <body>
- <div class="inset-[11px]"></div>
- <div class="inset-[var(--value)]"></div>
- <div class="inset-x-[11px]"></div>
- <div class="inset-x-[var(--value)]"></div>
- <div class="inset-y-[11px]"></div>
- <div class="inset-y-[var(--value)]"></div>
- <div class="top-[11px]"></div>
- <div class="top-[var(--value)]"></div>
- <div class="right-[11px]"></div>
- <div class="right-[var(--value)]"></div>
- <div class="bottom-[11px]"></div>
- <div class="bottom-[var(--value)]"></div>
- <div class="left-[11px]"></div>
- <div class="left-[var(--value)]"></div>
- <div class="z-[123]"></div>
- <div class="z-[var(--value)]"></div>
- <div class="order-[4]"></div>
- <div class="order-[var(--value)]"></div>
- <div class="col-[7]"></div>
- <div class="col-end-[7]"></div>
- <div class="col-start-[7]"></div>
- <div class="row-[7]"></div>
- <div class="row-end-[7]"></div>
- <div class="row-start-[7]"></div>
- <div class="m-[7px]"></div>
- <div class="mx-[7px]"></div>
- <div class="my-[7px]"></div>
- <div class="mt-[7px]"></div>
- <div class="mr-[7px]"></div>
- <div class="mb-[7px]"></div>
- <div class="ml-[7px]"></div>
- <div class="mt-[clamp(30px,100px)]"></div>
- <div class="aspect-[16/9] aspect-[var(--aspect)]"></div>
- <div class="h-[3.23rem]"></div>
- <div class="h-[calc(100%+1rem)]"></div>
- <div class="h-[var(--height)]"></div>
- <div class="max-h-[3.23rem]"></div>
- <div class="max-h-[calc(100%+1rem)]"></div>
- <div class="max-h-[var(--height)]"></div>
- <div class="min-h-[3.23rem]"></div>
- <div class="min-h-[calc(100%+1rem)]"></div>
- <div class="min-h-[var(--height)]"></div>
- <div class="w-[0]"></div>
- <div class="w-[3.23rem]"></div>
- <div class="w-[calc(100%+1rem)]"></div>
- <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
- <div class="w-[var(--width)]"></div>
- <div class="w-[var(--width,calc(100%+1rem))]"></div>
- <div class="w-[calc(100%/3-1rem*2)]"></div>
- <div class="min-w-[3.23rem]"></div>
- <div class="min-w-[calc(100%+1rem)]"></div>
- <div class="min-w-[var(--width)]"></div>
- <div class="max-w-[3.23rem]"></div>
- <div class="max-w-[calc(100%+1rem)]"></div>
- <div class="max-w-[var(--width)]"></div>
- <div class="flex-[var(--flex)]"></div>
- <div class="flex-shrink-[var(--shrink)]"></div>
- <div class="shrink-[var(--shrink)]"></div>
- <div class="flex-grow-[var(--grow)]"></div>
- <div class="grow-[var(--grow)]"></div>
- <div class="basis-[var(--basis)]"></div>
- <div class="origin-[50px_50px]"></div>
- <div class="translate-x-[12%]"></div>
- <div class="translate-x-[var(--value)]"></div>
- <div class="translate-y-[12%]"></div>
- <div class="translate-y-[var(--value)]"></div>
- <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
- <div class="skew-x-[3px]"></div>
- <div class="skew-x-[var(--value)]"></div>
- <div class="skew-y-[3px]"></div>
- <div class="skew-y-[var(--value)]"></div>
- <div class="scale-[0.7]"></div>
- <div class="scale-[var(--value)]"></div>
- <div class="scale-x-[0.7]"></div>
- <div class="scale-x-[var(--value)]"></div>
- <div class="scale-y-[0.7]"></div>
- <div class="scale-y-[var(--value)]"></div>
- <div class="animate-[pong_1s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
- <div class="animate-[var(--value)]"></div>
- <div class="scroll-m-[7px]"></div>
- <div class="scroll-mx-[7px]"></div>
- <div class="scroll-my-[7px]"></div>
- <div class="scroll-mt-[7px]"></div>
- <div class="scroll-mr-[7px]"></div>
- <div class="scroll-mb-[7px]"></div>
- <div class="scroll-ml-[7px]"></div>
- <div class="scroll-mt-[var(--scroll-margin)]"></div>
- <div class="scroll-p-[7px]"></div>
- <div class="scroll-px-[7px]"></div>
- <div class="scroll-py-[7px]"></div>
- <div class="scroll-pt-[7px]"></div>
- <div class="scroll-pr-[7px]"></div>
- <div class="scroll-pb-[7px]"></div>
- <div class="scroll-pl-[7px]"></div>
- <div class="scroll-pt-[var(--scroll-padding)]"></div>
- <div class="cursor-[pointer]"></div>
- <div class="cursor-[url(hand.cur)_2_2,pointer]"></div>
- <div class="cursor-[url('./path_to_hand.cur')_2_2,pointer]"></div>
- <div class="cursor-[var(--value)]"></div>
- <div class="list-['\1F44D']"></div>
- <div class="list-[var(--value)]"></div>
- <div class="columns-[20] columns-[var(--columns)]"></div>
- <div class="auto-cols-[minmax(10px,auto)]"></div>
- <div class="auto-rows-[minmax(10px,auto)]"></div>
- <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
- <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
- <div class="grid-rows-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
- <div class="gap-[20px]"></div>
- <div class="gap-[var(--value)]"></div>
- <div class="gap-x-[20px]"></div>
- <div class="gap-x-[var(--value)]"></div>
- <div class="gap-y-[20px]"></div>
- <div class="gap-y-[var(--value)]"></div>
- <div class="space-x-[20cm]"></div>
- <div class="space-x-[calc(20%-1cm)]"></div>
- <div class="space-y-[20cm]"></div>
- <div class="space-y-[calc(20%-1cm)]"></div>
- <div class="divide-x-[20cm]"></div>
- <div class="divide-x-[calc(20%-1cm)]"></div>
- <div class="divide-y-[20cm]"></div>
- <div class="divide-y-[calc(20%-1cm)]"></div>
- <div class="divide-[black]"></div>
- <div class="divide-[var(--value)]"></div>
- <div class="divide-opacity-[0.8]"></div>
- <div class="divide-opacity-[var(--value)]"></div>
- <div class="rounded-[11px]"></div>
- <div
- class="
- rounded-t-[var(--radius)]
- rounded-r-[var(--radius)]
- rounded-b-[var(--radius)]
- rounded-l-[var(--radius)]
- "
- ></div>
- <div
- class="
- rounded-tr-[var(--radius)]
- rounded-br-[var(--radius)]
- rounded-bl-[var(--radius)]
- rounded-tl-[var(--radius)]
- "
- ></div>
- <div class="border-[#f00]"></div>
- <div class="border-[red_black]"></div>
- <div class="border-[2.5px]"></div>
- <div class="border-[color:var(--value)]"></div>
- <div class="border-[length:var(--value)]"></div>
- <div class="border-t-[#f00]"></div>
- <div class="border-t-[2.5px]"></div>
- <div class="border-t-[color:var(--value)]"></div>
- <div class="border-t-[length:var(--value)]"></div>
- <div class="border-r-[#f00]"></div>
- <div class="border-r-[2.5px]"></div>
- <div class="border-r-[color:var(--value)]"></div>
- <div class="border-r-[length:var(--value)]"></div>
- <div class="border-b-[#f00]"></div>
- <div class="border-b-[2.5px]"></div>
- <div class="border-b-[color:var(--value)]"></div>
- <div class="border-b-[length:var(--value)]"></div>
- <div class="border-l-[#f00]"></div>
- <div class="border-l-[2.5px]"></div>
- <div class="border-l-[color:var(--value)]"></div>
- <div class="border-l-[length:var(--value)]"></div>
- <div class="border-opacity-[0.8]"></div>
- <div class="border-opacity-[var(--value)]"></div>
- <div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
- <div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
- <div class="bg-[rgb(123,_456,_123)_black]"></div>
- <div class="bg-[rgb(123_456_789)]"></div>
- <div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
- <div class="bg-[hsl(0rad,100%,50%)] bg-[hsla(0turn,100%,50%,0.3)]"></div>
- <div class="bg-[#0f0_var(--value)]"></div>
- <div class="bg-[var(--value1)_var(--value2)]"></div>
- <div class="bg-[color:var(--value1)_var(--value2)]"></div>
- <div class="bg-[url('/path-to-image.png')] bg-[url:var(--url)]"></div>
- <div class="bg-[linear-gradient(#eee,#fff)]"></div>
- <div class="bg-[linear-gradient(#eee,#fff),conic-gradient(red,orange,yellow,green,blue)]"></div>
- <div class="bg-[image(),var(--value)]"></div>
- <div class="bg-[var(--value),var(--value)]"></div>
- <div class="bg-[image:var(--value),var(--value)]"></div>
- <div class="bg-opacity-[0.11]"></div>
- <div class="bg-opacity-[var(--value)]"></div>
- <div class="from-[#da5b66] via-[#da5b66] to-[#da5b66]"></div>
- <div class="from-[var(--color)] via-[var(--color)] to-[var(--color)]"></div>
- <div class="bg-[length:200px_100px]"></div>
- <div class="bg-[length:var(--value)]"></div>
- <div class="bg-[center_top_1rem]"></div>
- <div class="bg-[position:200px_100px]"></div>
- <div class="bg-[position:var(--value)]"></div>
- <div class="fill-[#da5b66]"></div>
- <div class="fill-[var(--value)]"></div>
- <div class="fill-[url(#icon-gradient)]"></div>
- <div class="stroke-[#da5b66]"></div>
- <div class="stroke-[color:var(--value)]"></div>
- <div class="stroke-[url(#icon-gradient)]"></div>
- <div class="stroke-[20px]"></div>
- <div class="stroke-[length:var(--value)]"></div>
- <div class="object-[50%,50%]"></div>
- <div class="object-[top,right]"></div>
- <div class="object-[var(--position)]"></div>
- <div class="p-[7px]"></div>
- <div class="px-[7px]"></div>
- <div class="py-[7px]"></div>
- <div class="pt-[7px]"></div>
- <div class="pr-[7px]"></div>
- <div class="pb-[7px]"></div>
- <div class="pl-[7px]"></div>
- <div class="pt-[clamp(30px,100px)]"></div>
- <div class="indent-[50%] indent-[var(--indent)]"></div>
- <div class="align-[10em]"></div>
- <div class="font-[Georgia,serif]"></div>
- <div class="font-['Gill_Sans']"></div>
- <div class="font-[sans-serif,serif]"></div>
- <div class="font-[family-name:var(--value)]"></div>
- <div class="font-[serif,var(--value)]"></div>
- <div class="font-['Some_Font',sans-serif]"></div>
- <div class="font-['Some_Font','Some_Other_Font']"></div>
- <div class="font-['Some_Font',var(--other-font)]"></div>
- <div class="font-[var(--font1),var(--font2)]"></div>
- <div class="font-[invalid_font_because_spaces]"></div>
- <div class="text-[0]"></div>
- <div class="text-[2.23rem]"></div>
- <div class="text-[length:var(--font-size)]"></div>
- <div class="text-[angle:var(--angle)]"></div>
- <div class="text-[min(10vh,100px)]"></div>
- <div class="font-[300]"></div>
- <div class="font-[number:lighter]"></div>
- <div class="font-[number:var(--value)]"></div>
- <div class="leading-[var(--leading)]"></div>
- <div class="tracking-[var(--tracking)]"></div>
- <div class="text-[black]"></div>
- <div class="text-[rgb(123,123,123)]"></div>
- <div class="text-[rgb(123,_123,_123)]"></div>
- <div class="text-[rgb(123_123_123)]"></div>
- <div class="text-[color:var(--color)]"></div>
- <div class="text-opacity-[0.8]"></div>
- <div class="text-opacity-[var(--value)]"></div>
- <div class="decoration-[black]"></div>
- <div class="decoration-[rgb(123,123,123)]"></div>
- <div class="decoration-[rgb(123,_123,_123)]"></div>
- <div class="decoration-[rgb(123_123_123)]"></div>
- <div class="decoration-[color:var(--color)]"></div>
- <div class="decoration-[length:10px]"></div>
- <div class="underline-offset-[10px]"></div>
- <div class="placeholder-[var(--placeholder)]"></div>
- <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>
- <div class="caret-[black]"></div>
- <div class="caret-[var(--value)]"></div>
- <div class="accent-[#bada55]"></div>
- <div class="accent-[var(--accent-color)]"></div>
- <div class="opacity-[0.8]"></div>
- <div class="opacity-[var(--opacity)]"></div>
- <div class="shadow-[0px_1px_2px_black]"></div>
- <div class="shadow-[shadow:var(--value)]"></div>
- <div class="outline-[black]"></div>
- <div class="outline-[10px]"></div>
- <div class="outline-[color:var(--outline)]"></div>
- <div class="outline-[length:var(--outline)]"></div>
- <div class="outline-offset-[10px]"></div>
- <div class="ring-[#76ad65]"></div>
- <div class="ring-[color:var(--value)]"></div>
- <div class="ring-offset-[#76ad65]"></div>
- <div class="ring-[10px]"></div>
- <div class="ring-[length:(var(--value))]"></div>
- <div class="ring-offset-[#ad672f]"></div>
- <div class="ring-offset-[color:var(--value)]"></div>
- <div class="ring-offset-[19rem]"></div>
- <div class="ring-offset-[length:var(--value)]"></div>
- <div class="ring-opacity-[var(--ring-opacity)]"></div>
- <div class="blur-[15px]"></div>
- <div class="brightness-[300%]"></div>
- <div class="contrast-[2.4]"></div>
- <div class="drop-shadow-[0px_1px_2px_black]"></div>
- <div class="grayscale-[0.55]"></div>
- <div class="hue-rotate-[0.8turn]"></div>
- <div class="invert-[0.75]"></div>
- <div class="saturate-[180%]"></div>
- <div class="sepia-[0.2]"></div>
- <div class="backdrop-blur-[11px]"></div>
- <div class="backdrop-brightness-[1.23]"></div>
- <div class="backdrop-contrast-[0.87]"></div>
- <div class="backdrop-grayscale-[0.42]"></div>
- <div class="backdrop-hue-rotate-[1.57rad]"></div>
- <div class="backdrop-invert-[0.66]"></div>
- <div class="backdrop-opacity-[22%]"></div>
- <div class="backdrop-saturate-[144%]"></div>
- <div class="backdrop-sepia-[0.38]"></div>
- <div class="transition-[opacity,width]"></div>
- <div class="delay-[var(--delay)]"></div>
- <div class="duration-[2s]"></div>
- <div class="duration-[var(--app-duration)]"></div>
- <div class="will-change-[top,left] will-change-[var(--will-change)]"></div>
- <div class="content-['hello']"></div>
- <div class="content-[attr(content-before)]"></div>
- <div class="content-['>']"></div>
- <!-- Balancing issues, this is not checking the validity of the actual value, but purely syntax-wise -->
- <div class="w-[do-not-generate-this]w-[it-is-invalid-syntax]"></div>
- <!-- INVALID -->
- <div class="grid-cols-[[linename],1fr,auto]"></div>
- <!-- VALID -->
- <div class="w-[{}]"></div>
- <!-- VALID -->
- <div class="w-[{{}}]"></div>
- <!-- VALID -->
- <div class="w-[[]]"></div>
- <!-- VALID -->
- <div class="w-[[[]]]"></div>
- <!-- VALID -->
- <div class="w-[()]"></div>
- <!-- VALID -->
- <div class="w-[(())]"></div>
- <!-- VALID -->
- <div class="w-[][]"></div>
- <!-- INVALID -->
- <div class="w-[)(]"></div>
- <!-- INVALID -->
- <div class="w-[}{]"></div>
- <!-- INVALID -->
- <div class="w-[][]]"></div>
- <!-- INVALID -->
- <div class="w-[)()]"></div>
- <!-- INVALID -->
- <div class="w-[}{}]"></div>
- <!-- INVALID -->
- <div class="w-['][]']"></div>
- <!-- VALID -->
- <div class="w-[')()']"></div>
- <!-- VALID -->
- <div class="w-['}{}']"></div>
- <!-- VALID -->
- <div class="w-[{[}]]"></div>
- <!-- INVALID -->
- <div class="w-[[{]}]"></div>
- <!-- INVALID -->
- <div class="w-[{(})]"></div>
- <!-- INVALID -->
- <div class="w-[({)}]"></div>
- <!-- INVALID -->
- <div class="w-[([)]]"></div>
- <!-- INVALID -->
- <div class="w-[[(])]"></div>
- <!-- INVALID -->
- </body>
- </html>
|