JIT Variants

go.raybo.org/5YbO

Just in time adds lots of variants that you really couldn't put in a combined CSS file, or it would create a huge final CSS stylesheet.

Before/After Variants

before: after:

You now have access to before and after variants within JIT mode only. So example you can go to the emojipedia and add an icon to your page.

First Letter/Line

first-letter: first-line:

You can also use first letter and first line variants, which let you modify some text on your page. For example first-line:text-4xl will make only the first line bigger.

Selection Variant

selection:

You can also change the color of the selected text.

<body class="selection:bg-purple-800 selection:text-white">

Empty Variant

empty:

The empty variant is super helpful if you want to style an element when it doesn't have something in it.

<body class="selection:bg-purple-800 selection:text-white">

Pseudo Classes

only first-of-type last-of-type only-of-type target default indeterminate placeholder-shown autofill required valid invalid in-range out-of-range

<div class="mx-auto w-16">
  <h2 class="text-2xl font-bold text-purple-600 mt-4">Cast</h2>
  <ol>
    <li>Red</li>
    <li contenteditable="true"></li>
    <li>Bubbles</li>
  </ol>
</div>

JIT now offers additional CSS Pseudo-class support. Here's the full list of additional pseudo-classes you can use with the platform. They correspond to css pseudo-classes.

About Binaryville

On the edge of the world stands the progressive town of Binaryville, where technology is a way of life. The robots who live, work, and play in Binaryville learn from an early age that magic is made simply by combining 0's and 1's. For the Binaryville robots, every waking thought and every sleeping dream is consumed with unique permutations…and endless possibilities.

Cast

Red
Bubbles