Skip to content

2.3.0 - Plugins, Commenting, Variants, Prefixing and more
Compare
Choose a tag to compare
@ben-rogerson ben-rogerson released this 03 Mar 09:46
· 439 commits to master since this release
2.3.0
b4ca80d

New: babel-plugin-twin companion plugin

babel-plugin-twin gives you the tw and css prop without having to import 'twin.macro' in your files!

Take a look at babel-plugin-twin →

New: Class commenting (#341)

You can now use comments to disable classes:

// Disable classes with a single-line comment
<div tw="block // flex relative" />; // flex + relative will be ignored

// For more control, use a multi-line comment
<div tw="/* block flex */ relative" />; // block + flex will be ignored

⚡ @lightyen has already added support for comments in the twin intellisense vscode plugin

New: 15 additional variants to style with (#342)

// Style input/textarea placeholders
tw`placeholder:text-black`;

// Target screen + print
tw`screen:flex`;
tw`print:flex`;

// Target screen orientation
tw`landscape:flex`;
tw`portrait:flex`;

// Pointer and hover targeting selectors

// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer
tw`any-pointer-none:flex`;
tw`any-pointer-fine:flex`;
tw`any-pointer-coarse:flex`;

// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
tw`pointer-none:flex`;
tw`pointer-fine:flex`;
tw`pointer-coarse:flex`;

// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover
tw`any-hover-none:flex`;
tw`any-hover:flex`;

// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
tw`can-hover:flex`;
tw`cant-hover:flex`;

See the pr for more info →

New: Plugin parent selectors (#335)

In custom tailwind plugins you can now use everyones favourite parent selector - the "&".
This selector allows you to add styles if there is a class/attribute on a parent.

This example creates a gap-x-1 class that applies a callback when a class it added higher up the tree:

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

const gapFallback = plugin(({ addUtilities }) =>
  addUtilities({
    '.gap-x-1': {
      rowGap: '1em',
      ".no-flex-gap &": {
        marginTop: '-0.5em',
        marginBottom: '-0.5em',
      },
      ".no-flex-gap & > *": {
        marginTop: '0.5em',
        marginBottom: '0.5em',
      },
    },
  })
);

module.exports = { plugins: [gapFallback] };
// App.js
<body className="no-flex-gap">
  <div tw="gap-x-1">
    Element using modern rowGap with a fallback for older browsers
  </div>
</body>

The above example is just a demonstration, ideally we should loop through the existing gap values instead - check out the pr for a production example.

See the pr for more info →

New: Class prefixing (#348)

Twin now supports the prefix feature from tailwindcss.
This feature lets you specify a prefix for all the tailwind classes to avoid clashing with other styling systems.
Add the prefix to your tailwind config like this:

// tailwind.config.js
module.exports = {
  prefix: "twin-"
};

Then use anywhere you can write tailwind classes:

// App.js
<div tw="twin-block" />
<div css={tw`twin-block`} />
<div className="twin-block" /> // with `includeClassNames: true` in your twin config
styled.div(tw`twin-block`)
tw.div`twin-block`

New: Multiline short css values (f912664)

Your longer short css values can be specified on multiple lines:

tw`
box-shadow[
  5px 5px blue,
  10px 10px red,
  15px 15px green;
]
`

New: Keep the data-tw prop while in production

You can now tell twin to keep the data-tw prop in production:

// twin config
"twin": {
  "dataTwProp": "all"
}

Bugfixes

  • Fixed the theme import matching some incorrect values (#325)
  • Fixed the auto css prop not being added under some conditions (#339 b957878)
  • Fixed a ReferenceError: tw is not defined error (#339 ffc06dc)

Support

Did you know twin is just over a year old and this is the 48th release? 😱
It's been an utter ride this past year and I'm feeling incredibly grateful for all your positive feedback.
If you’re kicking ass with twin - especially if you’re in a team - then please consider becoming a sponsor. It would really help out - cheers! 🍻

Assets 2