The JIT release

This release brings the same special features we all love from the Tailwind JIT release! (v2.2.0-2.2.7) 🎉🌮
As this is the same feature set as Tailwind, you can read some more information about each feature in the Tailwind release notes.

Larger features

A bunch of new variants

• peer-*: variants for styling sibling elements (PR)
• first-letter: and first-line: pseudo-elements (PR)
• selection: for styling text selections (PR)
• marker: for styling list markers (PR)
• and more: autofill:, in-range:, out-of-range:, first-letter:, first-line:, only:, empty:, selection:, marker:, rtl: and ltr: (PR)

Check the variant config for a full list →

Shorthand color opacity syntax (PR)

Add a slash opacity value to set the opacity on any color classes:

tw`bg-black/50`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "backgroundColor": "rgba(0, 0, 0, 0.5)"
});

This slash value comes from your opacity setting in your tailwind config.
For custom slash opacity values, use square brackets:

tw`bg-black/[.22]`
tw`bg-black/[--my-opacity-variable]`

Extended arbitrary value support (PR)

The "dash square bracket" syntax adds custom values on just about every dynamic class (like bg-[xxx], not block):

tw`col-start-[73] placeholder-[#aabbcc] object-[50%]`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "gridColumnStart": "73",
  "::placeholder": {
    "--tw-placeholder-opacity": "1",
    "color": "rgba(170, 187, 204, var(--tw-placeholder-opacity))"
  },
  "objectPosition": "50%"
});

This feature almost replace twin's "short css" feature but short css is still great for more obscure css as you can specify custom properties too:

tw`--my-var[red]`
tw`-webkit-gradient[gradient here]`

Per-side border color utilities (PR)

You can now specify border color and border width on a specific border direction:

// Colors
tw`border-t-gray-50`;
tw`border-b-red-500`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "--tw-border-opacity": "1",
  "borderTopColor": "rgba(249, 250, 251, var(--tw-border-opacity))"
});
({
  "--tw-border-opacity": "1",
  "borderBottomColor": "rgba(239, 68, 68, var(--tw-border-opacity))"
});

// Widths
tw`border-t-4`;
tw`border-b-4`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "borderTopWidth": "4px"
});
({
  "borderBottomWidth": "4px"
}); 

Smaller features

• before: and after: variants now automatically add content: '' (PR)
  No more requirement for the content class every time we use pseudo classes
• Simplified transform and filter composition
  Now there's no need to add transform or filter to make your actual transform or filter classes work (Possible breaking change - check Adams PR notes)
• Add new transform-cpu class
  This class uses translateX and translateY instead of translate3d which is added by transform-gpu
• Background origin utilities (Thanks @theonesean) (PR)
  Classes for controlling how an element's background is positioned relative to borders, padding, and content - Docs
• Caret color utilities (PR)
  Specify the color of the carat in textareas/inputs/contenteditables (eg: tw`caret-red-500` )

Support

If you’re kicking ass with twin - especially if you’re in a team - then please consider becoming a sponsor.
It will really help out with the continued development of twin - cheers! 🍻