Tailwindcss-jit impact

[vjpr]

How does the new 'tailwindcss-jit' fit into twin?

[ben-rogerson]

Hey there,
Twin has always generated styles ahead of time - so the jit package won't be needed by twin.
Regarding output though - there are some integrations/presets coming (like linaria) that'll give you a similar result with the built css.

[behzadmehrabi]

is there going to be a way to have Arbitrary value support as JIT has already?

[ben-rogerson]

Since v2.5.0, twin now has support for the features added with the tailwind JIT mode.

Arbitrary values - Supported since v2.5.0 🎉

tw`top-[calc(100vh - 2rem)]`

// ↓ ↓ ↓ ↓ ↓ ↓

;({ top: 'calc(100vh - 2rem)' })

Similar twin’s “short css” syntax, arbitrary values use square brackets to allow custom css values instead of classes built from your tailwind.config.js.

This is a good solution for those unique “once off” values that every project requires which you may not want to add to your tailwind.config.js.

Read more about arbitrary values →

Important prefix - Supported since v2.5.0 🎉

Use a bang ! prefix to add important styles:

tw`!block`;

// ↓ ↓ ↓ ↓ ↓ ↓

;({ "display": "block !important" })

See the pr for more info →

All variants enabled

Twin has a cartload of variants ready to use.

Stackable variants

Stack variants and create class sets with brackets:

<button tw="md:dark:disabled:focus:hover:(bg-gray-400 text-red-500)" />

Thanks!

[harrytran998]

thank you so much for the hard work!

[leohxj]

any plan about arbitrary value support?

[ben-rogerson]

I'm scheduling that project after I finish the current one with the screen import.

[ben-rogerson]

Support has been added in 2.5.0 🎉