🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
Not a fan of the virtual dom? Try Twin's new SolidJS preset 🎉
Read more at #817
Note: Twin will now autoload a tailwind.config.ts config file if found when a tailwind.config.[.js/.cjs] doesn't exist.
// tailwind.config.ts
// generate with: `npx tailwindcss init --ts`
import type { Config } from 'tailwindcss'
export default {
content: ['*'],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
// tailwind.config.js
// generate with: `npx tailwindcss init --esm`
/** @type {import('tailwindcss').Config} */
export default {
content: ['*'],
theme: {
extend: {},
},
plugins: [],
}
// Classic tailwind.config.js for comparison
// generate with: `npx tailwindcss init`
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['*'],
theme: {
extend: {},
},
plugins: [],
}
🎉 This version adds support for [email protected] - enjoy!
Read the official tailwind release notes for info on all the new goodies.
Install twin and tailwind latest:
npm i -D twin.macro@latest tailwindcss@latest
pnpm i -D twin.macro@latest tailwindcss@latest
yarn add -D twin.macro@latest tailwindcss@latest
@apply support in plugins #770
Develop tailwindcss plugins quickly using twin-supported classes.
@screen inability to grab complex theme.screens values #763 - Thanks @minzojianpieces.some is not a function error #767This patch contains a fix for stitches:
animation-x classes #758And mostly fixes for arbitrary variant usage:
[@page]:m-0 #759Reminder: Update tailwind to latest also or you'll probably see a pieces.some is not a function error:
# `[email protected]` requires `tailwindcss@>=3.2.0`
npm i twin.macro@latest tailwindcss@latest
aria-xxx, data-xxx and min-xxx - check the official tailwindcss release posts for more infotailwindcss to peerDependencies
No more waiting for twin to support new Tailwind features, just update tailwindcss
tailwind.config.js https://github.com/ben-rogerson/twin.macro/pull/693
not- versions of many common variants, eg: not-empty:,:not-focus:,:not-required: ref
tailwind.config.js
https://github.com/ben-rogerson/twin.macro/pull/693
config - more at docs/config
tailwind.config.cjs has been added as a fallback https://github.com/ben-rogerson/twin.macro/commit/9e7a7df14d0e254350af7ec08d9b6e5a5689d4b0
! prefix on groups, eg: first:!(block mt-5)
hasLogColors: false to remove log coloring https://github.com/ben-rogerson/twin.macro/commit/bbaec9d490cabf6b6cfd23b484d3fb10a743621c
The new tailwind-container-queries plugin works with twin but there are some browser and version requirements:
debugPlugins was removed and rolled into another existing option: debug: true
container has been aligned with tailwind - no longer has a custom margin valueTwins 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
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):
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.
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>
Previously in many instances, escaping required a double backslash before the character (\\).
Now we'll only need a single backslash:
tw`after:content-['\a0']`
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"
});
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
If you're noticing build issues after upgrading, try updating your Vite config with the updated build target:
optimizeDeps: {
esbuildOptions: {
target: "es2020",
},
},
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! 🍻
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: https://github.com/ben-rogerson/twin.macro/compare/2.8.2...3.0.0
Install release candidate 5:
npm install twin.macro@rc
Minor rc release with a few patches:
Big thanks to everyone who has helped with testing đź‘Ť
Minor rc release with a couple small patches:
before:content-['...'] https://github.com/ben-rogerson/twin.macro/commit/a0c5a2d999d0a921c93ab5e535f2e7de2c95496a