带有 Tailwind 和 Emotion 设置的故事书

Posted

技术标签:

【中文标题】带有 Tailwind 和 Emotion 设置的故事书【英文标题】:Storybook with Tailwind and Emotion setup 【发布时间】: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 包在那里,但似乎没有找到它。

【问题讨论】:

【参考方案1】:

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

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

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

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

npx sb init

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

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

【讨论】:

以上是关于带有 Tailwind 和 Emotion 设置的故事书的主要内容,如果未能解决你的问题,请参考以下文章

使用 css prop 运行带有 CRA 和 Emotion 的 Quokka.js 时出现错误(运行时为经典时无法设置 importSource)

默认颜色不适用于`tailwind.macro`

带有 Material-UI 的 s-s-r 上的 @emotion/cache 始终为空

如何将带有 PostCSS 清除的 Tailwind CSS 添加到 Rails 5?

带有 Tailwind 的 Next.js 刷新缓慢

带有 Tailwind CSS 的 Django-Tinymce