Releases · ben-rogerson/twin.macro

10 Sep 01:00

ben-rogerson

3.0.0-rc.4

a0c5a2d

3.0.0-rc.4 Pre-release

Pre-release

Features and fixes

🌟 Update and use new tailwindcss features as soon as they're released
tailwindcss was moved to peerDependencies meaning you can install new versions of tailwindcss as soon as they're released
🌟 Full plugin support
A long time in the making, twin now works with all tailwindcss plugins!
Disabling core plugins in tailwind.config.js is now supported
Most will use this feature to turn off preflight styles
Turn off console log coloring
In some frameworks, twin's error logs are added in an error overlay that doesn't support custom log colours - you can fix the display of logs with hasLogColors: false added to your twin config
Better suggestions
Twin will make better recommendations if you get class wrong
Better performance
You'll see much faster conversions, specially in larger codebases

More at #739

Bugs / Issue discussion →

Assets 2

19 Jun 08:39

ben-rogerson

3.0.0-rc.3

c37fbb0

3.0.0-rc.3 Pre-release

Pre-release

Install release candidate 3:

npm install twin.macro@rc

Features and fixes

🌟 Deprecate short css in favour of arbitrary properties (Breaking change) #705
⭐ Add ability to disable preflight styles #707
Reduced the minimum node version to v16.14.0 54a1db2
Fix negative config matching with negative classes #704
Fix merging with an important ! prefix #702
Allow non-object values for font-size line-height property #710
Fix suggestion display on font-sizes 6d351e0

Bugs / Issue discussion →

Assets 2

01 Jun 04:11

ben-rogerson

3.0.0-rc.2

7884a9b

3.0.0-rc.2 Pre-release

Pre-release

Release candidate 2 is ready for testing!

Help test the release with:

npm install twin.macro@rc

Features and fixes

🌟 Greatly improved plugin support (daisyui/typography/aspect-ratio/etc) #685 #699
⭐ Improve tailwind.config updates by removing excessive caching #693 - thanks @mohammadsiyou
⭐ Arbitrary property classes (same as shortcss, different syntax: [color:black]) #700
⭐ Improved tailwind.config resolution in monorepos #693 - thanks @mohammadsiyou
Improved suggestions around opacity #694
Fixed border-y property #692
Fixed regression in negative config value matching #691
Use theme values in short css #690

Bugs / Issue discussion →

Contributors

mohammadsiyou

Assets 2

02 May 21:21

ben-rogerson

3.0.0-rc.1

8c4f23b

3.0.0-rc.1 Pre-release

Pre-release

Help out by testing the next major version of Twin:

npm install twin.macro@rc

Full Changelog: 2.8.2...3.0.0-rc.1

Assets 2

07 Dec 23:59

ben-rogerson

2.8.2

1e9ec1a

2.8.2

This patch contains a few changes for those using the styled-components preset.

⚠️ Possible breaking changes

Remove auto css prop
The css prop can now be added with babel-plugin-styled-components - Setup info →
Tweak the styled import preset
The default import was changed from import "styled-components/macro" to import "styled-components" - More info →

Edit: Try the new rc with the latest changes npm i twin.macro@rc

Assets 2

27 Oct 10:21

ben-rogerson

2.8.1

ebc25b3

2.8.1

Allow font face values added via addBase (#563)

Assets 2

13 Oct 01:43

ben-rogerson

2.8.0

6aa9082

The Arbitrary Variants release

🌟 New: Arbitrary Variants (#546)

The star feature of this release is the addition of a new variant that creates a custom selector for classes.

Usage is easy, just add the selector within square brackets and prefix it on any class (or round-bracketed set):

// Style child elements with the strong tag from the parent container
;<div tw="[strong]:text-red-500">
    <strong>I'm red</strong>
</div>

Before this feature, the styling above would need help from the css prop:

// Style child elements with the strong tag from the parent container
;<div css={{ strong: tw`text-red-500` }}>
    <strong>I'm red</strong>
</div>

There are a wide range of uses for Arbitrary Variants:

// Style the current element based on a theming/scoping className
;<body className="dark-theme">
    <div tw="[.dark-theme &]:(bg-black text-white)">I'm dark theme</div>
</body>

// Add custom height queries
;<div tw="[@media (min-height: 800px)]:hidden">
    I'm shown only on smaller window heights
</div>

// Add custom group selectors
;<button className="group" disabled>
    <span tw="[.group:disabled &]:text-gray-500">I'm gray</span>
</button>

// Use custom at-rules like @supports
;<div tw="[@supports (display: grid)]:grid">I'm grid</div>

// Style the current element based on a dynamic className
;const Component = ({ isLarge }) => <div className={isLarge && 'is-large'} tw="text-base [&.is-large]:text-lg">...</div>

I hope you enjoy using this powerful feature!

🐛 Bugfixes

Allow dot notation components to be styled with twin (eg: <Menu.Item tw="block">) (#534)
Add array value types for the screen import (#555) - thanks @mutewinter
Avoid bg-color classes from trumping bg-opacity-x classes (#552)
Add helpful feedback when a peer class is used as a tailwind class (#551)
Convert all numeric values to strings (#540)
Fix issue with css variables declared in :root using addBase in plugins (#521)
Enable variants to be used with the container class (#518)
Restrict debug mode to development (#497) - thanks @u3u

Contributors

mutewinter and u3u

Assets 2

1 Join discussion

22 Aug 07:14

ben-rogerson

2.7.0

ac7b194

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! 🍻

Contributors

theonesean

Assets 2

2 Join discussion

08 Jul 08:06

ben-rogerson

2.6.2

898b50e

2.6.2

Patched regression with styled-components and the autoCssProp which caused excess imports (#241)

Assets 2

03 Jul 05:55

ben-rogerson

2.6.1

70e3593

2.6.1

Fixes release 2.6.0: There was a finger slip on the last release 🤦

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contributors

🌟 New: Arbitrary Variants (#546)

🐛 Bugfixes

Contributors

Larger features

A bunch of new variants

Shorthand color opacity syntax (PR)

Extended arbitrary value support (PR)

Per-side border color utilities (PR)

Smaller features

Support

Contributors

Releases: ben-rogerson/twin.macro

3.0.0-rc.4

3.0.0-rc.3

3.0.0-rc.2

Contributors

3.0.0-rc.1

2.8.2

2.8.1

The Arbitrary Variants release

🌟 New: Arbitrary Variants (#546)

🐛 Bugfixes

Contributors

The JIT release

Larger features

A bunch of new variants

Shorthand color opacity syntax (PR)

Extended arbitrary value support (PR)

Per-side border color utilities (PR)

Smaller features

Support

Contributors

2.6.2

2.6.1