tailwind-rs 0.2.0

Tailwind translater for html and more
Documentation

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/d/d5/Tailwind CSS Logo.svg"></link>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <title>Arbitrary Value</title>
    <link rel="stylesheet" href="./arbitrary-values.css"></link>
</head>
<body>
<div data-tw="r2WFEUMeFnT"></div>
<div data-tw="oYErbfRhTxB"></div>
<div data-tw="MHKZ81dyCYG"></div>
<div data-tw="esrNvA01sqA"></div>
<div data-tw="qkuGejBFnqG"></div>
<div data-tw="jX8FAwGsJkQ"></div>
<div data-tw="rvBzrOWDydW"></div>
<div data-tw="am7RZcvadmE"></div>
<div data-tw="Lt6P9N8EoNL"></div>
<div data-tw="VXMyuXsrgFM"></div>
<div data-tw="zoiG8azaj2X"></div>
<div data-tw="oNLYmPkDpAT"></div>
<div data-tw="IAshOCB6PNQ"></div>
<div data-tw="LFl2IgleMaB"></div>

<div data-tw="BQswf79mtiR"></div>
<div data-tw="ec3LCEBHd3K"></div>

<div data-tw="tcgFOX4tFMQ"></div>
<div data-tw="OJSzXUO5seB"></div>

<div data-tw="WcuKiRNlkVI"></div>
<div data-tw="" class="col-end-[7]"></div>
<div data-tw="" class="col-start-[7]"></div>

<div data-tw="yVskrHyGHOY"></div>
<div data-tw="" class="row-end-[7]"></div>
<div data-tw="" class="row-start-[7]"></div>

<div data-tw="xe78KERchZK"></div>
<div data-tw="NhbfAavFpXH"></div>
<div data-tw="xe78KERchZK"></div>
<div data-tw="jGT1nA3G3kB"></div>
<div data-tw="vFtjJkQTqKM"></div>
<div data-tw="z5rtwSaMeSD"></div>
<div data-tw="QlWCkmBvy0R"></div>
<div data-tw="KYb6GzpfOMN"></div>

<div data-tw="NlRWaubKRiU"></div>

<div data-tw="E7MekXl58vV"></div>
<div data-tw="" class="h-[calc(100%+1rem)]"></div>
<div data-tw="" class="h-[var(--height)]"></div>

<div data-tw="YFwWuYkl2uZ"></div>
<div data-tw="" class="max-h-[calc(100%+1rem)]"></div>
<div data-tw="" class="max-h-[var(--height)]"></div>

<div data-tw="UUMnD3OBU0Z"></div>
<div data-tw="" class="min-h-[calc(100%+1rem)]"></div>
<div data-tw="" class="min-h-[var(--height)]"></div>

<div data-tw="cZMqrxvwz3B"></div>
<div data-tw="E7MekXl58vV"></div>
<div data-tw="" class="w-[calc(100%+1rem)]"></div>
<div data-tw="" class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
<div data-tw="" class="w-[var(--width)]"></div>
<div data-tw="" class="w-[var(--width,calc(100%+1rem))]"></div>
<div data-tw="" class="w-[calc(100%/3-1rem*2)]"></div>

<div data-tw="UUMnD3OBU0Z"></div>
<div data-tw="" class="min-w-[calc(100%+1rem)]"></div>
<div data-tw="" class="min-w-[var(--width)]"></div>

<div data-tw="YFwWuYkl2uZ"></div>
<div data-tw="" class="max-w-[calc(100%+1rem)]"></div>
<div data-tw="" class="max-w-[var(--width)]"></div>

<div data-tw="WxLAYtWuYuG"></div>
<div data-tw="" class="flex-shrink-[var(--shrink)]"></div>
<div data-tw="xtlK5xg0V7A"></div>
<div data-tw="" class="flex-grow-[var(--grow)]"></div>
<div data-tw="oSSkfLtRrkK"></div>
<div data-tw="bkCPXw5mgcY"></div>

<div data-tw="XZCC0XsiMdM"></div>

<div data-tw="O9Nc3n5HVxP"></div>
<div data-tw="HzauCdwTO9A"></div>
<div data-tw="uZsGG48FZ5H"></div>
<div data-tw="gqR8A7QBPAN"></div>

<div data-tw="tLp7Em5I4AM"></div>

<div data-tw="UmJGzmF3EnI"></div>
<div data-tw="oUnsItBRTkM"></div>
<div data-tw="JVcg8wLrtkX"></div>
<div data-tw="kPOg3MQesMT"></div>

<div data-tw="segKjfkLpqS"></div>
<div data-tw="k3QA2RW0CcY"></div>
<div data-tw="ATakmUrzSGV"></div>
<div data-tw="ZcwgaMht20T"></div>
<div data-tw="MrCSkg486DB"></div>
<div data-tw="qwYATg8t6aZ"></div>

<div data-tw="w7Bi88rI9KJ"></div>
<div data-tw="lYpuxvIJaxR"></div>

<div data-tw="PtBGSLy5plK"></div>
<div data-tw="qwivtZOqpBT"></div>
<div data-tw="PtBGSLy5plK"></div>
<div data-tw="BpkRtDNS4oJ"></div>
<div data-tw="KVBo1MkHdwW"></div>
<div data-tw="ffevLzKK4YQ"></div>
<div data-tw="uLfGJAHrXxQ"></div>
<div data-tw="Todg323NUqG"></div>

<div data-tw="WvVkAkfMfLC"></div>
<div data-tw="QcNNEcHewWK"></div>
<div data-tw="WvVkAkfMfLC"></div>
<div data-tw="oaPIjg9DAhO"></div>
<div data-tw="MUn5NW7e5dH"></div>
<div data-tw="yyaa1s9QWuX"></div>
<div data-tw="Gv6vt2keoCI"></div>
<div data-tw="XZEcGH5sIaL"></div>

<div data-tw="x9sNqBUCFBH"></div>
<div data-tw="kOE8wtMFF3Y"></div>
<div data-tw="GdfoyZjmrSJ"></div>
<div data-tw="f0ebKMPh9PG"></div>

<div data-tw="ACStRpNhQIO"></div>
<div data-tw="DYjprXqEebV"></div>

<div data-tw="oK7w3oYq3uN"></div>

<div data-tw="Z971PRRKu8A"></div>

<div data-tw="Ee5MnfSbvBN"></div>

<div data-tw="MmVXeVfzkKX"></div>
<div data-tw="MmVXeVfzkKX"></div>

<div data-tw="E5IPbIorUcY"></div>

<div data-tw="F53bPd26DHQ"></div>
<div data-tw="" class="gap-[var(--value)]"></div>
<div data-tw="iq1mbFICe8H"></div>
<div data-tw="" class="gap-x-[var(--value)]"></div>
<div data-tw="O4OAlWPk3sI"></div>
<div data-tw="" class="gap-y-[var(--value)]"></div>

<div data-tw="lSjwXqLV4aO"></div>
<div data-tw="bSjYMBB0JEZ"></div>
<div data-tw="A7o7yxxN2GA"></div>
<div data-tw="S2YwGuRhZUA"></div>

<div data-tw="gji2piafjWE"></div>
<div data-tw="YDiFLByEXuE"></div>
<div data-tw="owxdY502adZ"></div>
<div data-tw="DWFCZdd5cNF"></div>

<div data-tw="" class="divide-[black]"></div>
<div data-tw="" class="divide-[var(--value)]"></div>

<div data-tw="" class="divide-opacity-[0.8]"></div>
<div data-tw="" class="divide-opacity-[var(--value)]"></div>

<div data-tw="Bl1wIU6LQAa"></div>
<div data-tw="" class="
    rounded-t-[var(--radius)]
    rounded-r-[var(--radius)]
    rounded-b-[var(--radius)]
    rounded-l-[var(--radius)]
"></div>
<div data-tw="" class="
    rounded-tr-[var(--radius)]
    rounded-br-[var(--radius)]
    rounded-bl-[var(--radius)]
    rounded-tl-[var(--radius)]
"></div>

<div data-tw="" class="border-[#f00]"></div>
<div data-tw="" class="border-[red black]"></div>
<div data-tw="" class="border-[2.5px]"></div>
<div data-tw="" class="border-[color:var(--value)]"></div>
<div data-tw="" class="border-[length:var(--value)]"></div>

<div data-tw="" class="border-t-[#f00]"></div>
<div data-tw="" class="border-t-[2.5px]"></div>
<div data-tw="" class="border-t-[color:var(--value)]"></div>
<div data-tw="" class="border-t-[length:var(--value)]"></div>
<div data-tw="" class="border-r-[#f00]"></div>
<div data-tw="" class="border-r-[2.5px]"></div>
<div data-tw="" class="border-r-[color:var(--value)]"></div>
<div data-tw="" class="border-r-[length:var(--value)]"></div>
<div data-tw="" class="border-b-[#f00]"></div>
<div data-tw="" class="border-b-[2.5px]"></div>
<div data-tw="" class="border-b-[color:var(--value)]"></div>
<div data-tw="" class="border-b-[length:var(--value)]"></div>
<div data-tw="" class="border-l-[#f00]"></div>
<div data-tw="" class="border-l-[2.5px]"></div>
<div data-tw="" class="border-l-[color:var(--value)]"></div>
<div data-tw="" class="border-l-[length:var(--value)]"></div>

<div data-tw="" class="border-opacity-[0.8]"></div>
<div data-tw="" class="border-opacity-[var(--value)]"></div>

<div data-tw="" class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
<div data-tw="" class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
<div data-tw="" class="bg-[rgb(123, 456, 123) black]"></div>
<div data-tw="" class="bg-[rgb(123 456 789)]"></div>
<div data-tw="" class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
<div data-tw="" class="bg-[#0f0 var(--value)]"></div>
<div data-tw="" class="bg-[var(--value1) var(--value2)]"></div>
<div data-tw="" class="bg-[color:var(--value1) var(--value2)]"></div>

<div data-tw="" class="bg-[url('/path-to-image.png')] bg-[url:var(--url)]"></div>
<div data-tw="" class="bg-[linear-gradient(#eee,#fff)]"></div>
<div data-tw="" class="bg-[linear-gradient(#eee,#fff),conic-gradient(red,orange,yellow,green,blue)]"></div>
<div data-tw="" class="bg-[image(),var(--value)]"></div>
<div data-tw="" class="bg-[var(--value),var(--value)]"></div>
<div data-tw="" class="bg-[image:var(--value),var(--value)]"></div>

<div data-tw="" class="bg-opacity-[0.11]"></div>
<div data-tw="" class="bg-opacity-[var(--value)]"></div>

<div data-tw="MJLfxhZUh1W"></div>
<div data-tw="" class="from-[var(--color)] via-[var(--color)] to-[var(--color)]"></div>

<div data-tw="" class="bg-[length:200px 100px]"></div>
<div data-tw="" class="bg-[length:var(--value)]"></div>

<div data-tw="" class="bg-[center top 1rem]"></div>
<div data-tw="" class="bg-[position:200px 100px]"></div>
<div data-tw="" class="bg-[position:var(--value)]"></div>

<div data-tw="aHsX3t1fRWE"></div>
<div data-tw="" class="fill-[var(--value)]"></div>
<div data-tw="" class="fill-[url(#icon-gradient)]"></div>

<div data-tw="" class="stroke-[#da5b66]"></div>
<div data-tw="" class="stroke-[color:var(--value)]"></div>
<div data-tw="" class="stroke-[url(#icon-gradient)]"></div>

<div data-tw="" class="stroke-[20px]"></div>
<div data-tw="" class="stroke-[length:var(--value)]"></div>

<div data-tw="yPaDZ3RUy7X"></div>
<div data-tw="LOd8aC9CgRL"></div>
<div data-tw="Qy2iPjbbY2C"></div>

<div data-tw="uEfTc4auBoT"></div>
<div data-tw="q3jCpJ6PejG"></div>
<div data-tw="uEfTc4auBoT"></div>
<div data-tw="X75zOSZkzSZ"></div>
<div data-tw="v1cABxtLt9Y"></div>
<div data-tw="LxARP8RsF4Z"></div>
<div data-tw="oB2v7BdXWHT"></div>
<div data-tw="hBhPIKbHksM"></div>

<div data-tw="fRFuLktpwdH"></div>

<div data-tw="m4RISmvdBmF"></div>

<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>

<div data-tw="" class="text-[0]"></div>
<div data-tw="" class="text-[2.23rem]"></div>
<div data-tw="" class="text-[length:var(--font-size)]"></div>
<div data-tw="" class="text-[angle:var(--angle)]"></div>
<div data-tw="" class="text-[min(10vh,100px)]"></div>

<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>
<div data-tw="waibkwWzKpA"></div>

<div data-tw="" class="leading-[var(--leading)]"></div>

<div data-tw="tHiU8PCQ5kW"></div>

<div data-tw="gvnxcOcW6RS"></div>
<div data-tw="LCiay4DwhuM"></div>
<div data-tw="LCiay4DwhuM"></div>
<div data-tw="LCiay4DwhuM"></div>
<div data-tw="" class="text-[color:var(--color)]"></div>

<div data-tw="" class="text-opacity-[0.8]"></div>
<div data-tw="" class="text-opacity-[var(--value)]"></div>

<div data-tw="lE7kdtQr8TQ"></div>
<div data-tw="lD0AtNEjZ4A"></div>
<div data-tw="pApM1RqsChR"></div>
<div data-tw="q6XWtHjfPaC"></div>
<div data-tw="Cf0jKN3G1kN"></div>

<div data-tw="j9eFkypaygS"></div>

<div data-tw="x4cKLcu9thU"></div>

<div data-tw="" class="placeholder-[var(--placeholder)]"></div>

<div data-tw="" class="placeholder-opacity-[var(--placeholder-opacity)]"></div>

<div data-tw="Acx4GquTO3V"></div>
<div data-tw="" class="caret-[var(--value)]"></div>

<div data-tw="zoaEiRkh8OB"></div>
<div data-tw="" class="accent-[var(--accent-color)]"></div>

<div data-tw="HPIl6dWvlUW"></div>
<div data-tw="HPIl6dWvlUW"></div>

<div data-tw="qs5s8khY3zW"></div>
<div data-tw="X0AInWrfMWR"></div>

<div data-tw="VQcYRdq90IK"></div>
<div data-tw="Fk2io7StUpU"></div>
<div data-tw="" class="outline-[color:var(--outline)]"></div>
<div data-tw="" class="outline-[length:var(--outline)]"></div>
<div data-tw="VrP7GFHpNDR"></div>

<div data-tw="" class="ring-[#76ad65]"></div>
<div data-tw="" class="ring-[color:var(--value)]"></div>
<div data-tw="gyXZClMsZZN"></div>
<div data-tw="" class="ring-[10px]"></div>
<div data-tw="" class="ring-[length:(var(--value))]"></div>
<div data-tw="gyXZClMsZZN"></div>
<div data-tw="gyXZClMsZZN"></div>
<div data-tw="gyXZClMsZZN"></div>
<div data-tw="gyXZClMsZZN"></div>
<div data-tw="" class="ring-opacity-[var(--ring-opacity)]"></div>

<div data-tw="KtBxb37SdGF"></div>
<div data-tw="McLuVxQ3DeZ"></div>
<div data-tw="gYJkZJ6fpPG"></div>
<div data-tw="I6v0yaMtaGB"></div>
<div data-tw="ullGHMFnnpQ"></div>
<div data-tw="qnKYbPVi2qN"></div>
<div data-tw="z92evK3d3lK"></div>
<div data-tw="Sv7wIUVEjCF"></div>
<div data-tw="sajYRHgRQ5B"></div>
<div data-tw="h7swFyCCQyC"></div>
<div data-tw="c0HDa2kaNUQ"></div>
<div data-tw="YLK8jOBbL7E"></div>
<div data-tw="QuwS8nCkiDA"></div>
<div data-tw="jpdx3VrYotQ"></div>
<div data-tw="mL1keryRI6C"></div>
<div data-tw="HrvxPIQZL5K"></div>
<div data-tw="zuQS9UJgDxK"></div>
<div data-tw="NbXPh3Vn4VC"></div>

<div data-tw="hEnSThBWp1W"></div>

<div data-tw="eFQuBzZkH6P"></div>

<div data-tw="byQkkakfQxY"></div>
<div data-tw="pYexcsuPnzR"></div>

<div data-tw="gNzJSBZMKkH"></div>

<div data-tw="sjCrvoEh3aH"></div>
<div data-tw="I4daiKKI40L"></div>
<div data-tw="C3HEtVBWrFL"></div>

<!-- Balancing issues, this is not checking the validity of the actual value, but purely syntax-wise -->
<!-- INVALID w-[][]-->
<!-- INVALID w-[][]]-->
<!-- INVALID w-[do-not-generate-this]w-[it-is-invalid-syntax]-->
<!--<div class="grid-cols-[[linename],1fr,auto]"></div>-->
<div data-tw="" class="w-[{}]"></div>
<div data-tw="" class="w-[{{}}]"></div>
<div data-tw="" class="w-[()]"></div>
<div data-tw="" class="w-[(())]"></div>
<div data-tw="" class="w-[[]]"></div>
<div data-tw="" class="w-[[[]]]"></div>
<div data-tw="" class="w-['][]']"></div>
<div data-tw="" class="w-[{[}]]"></div>
<div data-tw="" class="w-[[{]}]"></div>
<div data-tw="" class="w-[{(})]"></div>
<div data-tw="" class="w-[({)}]"></div>
<div data-tw="" class="w-[([)]]"></div>
<div data-tw="" class="w-[[(])]"></div>
<div data-tw="" class="w-[)(]"></div>
<div data-tw="" class="w-[}{]"></div>
<div data-tw="" class="w-[)()]"></div>
<div data-tw="" class="w-[}{}]"></div>
<div data-tw="" class="w-[')()']"></div>
<div data-tw="" class="w-['}{}']"></div>
</body>
</html>