tests/08-arbitrary-values.test.html

<!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="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-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
    <div class="bg-opacity-[0.11]"></div>
    <div class="border-[#f00]"></div>
    <div class="border-[2.5px]"></div>
    <div class="w-[3.23rem]"></div>
    <div class="w-[calc(100%+1rem)]"></div>
    <div class="w-[var(--width)]"></div>
    <div class="h-[3.23rem]"></div>
    <div class="h-[calc(100%+1rem)]"></div>
    <div class="h-[var(--height)]"></div>
    <div class="space-x-[20cm]"></div>
    <div class="space-x-[calc(20%-1cm)]"></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="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
    <div class="text-[2.23rem]"></div>
    <div class="duration-[2s]"></div>
    <div class="mt-[clamp(30px,100px)]"></div>
    <div class="duration-[var(--app-duration)]"></div>
    <div class="p-[var(--app-padding)]"></div>
    <div class="inset-[11px]"></div>
  </body>
</html>