Storybook with Tailwind and Emotion setup

user_1312785 0
Viewed 569

I have the following storybook component:

import {storiesOf} from "@storybook/react"
import * as React from "react"
import styled from "@emotion/styled"
import tw from "@tailwindcssinjs/macro"

const Button = styled.button(tw`
  relative
  w-64 min-w-full
`)

const ButtonStyled = ({children}) => <Button>{children}</Button>

storiesOf("Button", module).add("with text", () => (
    <ButtonStyled>this is a button </ButtonStyled>
))

without the styled version and embedding the css classes straight into the className it works. The moment I introduce the styled version I get the following error:

enter image description here

Although the node_module package is there it doesn't seem to find it.

emotion storybook tailwind-css javascript
1 Answers

If you want to use Tailwind with Emotion, now you can use Twin macros.

You can start by checking out this example:

https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion

When you're done installing that, run this command in the project root:

npx sb init

It will install Storybook for you with the ideal settings.

Having done that, you'll have a ready-to-use emotion-powered Storybook.

user_26673740
Related