v3.0: Support for tailwindcss v3.2.2+
Release changes
- πΒ Added support for all new classes in Tailwind v3.2+
Use new variants likearia-xxx
,data-xxx
andmin-xxx
- check the official tailwindcss release posts for more info - πΒ Added full Tailwind support for all plugin functions
It's only taken three versions and a rewrite to achieve and now full plugin support is here! - πΒ Added
tailwindcss
topeerDependencies
No more waiting for twin to support new Tailwind features, just updatetailwindcss
- Improved style de-caching after adjusting values in
tailwind.config.js
#693 - Added additional
not-
versions of many common variants, eg:not-empty:
,:not-focus:
,:not-required:
ref - When working in a sub directory within a monorepo, twin will now look upwards for a missing
tailwind.config.js
#693 - A tailwind config object can now be passed in via
config
- more at docs/config tailwind.config.cjs
has been added as a fallback 9e7a7df- Added support for the important
!
prefix on groups, eg:first:!(block mt-5)
- New twin config option:
hasLogColors: false
to remove log coloring bbaec9d
Container queries
The new tailwind-container-queries plugin works with twin but there are some browser and version requirements:
- Styled components requires minimum of styled-components@6.0.0-beta.6
- Emotion requires minimum of @emotion/react@11.10.5
Update notes
- Twin config option
debugPlugins
was removed and rolled into another existing option:debug: true
- Class ordering has been synced with tailwindcss
container
has been aligned with tailwind - no longer has a custom margin value
Short Css deprecated
Twins custom "short css" has been deprecated in favour of Tailwind arbitrary properties:
tw`backgroundColor[red]` // short css (no dash next to the `[`)
tw`[backgroundColor:red]` // Updated to an arbitrary property
Emotion error: Value for 'content' without quotes
In Emotion, using before:
or after:
variants may trigger a console error like this:
You seem to be using a value for 'content' without quotes, try replacing it with `content: '"var(--tw-content)"'`
Update one or both of the packages below to avoid this error (version is when error was fixed):
Arbitrary variants/properties without parent selectors
In arbitrary variants/properties without parent selectors, Twin now needs to add the parent selector for you in order to create a compatible class to run through tailwindcss.
If twin miscalculates where the parent selector should be added then you'll need to add the parent selector yourself.
Arbitrary variant escaping
Twin now replaces all spaces with underscores in arbitrary variants, so to keep any underscores in the output we can escape them:
// Bad
<div class="[.header__menu]:block">...</div>
// Good
<div class="[.header\_\_menu]:block">...</div>
General value escaping
Previously in many instances, escaping required a double backslash before the character (\\
).
Now we'll only need a single backslash:
tw`after:content-['\a0']`
Theme values/import and DEFAULT
When theme is used within an arbitrary value or property and there is a DEFAULT value found, the theme value will now return the default value automatically:
// tailwind.config.js
module.exports = {
theme: { colors: { black: { DEFAULT: "redish" } } },
}
// Usage
tw`bg-[theme(colors.black)]` // Arbitrary value
tw`[background-color:theme(colors.black)]` // Arbitrary property
// β β β β β β
({ "backgroundColor": "redish" }); // < DEFAULT key returned
({ "backgroundColor": "redish" }); // < DEFAULT key returned
The theme import now won't return the DEFAULT
option automatically.
We can still select the DEFAULT value by specifying it, eg: themecolors.black.DEFAULT
.
This makes it possible to grab whole objects from the config without automatically returning the DEFAULT
value:
// tailwind.config.js
module.exports = {
theme: { colors: { black: { DEFAULT: "redish", another: 'greenish' } } },
}
// Usage
import { theme } from 'twin.macro'
theme`colors.black`
// β β β β β β
// Whole object returned
({
"DEFAULT": "redish",
"another": "greenish"
});
Daisy UI tailwind plugin
DaisyUI often styles their components based on classNames, eg: .btn.loading { ... }
This means in some situations we have to add classNames to the jsx element to add their modifier styling
Some discussion here and at #760
Vite build issue
If you're noticing build issues after upgrading, try updating your Vite config with the updated build target:
optimizeDeps: {
esbuildOptions: {
target: "es2020",
},
},
Support
If youβre kicking ass with twin - especially if youβre in a team - then please consider supporting this project.
It will really help out with the continued development of twin - cheers! π»
Thanks
A huge thanks and shout out to all the rc
contributors helping with features, fixes and bug testing over the past year - you folks are awesome ππ
@omaemae, @ChrisEbert, @Macksi, @atxiii, @mohammadsiyou, @MatthiasDunker, @lguima, @EduardoBautista, @HaidarEzio, @ajmnz
Full Changelog: 2.8.2...3.0.0