The Arbitrary Variants release #556

ben-rogerson · 2021-10-13T01:43:45Z

ben-rogerson
Oct 13, 2021
Maintainer

🌟 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 dynamic className
;<div className={isSmall && 'is-small'} tw="text-lg [&.is-small]:text-sm">...</div>

// 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 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>

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

I hope you enjoy using this powerful feature!

🐛 Bugfixes

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

This discussion was created from the release The Arbitrary Variants release.

jvanderen1 · 2021-11-05T18:00:36Z

jvanderen1
Nov 5, 2021

Amazing! This can let us now style input components using the shadow dom or even nested react components with needing to pass complex props 🤯

Such a great addition and powerful feature! 👏🏻

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The Arbitrary Variants release #556

{{title}}

Replies: 1 comment

{{title}}

Select a reply

The Arbitrary Variants release #556

ben-rogerson Oct 13, 2021 Maintainer

🌟 New: Arbitrary Variants (#546)

🐛 Bugfixes

Replies: 1 comment

jvanderen1 Nov 5, 2021

ben-rogerson
Oct 13, 2021
Maintainer

jvanderen1
Nov 5, 2021