Add support for arbitrary properties

[adamwathan]

This PR adds support for using classes that define completely arbitrary CSS property/value pairs:

<div class="[paint-order:markers]">

On its own this isn't that useful, since you could also just do this with inline styles. Where this becomes more powerful is when you combine it with modifiers like our responsive modifiers, or hover, focus, etc.

<div class="[paint-order:markers] md:[paint-order:normal]">

Inline styles don't let you use pseudo-classes or media queries, but this feature does, making it sort of like a more powerful version of inline styles.

It lets people use CSS properties Tailwind doesn't include yet with all the power you get with Tailwind's built-in utilities, which makes the user experience a lot less frustrating when you need something obscure or new that we haven't added yet.

Works with CSS variables too which is pretty cool:

<div class="[--my-var:2rem] lg:[--my-var:4rem]">

Like other arbitrary stuff, you use _ to represent spaces where necessary:

<div class="[margin:2px_4px_5px_1px]">

[techniq]

@adamwathan This is great, thanks!

Btw, it might be worth providing an example of accessing the theme within an arbitrary property, as this also fulfills my idea for CSS theme color variables:

<div class="[--color:theme(colors.blue.500)]" />

[adamwathan]

Ah yeah that should honestly just work 👍🏻

[techniq]

@adamwathan It does, I was just confirming :). Here's an example

[minischetti]

Lovely! My team would like to adopt the JIT engine but are currently using a defined style system with Tailwind that we'd prefer to keep restricted under current circumstances. We haven't had a need yet to override. The documentation mentioned that a strict mode may come in the future. Is this still being considered?

https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support

"We’ll likely add some form of “strict mode” in the future for power-hungry team leads who don’t trust their colleagues to use this feature responsibly."

As an alternative, perhaps we can do this via linting for now.

Thanks in advance and congrats on the 3.0.0 release!