Twin.Macro Playground

The ✨first✨ online playground for Twin.macro. Check out the FAQ below for details.

Created by Luke Murray.

Inline Playground

<button

tw="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">

  Purple to Pink

</button>

Multi-Line Playground

const buttonBaseStyles = tw`py-2 px-4 text-sm font-medium text-gray-900 bg-transparent border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700`;



const Button = styled.button`

  ${buttonBaseStyles};

  ${({ variant }) => variant === "left" && tw`rounded-l-lg border`}

  ${({ variant }) => variant === "right" && tw`rounded-r-lg border`}

  ${({ variant }) => variant === "center" && tw`border-t border-b`}

`



const ButtonGroup = tw.div`inline-flex rounded-md shadow-sm`;



// note the render function. you must call this to render a component

render(

  <ButtonGroup>

    <Button variant="left">Profile</Button>

    <Button variant="center">Settings</Button>

    <Button variant="right">Download</Button>

  </ButtonGroup>

)

FAQ

What does Inline and Multi-Line mean?

Inline

Inline mode renders simple code that can be wrapped in a return statement.

<input tw="border hover:border-black" />

Multi-line

Multi-line line mode renders more complex code with multiple statements. But you need to call "render" at the end of the code to render your component.

const Input = tw.input`border hover:border-black`
const PurpleInput = tw(Input)`border-purple-500`
// note the render function!
render(<PurpleInput />)

// you need to call render! this would not work :(
// <PurpleInput />

What can I import?

The playground gives you access to the following imports.

import tw, { css, styled, screen, theme  } from "twin.macro";
import React from "react";

Can I use typescript?

No, not yet.

Can I use hooks?

Yes! checkout the component and hooks example.

I want to see more examples!

To see more examples check a page with all the examples from the twin.macro readme.

Can I use this on my own site?

Not yet! However, all of the code for this site can be found on github. Feel free to open an issue or submit a pull request.

How does it work?

Most of the changes necessary to make this work can be found in this commit. If there is interest I may put together a write up explaining it. Let me know!

Credit to flowbite for the components used in the default examples.