tw-in-js / twind.macro

This package is been moved into tw-in-js/twind-jsx-preprocessor monorepo.

This package is been moved into tw-in-js/twind-jsx-preprocessor:packages/macro.

Please check out the new tw-in-js/twind-jsx-preprocessor monorepo.

@twind/macro

Enables the use of the tw prop, for use with twind

import "@twind/macro"
const Button = () => <button tw="bg-blue-500" />

// ⬇⬇⬇⬇⬇⬇

import { tw } from "twind"
const Button = () => <button className={tw`bg-blue-500`} />

More complex usage is supported:

import "@twind/macro"

const Button = () => (
	<button
		tw={[
			"bg-blue-500",
			condition && "text-red-500",
			{ "border-green-500": true },
		]}
	/>
)

// ⬇⬇⬇⬇⬇⬇

import { tw } from "twind"

const Button = () => (
	<button
		className={tw([
			"bg-blue-500",
			condition && "text-red-500",
			{ "border-green-500": true },
		])}
	/>
)

Installation

1. Add babel-plugin-macros to your babel config (if you use Create React App, it's already installed!)
2. Run npm install @twind/macro
3. Enjoy ☺