JIT Improvements

go.raybo.org/5Yfd

Just in time also changes a few ways that you work with Tailwind CSS for the better. Let's take a look.

Opacity Shorthand

Before

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

After

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

There's an additional shorthand you can use when in JIT mode. You can use a slash to specify the opacity of an element.

Caret Color

  • caret-COL-STR
transparent current black white
gray red yellow green blue indigo purple pink
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900

You can now change the color of the cursor to any of the default colors in JIT mode, but also using any of the custom class names.

Side Border Colors

  • border(-SID)(-COL)(-STR)
    • SID

      t r b l
    • STR

      0 2 4 8
  • `COL
transparent current black white
gray red yellow green blue indigo purple pink
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900

Redundant Classes

filter transform

If you're using filter and transform in your code, you don't have to prefix them if you're using JIT mode.

Peer

peer-*

Another addition is the peer variants. It's a full set of classes that let you target sibling elements instead of parent elements.

You can use this to create all types of effects, for example style an element when a checkbox is checked or create floating labels.

you have to be careful because it can only target previous siblings.

<li class="peer-focus-within:bg-red-300 first-of-type:font-bold first-of-type:text-red-500">Red</li>
<li class="peer first-of-type:font-bold first-of-type:text-red-500 empty:bg-yellow-200" contenteditable="true"></li>
<li class="peer-focus-within:bg-red-300 first-of-type:font-bold first-of-type:text-red-500">Bubbles</li>

Important Apply

  • !important

You can also create applies with the important CSS keyword to make sure that some of your styles aren't overriden.

@apply active:bg-gray-500
  hover:bg-gray-500
  hover:text-white cursor-pointer
  border-gray-500
  rounded-md
  inline-block
  p-2
  mt-2
  mb-4;
@apply border-4 !important;