Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JIT: Add support for before/after pseudo-elements #4461

merged 1 commit into from May 26, 2021


Copy link

@adamwathan adamwathan commented May 25, 2021

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.

@adamwathan adamwathan merged commit c8a5f81 into master May 26, 2021
3 checks passed
@adamwathan adamwathan deleted the pseudo-elements branch May 26, 2021
Copy link

melMass commented May 28, 2021

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


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants