JIT: Add support for before/after pseudo-elements

[adamwathan]

This PR adds support for ::before and ::after pseudo-elements, as well as the content property to the JIT engine.

Usage looks like this:

<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300">

Any utility that is applied with a before/after variant automatically includes content: "" by default to avoid having to add that yourself every single time, so the rules above are actually generated like this:

.before\:block::before {
  content: "";
  display: block;
}

This means content: "" is going to be duplicated several times in your CSS if you use this feature, but I think it's worth it for the improved developer experience given how well that will ultimately compress.

Out of the box, content-none is the only available preconfigured content utility. Those values can be of course extended in your tailwind.config.js file though, under the content key.

The content utilities have complete arbitrary value support though, which is where I think they are most useful:

<div class="before:content-['hello'] before:block ...">

They even support stuff like the attr function, so you can reference a value stored in an attribute:

<div before="hello world" class="before:content-[attr(before)] before:block ...">

I considered making this behavior the default with a fallback to an empty string if the attribute didn't exist, but ultimately decided against it since deciding on the name for the default attribute is tricky and introduces a lot of naming collision potential in people's real world projects.

As mentioned earlier, these features are JIT only.

[melMass]

I might be wrong, but I can't extend before and after to support dark?

module.exports = {
	variants: {
		extend: {
			before: ['dark']
		},
	},
}

Because I have the following error:

variantsValue is not iterable

I tried:

• dark:after:bg-blue-500
• after:dark:bg-blue-500

EDIT

I think I have nailed down the issue, there is no need to extend, it seems to work, but the content is not (I'm not using it to set content), so it sets the content to "" when using the dark variant, and dark:after:content-['hello'] is not working