The JIT release

[ben-rogerson]

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-red-500, 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! 🍻

---

This discussion was created from the release The JIT release.

[u3u]

Hi, how can I disable preflight in version 2.7.0?
In the new version, to make transform and filter work I had to introduce global styles
Considering exporting all of these for users to freely combine or respect the corePlugins.preflight option?

twin.macro/src/config/globalStyles.js

Lines 77 to 86 in ac7b194

	const globalStyles = [
	modernNormalizeStyles,
	globalPreflightStyles,
	globalKeyframeStyles,
	globalTransformStyles,
	globalRingStyles,
	globalBoxShadowStyles,
	globalFilterStyles,
	globalBackdropStyles,
	]

[ben-rogerson]

I'd have to have a ponder on the best way to allow a "pick-n-choose" of global styles - I'm hesitant to provide more exports as this is a babel macro plugin we're working with and they don't function like normal exports.

Perhaps it could be underneath a custom tailwind.config setting, something like this:

// tailwind.config.js
module.exports = {
  theme: {},
  twin: {
    globals: ({
      modernNormalizeStyles,
      globalPreflightStyles,
      globalKeyframeStyles,
      globalTransformStyles,
      // globalRingStyles,
      // globalBoxShadowStyles,
      // globalFilterStyles,
      // globalBackdropStyles,
    }) => ({
      modernNormalizeStyles,
      globalPreflightStyles,
      globalKeyframeStyles,
      globalTransformStyles,
      // globalRingStyles,
      // globalBoxShadowStyles,
      // globalFilterStyles,
      // globalBackdropStyles,
    }),
  },
}

This would also allow custom css to be injected via your tailwind.config.

Right now, you can use patch-package to make the necessary adjustments to the twin code or provide a PR with the functionality to help speed this along.