Arbitrary values

[ben-rogerson]

This PR brings arbitrary values which are a great way to add once-off values that don’t need to be in your tailwind config:

tw`top-[calc(100vh - 2rem)]`
// ↓ ↓ ↓ ↓ ↓ ↓
;({ top: 'calc(100vh - 2rem)' })

Popularised in Tailwind's "Just-in-Time Mode", arbitrary values use square brackets to add custom css values instead of classes built from your tailwind config.

Supported classes

Generally the rule is: Dynamic classes (like bg-red-500) support arbitrary values, while static classes like block don't.

This list of tailwind classes support arbitrary values:

tw`top-[50px]`
tw`bottom-[50px]`
tw`left-[50px]`
tw`right-[50px]`
tw`inset-y-[50px]`
tw`inset-x-[50px]`
tw`inset-[50px]`

tw`z-[-1]`

tw`flex-grow-[1]`
tw`flex-shrink-[1]`

tw`order-[1]`

tw`grid-cols-[repeat(5, minmax(0, 5fr))]`
tw`grid-rows-[repeat(5, minmax(0, 5fr))]`
tw`auto-cols-[minmax(0, 5fr)]`
tw`auto-rows-[minmax(0, 5fr)]`

tw`gap-[50px]`
tw`gap-x-[50px]`
tw`gap-y-[50px]`

tw`pt-[50px]`
tw`pr-[50px]`
tw`pb-[50px]`
tw`pl-[50px]`
tw`px-[50px]`
tw`py-[50px]`
tw`p-[50px]`

tw`mt-[50px]`
tw`mr-[50px]`
tw`mb-[50px]`
tw`ml-[50px]`
tw`mx-[50px]`
tw`my-[50px]`
tw`m-[50px]`

tw`w-[50px]`
tw`min-w-[50px]`
tw`max-w-[50px]`
tw`h-[50px]`
tw`min-h-[50px]`
tw`max-h-[50px]`

tw`tracking-[50px]`
tw`leading-[50px]`

tw`text-opacity-[0.5]`
tw`text-[red]`

tw`bg-opacity-[0.5]`
tw`bg-[red]`

tw`from-[red]`
tw`via-[orange]`
tw`to-[yellow]`

tw`border-t-[50px]`
tw`border-b-[50px]`
tw`border-l-[50px]`
tw`border-r-[50px]`
tw`border-opacity-[0.5]`
tw`border-[50px]`

tw`rounded-tl-[50px]`
tw`rounded-tr-[50px]`
tw`rounded-br-[50px]`
tw`rounded-bl-[50px]`
tw`rounded-t-[50px]`
tw`rounded-r-[50px]`
tw`rounded-b-[50px]`
tw`rounded-l-[50px]`
tw`rounded-[50px]`

tw`ring-opacity-[0.5]`
tw`ring-offset-[50px]`
tw`ring-[50px]`

tw`opacity-[0.5]`
tw`blur-[0.5]`
tw`brightness-[0.5]`
tw`contrast-[0.5]`
tw`grayscale-[0.5]`
tw`hue-rotate-[25deg]`
tw`invert-[0.5]`
tw`saturate-[0.5]`
tw`sepia-[0.5]`

tw`backdrop-blur-[0.5]`
tw`backdrop-brightness-[0.5]`
tw`backdrop-contrast-[0.5]`
tw`backdrop-grayscale-[0.5]`
tw`backdrop-hue-rotate-[25deg]`
tw`backdrop-invert-[0.5]`
tw`backdrop-opacity-[0.5]`
tw`backdrop-saturate-[0.5]`
tw`backdrop-sepia-[0.5]`

tw`scale-x-[0.5]`
tw`scale-y-[0.5]`
tw`scale-[0.5]`
tw`rotate-[25deg]`
tw`translate-x-[10px]`
tw`translate-y-[10px]`
tw`skew-x-[10px]`
tw`skew-y-[10px]`
tw`cursor-[help]`
tw`fill-[red]`
tw`stroke-[red]`

tw`content-['hi']`

---

Read more about Arbitrary values →

[leohxj]

which Arbitrary can control font-size?

in tailwincss JIT, it can use text-[24px]

[ben-rogerson]

which Arbitrary can control font-size?

in tailwincss JIT, it can use text-[24px]

Both of these will work in the next release:

import tw from "twin.macro";

tw`text-[24px]`;
tw`text-[length:24px]`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "fontSize": "24px"
});
({
  "fontSize": "24px"
});

For now, use short css:

tw`font-size[24px]`