twin.macro

🎉 Improved plugin support

Twin now supports popular plugins like Tailwind UI and Custom forms.

See the list of supported plugins ➔

New Tailwind UI Components

It takes a while to convert the free Tailwind UI components over to React, so I've saved you some hassle. These will be replaced with the official Tailwind React components once they are released.

Twin + Tailwind UI React components ➔

New variants

Twin is now full to the brim with built-in variants!
In addition to the base Tailwind variants, the following variants are now available on your classes:

// Before/after
tw`before:content`
tw`after:content`

// Interactive links/buttons
tw`hocus:flex`
tw`link:flex`
tw`target:flex`
tw`focus-visible:flex`

// Form element states
tw`checked:flex`
tw`not-checked:flex`
tw`default:flex`
tw`enabled:flex`
tw`indeterminate:flex`
tw`invalid:flex`
tw`valid:flex`
tw`optional:flex`
tw`required:flex`
tw`placeholder-shown:flex`
tw`read-only:flex`
tw`read-write:flex`

// Not things
tw`not-first:flex`
tw`not-last:flex`
tw`not-only-child:flex`

// Only things
tw`only-child:flex`
tw`only-of-type:flex`

// Group states
tw`group-hocus:flex`
tw`group-active:flex`
tw`group-visited:flex`

See the config for more information ➔
Check mdn for pseudo-class descriptions ➔

Allow pipe character as a divider

I've seen class lists where the pipe character is used as a divider so I've added the feature in Twin:

tw="flex | bg-black"
tw`flex | bg-black`

Added a vue starter

I've added a new demo for styling with emotion + twin in vue.
There's no css/tw prop support yet but it's pretty cool to know it's possible.

See the vue + emotion + twin codepen ➔

Misc

• Restricted debug output to development
• Custom error for adding an empty class with a variant
• Small suggestion tweaks
• Plugin speed improvements

New: Debug prop for tw prop users (dev only)

Feature request from #62

Once your classes have been converted to css, there's no way to tell in your devtools what the classes were. By activating the debugProp, the classes will show in a special data-tw prop in development, much like you're used to seeing in vanilla Tailwind:

<div data-tw="flex flex-col justify-center h-full space-y-6" class="App___StyledDiv2-e1igrf-1 jkPhmw">

Activate the class display by adding debugProp: true to your twin config:

twin: {
  debugProp: true,
},

New: Curly brackets allowed

To help out with some linting setups, curly brackets can now be used with the tw prop:

<div tw={'flex flex-col justify-center h-full space-y-6'}>

Fix: Custom utility variants

Fixes #79

All variants are now working again with your custom utility plugins.

There's no need to define which variants are applied to your classes, they'll accept the entire range of variants available on the base classes:

// tailwind.config.js

module.exports = {
  // ...
  plugins: [breakPlugin],
}

function breakPlugin({ addUtilities }) {
  addUtilities({
    '.break-anywhere': {
      'overflow-wrap': 'anywhere',
      hyphens: 'auto',
    },
  })
}

// App.js
export default () => <div tw="md:break-anywhere">ThisBreaksUpWhenNeededWithAHyphen</div>

Version 1.1.0 was a major improvement to developer experience but required further changes to support TypeScript projects.

This version fixes the problems with those improvements:

• BREAKING: Removed support for tw as named export (must only be used as default export again)
• Added TypeScript support for TwStyle
• Improved documentation and added instructions for module augmentation in TypeScript for css and styled import shortcuts - styled-components / emotion

Thank you for using Twin!

• Documentation update - Install twin as a dependency rather than devDependency
• Allow import 'TwStyle' to allow typesafe return functions

In this version, Twin has a whole bunch of developer experience improvements.

Let me run through the changes:

Fixes

Aligned the type definitions with the string interpolation feature added in the previous release - Issue ref

Validation for twin imports - Twin will provide feedback if you happen to get any of its imports wrong

Features

Your styled and css imports can now be added with Twin

import tw, { styled, css } from 'twin.macro'

Behind-the-scenes, Twin adds the necessary css library imports for you based on your Twin config.

The imports will only be added if you use them within your code.

Note: If you're not using Emotion then you'll need to adjust your config to use the new css import.

You can either add the import with the css config option that works just like the existing styled option or use the new preset feature below ({ preset: 'styled-components' }).

Twin now doesn't require a default import to use the tw prop

import 'twin.macro'
<input tw="w-full" />

This fixes all those tw is unused warnings 🎉 – Thanks to @zaguiini for the PR!

A new preset option for easier setup with styled-components

If you're using styled-components, you can now add a preset and Twin will take care of adding the correct imports for styled-components (in the right order too):

// In package.json or in your babel macro config:
{ preset: 'styled-components' }

This option defaults to { preset: 'emotion' } and setting a preset will override any custom imports.

A new autoCssProp option for adding the css prop automatically with styled-components

By adding { autoCssProp: true } to your config, Twin will import styled-components/macro on your behalf - but only when you need it. Check the Twin config docs for more info.

Styled components can also be fussy with the import order so this option will let Twin take care of it for you.

That's all for now!
Ben

Twin has hit v1 🎉
To help celebrate, we've added support for Tailwind v1.4, tw variables and better suggestions!

New features

• Support for basic variables added within tw backticks
  You can now use variables within your tw calls. This means you can import and reuse styles.
  Only basic evaluations are supported so no functions or conditionals can be used:

  const basicVariable = 'bg-purple-500'
  const PurpleBox = tw.div`${basicVariable}`
  

• Better suggestions from your config
  To help with misspellings and class discovery, Twin can now fuzzy match suggestions from your config.

• Added a checked: variant
  Great for radios and checkbox styling: checked:text-purple-500 - See all variants

• Added container margins
  Expanding on the custom paddings introduced in Tailwind v1.4 is the ability to set custom left/right margins on the container:

  // tailwind.config.js
  module.exports = {
    theme: {
      container: {
        // Twin v1.0.0 feature
        margin: {
          default: '1rem',
          sm: ['2rem', '3rem'],
          lg: ['4rem', '5rem'],
          xl: ['5rem', '6rem'],
        },
        // Tailwind v1.4 feature
        padding: {
          default: '1rem',
          sm: '2rem',
          lg: '4rem',
          xl: '5rem',
        },
      },
    },
  }
  

Tailwind 1.4 features

• New color opacity utilities - Added by Ben
• Support for specifying a default line-height for each font-size utility - Added by Ben
• Add space and divide layout utilities - DenVash contributions
• New transition-delay utilities - Added by OnurGvnc
• New group-focus variant - Already a feature
• Support for breakpoint-specific padding for container class - Added by Ben
• Added current to the default color palette - Added by OnurGvnc
• New inline-grid utility - Added by OnurGvnc
• New flow-root display utility - Added by OnurGvnc
• New clear-none utility - Added by OnurGvnc

Community

Jump in our new Twin Discord channel for further Twin v1.0.0 discussion.

TypeScript support

Twin now has TypeScript support! Thanks to @kingdaro, Twin should feel a little more "integrated" with your editor.

New group states

In addition to group-hover, you now have some new custom classes to work with:

tw`group-hocus:bg-red-500`
tw`group-focus:bg-red-500`
tw`group-active:bg-red-500`
tw`group-visited:bg-red-500`

//      ↓ ↓ ↓ ↓ ↓ ↓

;({
  '.group:hover &, .group:focus &': {
    backgroundColor: '#f56565'
  }
})
;({
  '.group:focus &': {
    backgroundColor: '#f56565'
  }
})
;({
  '.group:active &': {
    backgroundColor: '#f56565'
  }
})
;({
  '.group:visited &': {
    backgroundColor: '#f56565'
  }
})

To use these group classes, you'll first need to add a group className on a container element.

<div className="group"><button tw="group-hocus:bg-red-500">Test</button></div>

Stay healthy!

Plugin utility support

Twin now supports addUtilities in your config plugin section.

// In tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities, theme }) => {
      const newUtilities = {
        ".type-sm": {
          fontSize: theme("fontSize.sm"),
          fontWeight: theme("fontWeight.medium"),
          lineHeight: theme("lineHeight.tight")
        }
      };
      addUtilities(newUtilities);
    }
  ]
};

Further plugin support is planned for the future.

Read more about adding your own custom plugin utilities

Improved suggestions

Suggestions have been upgraded and now look at more of your config. This feature will help fix mistakes and improve class discoverability.

✕ bloc was not found

Did you mean block?

✕ flex-0 was not found

Try one of these classes:
flex-grow-0 [0] / flex-grow [1] / flex-shrink-0 [0] / flex-shrink [1] / flex-1 [1 1 0%] / flex-auto [1 1 auto]
flex-initial [0 1 auto] / flex-none [none] / flex / flex-row / flex-row-reverse
flex-col / flex-col-reverse / flex-no-wrap / flex-wrap / flex-wrap-reverse

More soon, cheers

This release added the following features:

• Twin gained full support for the transform and translate-... classes
• You can now use !important within the tw blocks, just add a bang on the end of any Tailwind class:

// In
 tw`flex! bg-purple-500!`

// Out
styled.div({
  "display": "flex !important",
  "backgroundColor": "#9f7aea !important"
})

• New :hocus variant - Tackle both hover and focus pseudo-classes at once with this magic sounding variant:

// Old 
tw.div`hover:bg-purple-500 focus:bg-purple-500`

// New
tw.div`hocus:bg-purple-500`

• Add feedback suggestions for dynamic classes - You'll see a list of suggestions for using an incorrect class:

> ✕ “flex-test” was not found in the Tailwind config.
>
> Available flex classes:
> flex-1 [1 1 0%] / flex-auto [1 1 auto] / flex-initial [0 1 auto] / flex-none [none]

These suggestions will be rolled out to the rest of the classes in coming releases.

Included in 1.0.0-alpha.1

• Support for around 99% of the classes in Tailwind v1.2 (No 'container' or '"-translate-XXX" yet).
• All variants are enabled by default (eg: hover:, focus:, first:, odd:, etc) without having to specify them in your variants config. This is only possible because Twin.macro doesn't pre-generate styles before you use them.

Take a look at the installation instructions to get started.

Next on the list

• Add -translate-XXX class support
• Expand on the error feedback
• Add dev mode
• Improve the examples in the readme