带有 Tailwind 和 Emotion 设置的故事书答案

【问题标题】：Storybook with Tailwind and Emotion setup带有 Tailwind 和 Emotion 设置的故事书
【发布时间】：2020-12-07 19:22:46
【问题描述】：

我有以下故事书组件：

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>
))

没有styled 版本并将css 类直接嵌入到className 中它可以工作。当我引入styled 版本时，我收到以下错误：

虽然 node_module 包在那里，但似乎没有找到它。

【问题讨论】：

标签： javascript storybook tailwind-css emotion

【解决方案1】：

如果您想将 Tailwind 与 Emotion 一起使用，现在可以使用 Twin macros。

您可以从查看以下示例开始：

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

安装完成后，在项目根目录中运行以下命令：

npx sb init

它将以理想的设置为您安装 Storybook。

完成此操作后，您将拥有一本即用型的情感故事书。

【讨论】：